Creating Healthify’s design system from scratch

Design systems, process improvement

I built and maintained a design system for product and engineering teams.

The challenge

Healthify didn’t have a design system. This resulted in coordination problems during visual design, hand-offs, and implementation. With each new feature, more variations of the same U elements happened.

What I did

I established a scalable design system based on atomic design principles. Content included a style guide and standard UI components.

Impact

Time spent on visual design went down by ~70%. A week’s worth of work got condensed to a day or two.

UI audit results

My first step was to go through the app and take screenshots of all UI elements to get a sense of which components, colors, and typography were used.

I then organize screenshots to see how much variation there was for each item in Airtable. I also created a checklist of style guide components we needed.

Creating the reference file

The process was essentially jumping between these steps:

• Write out usage guidelines for typography, colors, and spacing.
• Put together an icon library.
• Design individual components that combined into complex UI elements.
• See where things broke with complex UI elements.
• Adjust overarching rules and smaller components.

The design document lived in Sketch and was shared with Product and Engineering via Zeplin. We also used Zeplin to note if something fits existing patterns or is a one-off.

The design system in action

We gradually rolled out the design system feature by feature, including referrals and admin tools.

Search for social services


Report and merge duplicate clients


Check client progress on their profile page

Post-script
Creating high fidelity mockups went faster with fewer mistakes. No more wireframes needed. Documentation took much less time with Zeplin comments.

The Engineering team built an internal component library with React, which saved time on frontend work.