Jenny Ho




Making property data approachable at Archipelago


Improving access to social services at Healthify


Personal projects

Healthify



Creating a design system from scratch
Design systems, process improvement



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 UI elements popped up.

The solution: We needed a design system with style guidelines, reusable Sketch assets, and code components. 

My role: I wrote a general style guide and created a library of standard UI components in Sketch. Then I collaborated with a team of 5 engineers to slowly implement the design system as we built new features.

Impact: Time spent on visual design went down by ~70%. We had style guidelines, a Sketch library with ready-to-use UI components, and an internal library of reusable code built in React. A week’s worth of work got condensed to a day or two.


What’s wrong with the UI?

I audited the UI to find out which styles, components, and layouts were in use. Screenshots and notes went into Airtable for easy organization.

Documenting which style guide components we had or needed.
Existing UI components.

Existing colors.
To no one’s surprise, we had many redundant UI elements and too many similar-but-not-the-same colors and fonts.


No need to be pixel perfect anymore. 

I created a reference file in Sketch. The process was basically:
  • Write out guidelines for typography, colors, and spacing.
  • Put together an icon library.
  • Design small components to combine into complex UI elements.
  • See where things broke, and then adjust rules and smaller components.

Components were in one massive Sketch file for easy copying and pasting.
A sample of guidelines and components.
The UI kit lived in Sketch and was shared with Product and Engineering via Zeplin. For new features, I would comment if something fits existing patterns or is a one-off.


The UI got more accessible.


An early accessibility problem I encountered was the brand orange. This very saturated mid-tone didn’t work well as a background color, but it was okay as a text color. It doesn’t help that orange is often used for warning states. 

As a temporary measure, I limited orange to the top navigation bar and made blue (our secondary brand color) the default for buttons.

When Healthify rebranded a year later, the new navy and light pink palette fixed readability issues. With the design system, we didn’t need a complicated plan to execute a rebrand. We just wrote a few user stories and made use colors were correct across the product.


The design system in action.

We gradually rolled out the design system one feature at a time, including referrals and admin tools. This way, we could support drastically different features and introduce new components as needed. 

Search for social services:

1. Search based on services and location.

2. See results and create referrals.

3. Expand for more details on a resource.

4. Empty state when there aren't any results.

Report and merge duplicate client profiles:

1. Choose the duplicate profiles.
2. Build the correct profile by dragging and dropping the right details.
3. Review the edits and add a note.
4. An admin can review the profile and decide to approve, fix, or deny.

Check client progress on their profile page:

1. Client profile page.

2. Expand to see demographic and health information.

3. Track client needs and goals.