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.
Images high-level vision work and problem definition as a result of workshops and discussions
Working here for a number of years, my role and responsibilities evolved over time. During my time, I worked with a senior designer 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, 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
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.
Images show mapping out design processes and specific problem definition
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.
Images show user stories, competitor analysis and visual mood boards
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.
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.
Images show platform guides and Zeplin resource for engineers
Images show the Sketch library, both the element guide and the component guide
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.