Project Overview
Nationwide needed its first fully adopted design system to bring consistency, scalability and efficiency to its digital products. My role was to help establish and scale that system, guiding its creation and help its long-term adoption.
My Role
As Lead Designer, I began with an initial six-month engagement and continued as an advocate of the system as it evolved across products and brands. I worked closely with React developers to build and refine components, shaped the visual direction, audited existing design patterns and helped define governance. Later, I focused on embedding the system within the mortgages department and supporting adoption across the sister brand, The Mortgage Works.
The Challenge
Nationwide had no shared design system. Teams had built their own UI libraries, which led to inconsistent experiences and duplicated effort. We set out to create a scalable, token-based system that could be adopted across the organisation.
Although early progress was promising, code audits revealed that some components had been built using inline styles rather than the defined design tokens. This broke reusability and introduced significant rework. We also found that basic design principles, such as when to use a button versus a link, were unclear across teams. These elements looked similar but needed to behave differently depending on context. The system had to address these misunderstandings and close the gap between design and development.
Key Constraints
- Legacy code and inline styles made early implementation difficult to maintain
- Teams were reluctant to move away from their own UI libraries
- Components sometimes had too many React props, which confused developers and led to missed variations
- Design and development often interpreted components differently, so consistency was essential
- Governance needed to be defined and tested
- Teams had varying levels of design understanding and literacy
Our Response
We built the system around design tokens, supporting consistent theming and brand alignment. Components were simplified by reducing unnecessary props and establishing sensible defaults. Ambiguous patterns, such as unnecessary input warnings, were removed to improve clarity.
I worked with accessibility and brand teams to ensure the system was inclusive. Documentation and naming conventions were improved to better reflect how components functioned in code. We also created interactive prototypes using real brand visuals to help stakeholders understand how the system would feel in practice. These were used in user testing and received strong feedback from both customers and colleagues.
We transitioned from static Sketch libraries to a living design site, increasing access and visibility across the business. A flexible governance model allowed teams to create their own layouts using approved components, encouraging ownership while maintaining consistency. The system was put into practice through the launch of a new mortgage calculator, which became a benchmark for future projects. The feedback from developers and designers was overwhelmingly positive.
Outcomes
We tracked adoption rates across teams and brands, monitored code quality and measured delivery speed and satisfaction levels. The design system improved consistency across user journeys, reduced delivery time and made handovers between design and development more seamless. Teams were more aligned, and advocates for the system emerged across departments.
The project also raised the quality of discussions around usability, accessibility and content design. It shifted the role of design from focusing purely on visuals to driving strategic outcomes. Designers were able to step back from just creating screens and contribute more directly to solving product challenges.
White Labelling and Brand Alignment
To support cross-brand theming, we explored the use of Figma Tokens and JSON which at the time wasn’t easy. This helped process established technical consistency but exposed misalignments between brand identities. Working with tokens revealed discrepancies in areas such as colour usage and font attributes, allowing us to address and align them across brands so tokens variable would align.
Reflection
This project reinforced that a design system is much more than a collection of components. It is about culture, clarity and collaboration. Success came from designing not only for the end user but for the builders themselves the designers, developers and product teams who bring digital experiences to life.
Helping to establish this system was a fascinating experience. My technical understanding of front-end code gave me a valuable advantage in bridging the gap between design and development. One of the most rewarding challenges was explaining and selling the system to non-designers. Visual storytelling and small human touches made it more approachable and built trust across teams.
Most importantly, this experience proved that a design system is not a one-off deliverable. It is a living product. Without care and clarity, it can quickly unravel. But when nurtured, it becomes a powerful foundation for collaboration, creativity and product quality at scale.