Creating Healthify’s design system from scratch

Design systems, process improvement

Healthify (acquired by WellSky) was a startup that addressed health inequities by connecting people to social services. Case managers can find resources for their clients, create referrals, and check on progress made.

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 frontend implementation, especially for overlapping projects. Plus, UI elements had more variations with each new feature shipped.

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.

• 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.

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.

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.