A federated design system that improved adoption, documentation and delivery across product teams.
Role
Design System Lead & UX Designer
Period
2021–2025
Scope
Strategy, governance and delivery
At a glance
A design-system transformation that improved consistency, accessibility and delivery across a large enterprise product portfolio.
Problem
Teams were creating their own patterns because the existing library was rigid, documentation was fragmented and contribution paths were unclear. This increased design debt, slowed delivery and weakened accessibility consistency.
My contribution
Owned the design-system direction, audited the existing foundation, prioritised releases, rebuilt tokens and components, established governance and documentation, and partnered with engineers and product teams to improve adoption.
What made it complex
90+ product teams with different product needs
Figma, Storybook and coded component alignment
Existing products could not pause for a full rebuild
Governance, contribution and versioning across global teams
Measurable outcomes
Outcomes at a glance.
The clearest customer, delivery and business outcomes from the work.
203%increase in adoption
310%growth in library size
98%reduction in backlog
80%faster turnaround
Challenge
Repair the foundation without disrupting live teams.
Rigid components, inconsistent documentation and a growing GitHub backlog were reducing trust in the system.
The work required technical collaboration, a clear contribution model and staged improvements rather than a disruptive rebuild.
Approach
Diagnose, prioritise and improve in manageable releases.
I reviewed the design and code architecture with developers, grouped issues, prioritised critical work and published improvements with testing and documentation.
Roadmap
Make progress and trade-offs visible.
A shared roadmap aligned teams on foundations, accessibility, mobility, micro-interactions, theming and future maturity.
Architecture
A three-tier token model for scale.
Primitive, alias and mapped tokens separated raw values from semantic and component decisions, supporting multi-brand products and themes.
Light-theme foundations and semantic token sets.Dark-theme foundations using the same token architecture.Responsive typography foundations for desktop and mobile.Accessible components, states and usage patterns.
Governance mattered as much as components. I introduced a federated contribution model and steering committee so product teams could help shape priorities, contribute safely and reduce the backlog together.
Design decisions and impact
From design decisions to delivered value.
These final sections make the collaboration, quality and outcome behind the screens easy to assess.
Working together
Product, engineering and business alignment
Worked with designers, front-end engineers, product leads and vendor teams through a federated contribution model. A steering group clarified decisions, release priorities and deprecation paths without blocking product delivery.
Accessibility and quality
Designed into the delivery
Embedded accessibility into component specifications, states and documentation. Contrast, focus, keyboard interaction, semantic intent and responsive behaviour were reviewed as part of definition and delivery rather than treated as a final audit.
Results
Outcome delivered
The system supported more than 90 product teams, grew adoption by 203%, improved delivery efficiency and reduced duplicated design and implementation work.
Reflection
What I’d explore next
The key learning was that adoption is an operating-model challenge, not only a component challenge. Future improvements would deepen usage analytics and connect contribution, release notes and migration guidance more closely.
