We inherited a component library and developed it into a design system. We connected the components with shared foundations, documentation, and support that teams could rely on as their products—and the organisation—changed.
As Product Owner, I lead the system’s ongoing development and maintenance. It is now used by more than 15 development teams. The transformation described here was a team effort: introducing design tokens, aligning Figma and code, improving adoption practices, and extending the system with tools for agent-assisted development.
The change, at a glance.
- Starting point: An inherited component library.
- Foundation: Design tokens as the source of truth for shared design decisions in Figma and code.
- Evidence: A later organisational rebrand required very little manual effort in the design system, compared with weeks of work in a previous similar initiative.
- Current direction: A dedicated CLI, skills, MCP integration, and page-section templates to support agent-assisted frontend implementation.
Start with the source of truth.
We introduced design tokens at the beginning of the transformation. They became the shared source of truth for design decisions and kept the foundations in Figma and code in sync.
That decision became particularly valuable during a larger organisational rebrand. In a previous similar situation, the work had taken weeks. With the token foundation in place, the design-system changes required very little manual effort.
The shared foundation gave us a single place to manage the rebrand across design and code.
Make the system easier to adopt—and to keep using.
Tokens addressed the technical foundation. Teams also needed to understand how to use the system, get support, and respond when it changed.
We streamlined documentation and onboarding, introduced office hours, and improved deprecation practices. This helped teams find the right components, understand how to use them, and plan for replacements.
As Product Owner, I use those team needs to prioritise the system’s development and maintenance.
Extend the foundation to agent-assisted development.
More recently, we added a dedicated command-line tool, a set of skills, an MCP integration, and base templates for different page sections. Together, these give frontend teams a foundation for using coding agents to do the initial implementation work within the design system.
This extends the same idea: make established decisions reusable. First, that meant connecting design and code. Now it also means making the system available to the tools teams use to build their products.
Frontend teams can use these tools to give their coding agents the shared foundations and templates for initial page implementation.
The wider responsibility.
Alongside the design-system role, I work as a UX Lead and Manager across technical, infrastructure, and e-commerce projects. That includes UX direction, resource planning, budgets, timelines, and collaboration across disciplines. I also contribute to standardised UX roles, career paths, and knowledge-sharing frameworks.
The connection is practical: helping one team solve a problem matters. Making the useful parts of that solution available to other teams is how the work scales.
Internal product screens and implementation details are not shown here. This case focuses on the shared foundations, the changes we made, and their role in supporting delivery.