Portfolio

Raremark

🤔 Problem

How might we help people affected by rare disease learn about their condition, share their experience and take part in research?

👨‍👩‍👧‍👦 Users and target audience

The users and target audience were people affected by rare disease, primarily patients, parent/carers and family members. The user base mostly consisted of people in the US and Europe but did include people from other parts of the world. This meant a great emphasis on accessibility and inclusivity.

User goals and needs ranged from people knowledgeable in their condition, and therefore wanting to take part in research (find a cure) and be advocates; to people who were recently diagnosed, knowing little about their disease and wanting to learn more and find their community.

The ideal experience involves a web/mobile app that can be a 'one-stop-shop' for all their information needs relating to rare disease. This could include life-hacks, tips, discussions as well as information on research opportunities.

Their pain points include lack of access to information, the information not being plain-language and being difficult to understand and similar resources lacking in personalisation and any sort of delight and consistent engagement.

Existing technology and information sources include mobile and desktop devices (most users on mobile) and websites like The Mighty, Rareconnect and Inspire.

high-level-thinking
high-level-thinking-documented

Images high-level vision work and  problem definition as a result of workshops and discussions

👨🏾‍💻 Role

Working here for a number of years, my role and responsibilities evolved over time. I've gone from a junior designer to a senior with design management responsibilities. During my time, I worked with a number of designers and user researcher as part of the design team, and closely with the product owner, engineers and QA as part of a wider product team. Other stakeholders included content, research and analysis, behavioural science, business development and clients. My responsibilities included:

  • UX Research - This involved stakeholder information gathering, identifying needs and facilitation to define problems

  • UX Design - Mapping user flows and experiences, sketches and documentation

  • Visual design - The finalised UI, look and feel of features to be implemented

  • Interaction design - Design of states and how users engage and interact with the site

  • Prototyping - Useful for stakeholder meetings and facilitation, as well as communicating with developers

  • Design language system management - Establishing and championing the design language system, as well as maintenance and improvements

  • Design management - Facilitating design rituals, managing initiatives and design tasks for other designers, conducting reviews and critiques, liaising between design and tech, producing design proposals for the senior management team

  • Content and marketing support - Producing social and print materials, including reports, social media posts and infographics

🧠 Product design process

To describe the process for features, the example I'll use is my involvement in features allowing our users to take part in research projects such as surveys and longitudinal studies.

The problem was identified by the product owner, who would hand the problem to me for definition and research. This would involve stakeholder information gathering with stakeholders such as business development, research and analysis and user research. The result would be research boards with notes from the insights gathered, looking at considerations, assumptions, contextual notes etc.

design-process
ux-research

Images show mapping out design processes and specific problem definition

road-mapping
low-fi-mock-ups

Images sketches, low-fidelity mockups and road mapping

Next would be the UX design, producing user flows, low-fidelity prototypes, sketches and wires to further facilitate discussions until the experience had been agreed on with all key stakeholders. Also important was identifying how features could be tested and consider success metrics.

user-stories
visual-mood-board

Images show user stories, competitor analysis and visual mood boards

projects-sketch
feedback-facilitation

Images show sketches, higher fidelity flows and initial UI and prototypes for facilitating discussions

Following this was the UI design, including visuals, interactions and hi-fidelity prototypes. This would be done in Sketch, with discussions at this point including the engineers. Once the designs were signed off and the technical handover complete, development could begin.

Rounding out the project was auditing the designs in order to update the design system, putting them in the library and writing guidelines around the new components and patterns.

🛠 Design system process

As part of my role here, I was responsible for establishing the Raremark design language system, and championing the system with the company later recognising the value to the business. 

This firstly involved mapping out a structure for the system and establishing design principles, which was heavily inspired by Atomic design. From here, we (the design team) could audit the current state of the site and fit what was to remain into the structure. Components could then be iterated on based on established principles such as coherence and accessibility. Patterns could then also be identified.

DLS-structure-mapping
Auditing-notes

Images show intial structure planning and auditing and card sorting exercises

This structure could then translate to a Sketch library for designers to refer to, a Zeplin style-guide for engineers and Confluence documentation for the wider company. Processes, meetings and quality control checks were also established for maintaining the system.

platform-guide
zeplin-library

Images show platform guides and Zeplin resource for engineers

element-library
component-library

Images show the Sketch library, both the element guide and the component guide

📈 Outcome

My contributions, as part of a small talented team of designers, bore great outcomes for Raremark. The platform is able to help people affected by rare disease, with an accessible, user-friendly experience and interface.

 

My specific contributions help lay foundations and grow the user's 'projects' experience as well as contributions across the platform. As for the company, establishing a design system that can scale as the company does has proven to have great value.