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.

It also gave us an opportunity to audit components against digital accessibility guidelines, something that I'd been a vocal advocate for. The system became the basis for future feature development and was used by senior UX/UI designers who supported app development as a business outcome.

I was the sole designer working on this project. My objectives were to:

• Consolidate, standardize, and deprecate (as needed) colors, text styles, and components ‍
• Create scalable, responsive components that prioritize accessibility
• Create moments of delight(!) for the user through branded illustrations and animations

FIGMA FILE 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.

ACCESSIBILITY IS A NECESSITY

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.

In general, I am strong believer in accessible and ethical design and recommend taking the W3C Web Accessibility Initiative (WAI) - Introduction to Accessibility course. It was a great place to start as I began undertaking this accessibility audit.

I created templates 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.

This work was vital from a business standpoint, as most of our user base was between the ages of 45-80 years old, 85% of which had large text accessibility enabled on their phones.

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

With all those technical specifications and documentation out of the way, it was time to add some personality back into our app. I created some instructional illustrations and animations that fit within our design brand guidelines. These small moments of delight add up to create a memorable user experience for our patients.

RESULTS

By the end, we met our goal of 100% of audited react native components pass WCAG3 AAA accessibility guidelines for color contrast, text size, and
interactive 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 🕊️.