2019 - 2021 • Coming soon
Design system 1.0 and Matisse Design System
Audits, accessibility, standardization… Oh, my!
We set the precedent for subsequent design system work at GoodRx. About a year later, we moved from Sketch to Figma.
Overview
GoodRx didn’t have a design system that established UI standards. As our team started to scale, standardization was necessary.
Problem
Designers were creating bespoke components that led to visual inconsistencies across platforms and delayed development. Accessibility standards also weren’t a recognized priority at the time.
My role
As one of two designers leading this project, we were responsible for auditing existing designs and prioritizing components to update, define, and standardize. We worked closely with Engineering to ensure our components were technically feasible and built properly for desktop, tablet, and mobile web.
#accessibility #auditing #standardization #systemsdesign #uidesign
1. Design system 1.0
Setting the precedent
Prior to this initiative, we had no baseline guide of elements to reference our designs with. Building this initial design system allowed our design team to have a consistent library of components to use on feature-level work for web.
Below are primitives and additional components we constructed based on frequency of usage. We referenced Google’s Material Design and IBM’s Carbon Design System as best practices to help guide our system thinking.
2. Matisse Design System (2.0)
Pressure testing the Gold registration flow
Matisse Design System (MDS) is the 2.0 version of GoodRx’s original design system (1.0). It showcases a full-fledged visual rebrand and follows a more dynamic system approach.
Because I owned Gold web registration, I had constructed the initial anatomy of each page in the registration flow. In preparation for the consumption of MDS, I worked with my systems design partner to “Matissify” the flow and do an audit on additional components we needed to build.
I communicated gaps to the systems designer and we worked together to drive overall decisions on the interaction of certain components to improve the user experience.
Once components were approved on the design systems side, I was in charge of pressure testing them and making sure they’re flexible on different screen sizes.
3. What I learned
Design with the larger ecosystem in mind
Being on both sides of the design system process, i.e. building components vs. implementing components, I learned that everything I design should always be considered as part of a larger ecosystem. When we think in a systematic way and focus less on designing for singular features, we can create better user experiences and improve the pace and process of how we work together internally.