For this project, I had to retroactively develop and improve upon an existing design system. The previous design team had screens for the Customer Dashboard as well as the Getting Started onboarding experience. I improved these workflows by creating a Figma library showcasing the styles and components. This proved to be a challenging yet rewarding process—as I had to maintain continuity for the system already in place, all the while making the design system my own by injecting my own professional input.
ROLE:
Figma Library, Style Guide
CREDITS:
Istmet Trako, Chelsea Zhou, Emily Kolodny
The Problem
The designer who worked on the Onboarding screens already took steps to ensure they were using systems to create the designs. Counter to this, the designer who worked on the Customer Dashboard screens created the UIs without any system. My goal was to merge both designs together into a thoughtful and workable system that can grow with time.
The RESULT
There were many missing font styles, layer styles, and components that needed to be distilled into a single source of truth. The final library I developed is the most comprehensive system I have done to date and I was thrilled to see an organized, and thoughtful system ready to use for years to come.
Accessibility
Another problem faced during this project was that most components did not pass basic Accessibility Testing. My intent was to check the designs with some contrast checker Figma plugin as you see here.
Workflow
This is a demonstration of how the library can speed up a designer's workflow.
