Portfolio

Raremark

🤔 Problem

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

Raremark is crowdsourcing and organizing the wisdom of experts: patients, parents, and caregivers who deeply understand what it’s like to live with a rare disease every day. They believe free access to information is key to helping everyone better understand, manage, and talk about the rare condition that’s part of their life. 

👨‍👩‍👧‍👦 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.

Through user interviews, we understood that the 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.

👨🏾‍💻 Role

Working here for a number of years, my role and responsibilities evolved over time. During my time, I worked with a couple of designers and user researcher as part of the design team, and closely with the product owner, SMT, engineers as part of a wider product team. Other stakeholders included content, clinical research and analysis, behavioural science, business development and clients. My responsibilities included:

  • UX Research (working with user research)

  • UX Design

  • Visual design

  • Interaction design

  • Prototyping

  • Design system management

  • Design management

  • Content and marketing support

🧠 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 duration of this initiative was 8 weeks. We had identified through interviews two core jobs to be done: find a cure for my condition and have the best quality of life with my condition. From a business side, revenue generation for the business is dependent on clinical trial recruitment.

This initiative looks to find solutions for the first job to be done as well as the core business need. The problem was led by the PM and was delivered to me in the form of a problem doc (with contributions from various SMT stakeholders). Overseeing the initiative was the COO.

After initial discussions, the steering from the SMT, the assumed solution is features that allow our users to take part in research studies such as clinical trials, surveys and longitudinal studies. 

Discovery

Working with product manager/user research, interviews and surveys were conducted, speaking with users to understand their needs and pain points. We also gathered insights from relevant stakeholders within the company. Synthesising the group workshops led to a 'Jobs to be done' framework and problem evidence for us to move forward. Further synthesis using empathy maps and customer journey maps to fully understand the problem an approach moving forward. 

Slide 16_9 - 3.png

Images show various insights that had been gathered between the team

Slide 16_9 - 4.png

Images show synthesising of insights

Exploration

Various workshops, desk research and sketching of ideas was done to begin to realise our direction going forward. Various internal reviews and critiques are taking place here as well. At this point, we tightened our focus on an internal research study that would be open and accessible to people affected by rare disease. A feedback loop would be provided to help raise awareness and help learn from shared experiences (both jobs to be done).

Slide 16_9 - 5.png

Images show workshops, research and sketching

UX/UI design

User flows and wireframes are coming together at this point, realising the vision from earlier exploration and discovery. Flows are done in collaboration with engineers and wireframes are done in preparation for usability testing. Usability testing is done in collaboration with the product manager, where we looked to uncover issues with the experience. After iterations and reviews with designers, engineers and SMT, deliverables are gathered and handover takes place to prepare for build. 

Slide 16_9 - 6.png

Images show User flows and wireframes

Slide 16_9 - 7.png

Images show UI design and assets for delivery

Impact

We were able to measure our impact against our measures such as pirate metrics, funnels and the original user needs. We found acquisition and activation progress as well as addressing problems such as access to research, application fatigue and raising awareness for rare disease. Finally, the design system was updated as a result of the new components introduced.

Slide 16_9 - 8.png

Images show impact of the initiative

Learnings

There were many learnings from the initiative, including email feedback which led to a follow-up initiative around how users can better select their condition. We also found drop-offs during the journey that we could look to improve. Process learnings were also found, including ways we can be more efficient and thinking about how we scale.

Slide 16_9 - 9.png

Images show mapping out design processes and specific problem definition

🛠 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.