Resume

Menu

Any Industry

Figma UI Design System

The goal was to create a comprehensive, well-documented design system to reduce design time and improve designer to developer handoff

Teal Flower
Teal Flower

Industry

Industry

Any Industry

Any Industry

Founded

Founded

2022

2022

Challenge

When I first joined Capsule Health as a Product Designer, the company was in the beginning stages of discussing a complete redesign of their HRA product. The UX department was still new. I was one of two people that made up the UX team. Every time I had to create designs for a user interface, all the UI elements would have to be created from scratch. 🫨

This was a time consuming task that resulted in high fidelity designs taking longer than needed to complete. With a refresh of the entire product interface starting, I knew the technology team would need a standardized design system to reduce completion times for high-fidelity mockups and make the handoff between UX and development more seamless.

Tasks

Research

I established a series of OKRs (Objectives and Key Results) to document the expectations for the design system and to track progress. These OKRs were published as a Confluence document and shared with the entire technology team.

OKR 1

Objective: Improve adoption and consistency of the design system

Key results: 

  • Conduct ad hoc design system reviews with front end developers

  • Use JIRA to track progress and efficiency of design tasks

OKR 2

Objective: Scale the design system across the entire tech team

Key results: Create design system components that cover most use cases and scenarios

OKR 3

Objective: Foster a culture of collaboration towards design system building

Key results: Have bi-weekly design reviews where updated progress on design system is shared with Product team

Results

The ROI (Return on Investment) for the design system was substantial. Design tasks covering large epics, started to be completed within just 2-3 sprints. Design tasks that would normally have taken 3-5 days started to be completed in 2 days or less.

The UX team of two went from completed an average of 5-7 design tasks per two week sprint to over 10 design tasks per sprint. Since we created templates inside the design system for common designs, quick high fidelity pages could be created for urgent tasks or brainstorming sessions. The level of meetings between UX and developers to review design specs, decreased.

UI Design across the entire platform became a lot more consistent and user friendly as a result. In user testing sessions, users would remark on how the platform felt less overwhelming and easier to navigate due to the consistency.

Learnings

Use two variable color collections (primitive & semantic): primitive colors such as “green/900” and another collection for semantic colors such as “background/success⁠”.

Avoid component specific variables ... at least at the start. It can cause unnecessary bloat in the design system to have variables for several different components. Keep it simple with global semantic variables such as “background/brand/default” 

Color scales usually come with 10-14 tints and shades. Far more than you need. Curve the ones that will be used most often.

Use scoping to make using the design system even easier to implement

  • Example: Only show border colors when applying a stroke

  • Example: Only showing background colors when making a frame 

18%

Reduce design time

Reduce design time

22%

Increased design output

Increased design output