2022 · Design System
Multi-product Design System
A component library serving five product lines, cutting page delivery from two weeks to three days.
Context
Five product lines each maintained their own UI kit. The same button appeared in four styles; the same error message in three wordings. Designers spent most of their time redrawing basics, and a new page took two weeks to ship.
What I did
- Audited and de-duplicated existing UI assets down to 48 base components and 12 page templates
- Built a token layer covering colour, spacing, radius, type and elevation, powering light and dark themes
- Agreed a component API with engineering so property names in the design file match props in code exactly
- Shipped a docs site with usage guidance, counter-examples and copy-paste code for every component
- Set up a contribution flow: any product line can propose a component, and reviewed additions land in the main branch
Outcome
Average page delivery dropped from two weeks to three days, and design-to-implementation rework fell by roughly 60%. Components cover about 85% of the company’s interface surface, and the system was extended to two new business lines in 2023.
Gallery
