The Brief

‍The Wellinks mobile app was originally developed on two platforms: iOS and Android. To decrease development time on future features, the team decided to migrate our app to React Native, meaning we needed a new mobile component and design system.

The system needed to be accessible enough to be used by different teams—robust enough for engineering, flexible enough for content, distinguished enough for marketing, and functional enough for design.

By balancing different stakeholder needs, this design system became the basis for future feature development and was used by senior UX/UI designers who supported app development as a business outcome.

Accessibility is a Neccessity

An overwhelming majority of our user base are above the age of 65, and have large text enabled on their mobile phones, so it was vital that our designs were text scalable and dynamic to serve this population. I am strong believer in accessible and ethical design and recommend taking the W3C Web Accessibility Initiative (WAI) - Introduction to Accessibility course.

Using Figma's new token system for how different elements (text copy, headers, call to actions) should scale with larger font sizes. Creating these dynamic, scalable templates saved the team a lot of guess work as we moved forward with new features.

File Figma System

My process was to start re-organizing our system from the top down, starting with our Figma file and project system. I designed covers for each of our files and created sub-categories within the file pages. Figma doesn't allow page grouping (something I hope they add in the future), so I had to get creative.

Each page the contained a single component, interactions, states, and documentation on it's use with a visual example provided.

Components

Now to the components themselves. I began by auditing our existing Android and iOS components, deprecating or combining components when needed. Then, I created the anatomy of each component, noting where it's structure served an interactive versus informative function.

I then standardized design elements such as spacing/padding and other meta information around each component.

Fonts and Colors

In addition to text scalability, I also ensured that all element interactions were perceivable and operable without relying on color alone. I also checked all text and color styles combinations for sufficient contrast.

I consolidated all existing font uses into a clean, minimal six text styles, and documented their use cases accordingly. I also began switching over the styles to Figma's new variable system, which has greatly helped in maintaining changes to our design system.

Illustrations

I created an instructional illustrations and animations library to be used for both educational and promotional content These small moments of delight add up to create a distinguishable, memorable user experience for our patients.

Conclusion

‍ the end, we met our goal of 100% of audited react native components pass WCAG3 AAA accessibility guidelines for color contrast, text size, an dinteractive operations. And, as an added bonus, we saw a 71% decrease in QA tickets regarding mobile UI changes. No doubt an incredible impact on designer-engineer relations was had.