Resume
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
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%
22%