Crafting a unified design system to transform mental health experiences with intuitive and engaging interfaces
Iris Design System
Role
Visual Design
Interaction Design
Design System Management
Documentation
Redesign
Design Tools & Deliverables
Figma
Knapsack
Component Library
Foundations
Collaborators
Alex Orlov - Senior UX Designer
Brad Thompson - Engineering Manager
Jacy Anderson - Team Lead
Devin Stone - Software Engineer
Project Overview
SonderMind is a mental health service that matches clients with therapists that meet their healthcare needs and preferences. The design system helps engineers and designers at SonderMind improve their efficiency and improves overall cohesiveness of the portal design. My role was to design, research, and document the patient portal in this project.
Problem
The design process for SonderMind needs improvement to create a better user experience. Currently, there are inconsistencies and inefficiencies that make it difficult for designers and developers to work together smoothly. This leads to confusing interfaces and interactions. As SonderMind grows on different platforms, the lack of a strong design system makes it hard to adapt and grow effectively. To fix these problems, we should create a solid design system that makes everything consistent, improves workflows, and allows for growth, all while keeping our brand style intact. This will enhance the user experience and help SonderMind achieve its goals.
Objectives
Consistency
Ensure visual and interactive elements across the product are consistent, providing a cohesive and familiar user experience.
Scalability
Facilitate the growth and evolution of the product by offering a scalable design system that can adapt to new features, platforms, and user needs, ensuring a consistent experience as the product expands.
Efficiency
Streamline design and development processes by providing reusable components, patterns, and guidelines, enabling teams to work more efficiently and deliver high-quality experiences faster.
Intake forms - text boxes
Intake forms - reasons for therapy bubbles
Design
Foundations
To begin the design system, the team created design tokens as a way to communicate the brand redesign and store pieces of UI information in Figma and the Iris online page for designers and engineers. The redesign required establishing a strong foundation encompassing color, layout, typography, and more. This foundation plays a pivotal role in delivering a supportive and empathetic digital experience for users seeking mental health resources and support.
SonderMind’s Iris Design System Foundations
Component Library
Developing a component library is a vital step in building a comprehensive design system for SonderMind. The team utilized Figma and Knapsack to establish this library. Collaboratively, we will define and document reusable UI elements, ensuring consistency and efficiency in design and development. By leveraging Figma for visual design and prototyping and utilizing Knapsack for organizing and sharing components, our aim was to accelerate the design and development process while maintaining adherence to design principles and guidelines in our user interfaces.
SonderMind’s Iris Design System Component Library in Figma
Accessibility
Our team prioritized accessibility to ensure inclusivity and equal access for all users. We carefully considered various accessibility guidelines, such as WCAG 2.1, when establishing the visual and interactive components of our design system. By incorporating accessible color contrast ratios, implementing keyboard navigation support, and providing alternative text for visual content, we aimed to create an inclusive and user-friendly experience for individuals with disabilities, fostering a sense of equality and empowerment in accessing mental health resources and support.
Keyboard Control
In our design system creation, we recognized that accessibility goes beyond the user interface. To ensure inclusivity, our team extended accessibility considerations to documentation and component properties within Knapsack. By meticulously verifying compatibility with screen readers and keyboard navigation, we aimed to guarantee a seamless experience for users relying on these assistive technologies, fostering equal access and usability.
Color Contrast
The team aimed to meet at least a level of AA to make the website accessible to most users. However, we wanted to make sure the main components reached higher levels of contrast, ideally level AAA.
Input Feedback
Creating input feedback in our design system was a crucial aspect of enhancing user experience and providing clear guidance to users. By incorporating visual cues, such as success, error, and validation states, we ensured that users receive immediate and relevant feedback when interacting with input fields, promoting usability and reducing confusion or frustration in our mental health company's digital products.
Learnings Recap
During the design system review, we conducted user interviews with developers from different SonderMind teams to gather insights on their experience working with the system, areas for improvement, and the level of support it provided in their development process. Through this process, we learned about the system's strengths and identified opportunities for enhancement to better meet the needs of our users.
The user research uncovered insights that shed light on additional pain points and usability challenges faced by the developers. These unexpected insights allowed us to address previously unidentified issues and make targeted improvements to enhance the overall developer experience.
Challenges
The most challenging aspect of this project was balancing the diverse perspectives and requirements of the development teams while ensuring the design system remained cohesive and scalable. To overcome this challenge, we fostered open communication, actively solicited feedback, and facilitated collaborative discussions to find common ground and make informed design decisions that accommodated various needs.
Enjoyment
One particular aspect of the design process that I enjoyed was the iterative refinement and feedback loop. Collaborating closely with the developers and incorporating their input at each stage of the design system development was immensely rewarding. This iterative approach allowed us to continuously learn, adapt, and create a design system that genuinely addressed the needs and preferences of the development teams, ultimately improving their workflow and productivity.
SonderMind Patient Questionnaire Before and After
I have no doubt that Jordan will make a positive impact on any design team she joins.
While I worked with Jordan for several months, she impressed me with her ability to quickly contribute to our design system. She conducted component research, designed new patterns, and also helped build a sizeable component library of form components for other designers to use in Figma. Thanks to her experience as a front-end engineer, she was also able to identify ways to quickly and easily modernize font styles in production. Jordan cares deeply about her UX craft, and I hope our professional paths get to cross again someday!
— Alex Orlov
More Designs
Helping candidates find their job match one note at a time
Crafting a Unified Design System to Transform Mental Health Experiences with Intuitive and Engaging Interfaces
A strategic UX overhaul fostering engagement, empowerment, and aesthetic coherence in the realm of dance.