Rebuilt the design system around QA failures and cut design-related QA cycles by 83%
The product had outgrown its components. I rebuilt a studio-made UI kit into a design system of 30+ components on semantic tokens, starting with the 12 patterns causing the most QA tickets, made it WCAG 2.2 compliant, and shipped dark mode as a first-class theme.
- My role
- Led the rebuild: audit, tokens, components, dark mode
- Team
- Designers, front-end engineers, QA
- Scope
- Components, tokens, accessibility, dark mode
- Platform
- Web and mobile web
Every release paid for the same inconsistencies
Inconsistent states, undocumented patterns and ad hoc colour decisions kept failing QA. Each feature release slowed down on bugs the team had already fixed somewhere else, and users saw the same component behave differently from page to page.
Prioritise by QA pain, not by what looks messy
I audited the full component library and ranked components by QA ticket volume. The 12 highest-friction patterns went first, then the rest of the 30+ components. I rebuilt them with semantic tokens, documented every state, and checked contrast against WCAG 2.2.
Dark mode wasn’t a skin. I designed the token architecture so light and dark are both first-class modes, which meant the whole product could switch without new QA work.
- Audited and ranked components by QA ticket volume
- Rebuilt 12 high-friction patterns with semantic tokens and documented states
- Designed a token architecture with light and dark as equal modes
- Paired with front-end engineers to check every component was easier to build than the one it replaced
Fewer defects, faster releases
Design-related engineering QA cycles dropped 83%. A whole category of recurring visual bugs disappeared, and dark mode shipped product-wide without extra QA overhead.
A design system earns its value when engineering ships faster with fewer defects, not when the Figma file looks organised.