0 to 1 Design System Overhaul
Redesigned the design system for scalability and consistency, streamlining collaboration and accelerating feature delivery. Improved user experience and reduced design debt, driving faster iterations and stronger business results
The Introduction
Building Structure and Scale in a Engineering-Led Startup
Joining the startup as a product designer, I faced the challenge of working without existing design documentation or handoff processes. The design system required a complete overhaul to ensure long-term scalability and visual consistency across products
Problems to Solve
Zero Documentaion
Inherited a disorganized design file with no variants or documentation, leading to confusion and misalignment with engineering
Visual Disarray
External website looks drastically different from the actual product
Lack of crucial components
Lacked form field libraries that support our core product: sending mass targeted campaigns
Problem Statement # 1
Zero Documentaion
There was a poorly constructed design library, it did not utilize component & instance properties. For example, button hover state as set up as a completely different separate individual component, when it should have been a instance variant.
Additionally, everything component was put on one single layer with zero documentation of usage and variation.
Solution to # 1
Zero Documentaion
Utilize Existing Resource
Utilizing the open access Google Material Library, i was able to use that as a starting point.
Take the buttons design as an example, I separate each category onto it's own page, and further separate within the button category, such as icon buttons or segmented buttons
-------------------------- NEW DESIGN -------------------------
Simplify Simplify Simplify
Previously, both typography and color library were reaching 30+ variations. Not only was this unnecessary, it also create a lot of UX debt as it was difficult for developers to follow, as a result, the product looked very much in disarray.
I distilled our typography and color library for easy cohesion and usage.
-------------------------- NEW DESIGN -------------------------
Problem Statement # 2
Visual Disarray
Not only were there visual inconsistency across the internal product, there is also a drastic different look between external website as well. Making it look like it is own by two different company
Solution to # 2
Visual Disarray
Applicable Usage
Using the new library i put together, the team was able to design pages that look cohesive and consistent with our branding.
The engineering team's feedback on the library was overwhelming positive as it drastically simplify the amount of variants.
-------------------------- NEW DESIGN -------------------------
Cohesion Across Channels
I also created a simple brand guide for our marketing team, so our external assets could be cohesive.
Also I took on the task on re-resigning our .com website, Not only improving on accessibility, but simplified site map and content
-------------------------- NEW DESIGN -------------------------
BEFORE
AFTER
Problem Statement # 3
Lack of crucial components
Being able to send mass targeted campaign is a key core product, it relies heavily on a well designed form fields to deliver correct and cohesive message.
Yet, there was not a form field library...
-------------------------- OLD DESIGN -------------------------
Solution to # 3
Lack of crucial components
Customized Design
Google Material Library came with very basic form fields, it was not comprehensive enough to support our campaign creation flows, so I customized design a text field library that include tooltips, guide text, mandatory asterisks.
-------------------------- NEW DESIGN -------------------------
Dropdown Menu
I designed a dropdown menu that supported multiple/ single choice for including/ excluding segments. Additional action include CTA that link out to let user create new segment.
This was a crucial component because it consolidated a page, that had each segments as individual selectable chips.
-------------------------- OLD DESIGN -------------------------
-------------------------- NEW DESIGN -------------------------
Scalable library
Not only is this library able to support the core product flow. It also was applicable to various other aspect of the system, such as the settings page.
-------------------------- SETTINGS PAGE -------------------------
