Central Design System
Expertise
Tokenisation
Governance & Ways of Working
Innovation & Strategy
Customer Journey Mapping
Development Pipeline Automation
Digital Integration
Data Lead
The Challenge
Merging Virgin Media and O2 required a combined design system, reducing design and technical debt, integrating WCAG 2.2 AA guidelines and streamling the handoff of designs to developers.
With over 10 separate design systems, both new and legacy, for Web, Apps, and Comms, across all brands, meaning maintenance of them all was not possible.
With no governance for adding new components to the ever-growing libraries our creative team of over 80 people worked in isolation. Adoption for design systems was low, especially as there was no clear single library to work from. The knock-on effect meant development teams would build the same component multiple times, adding to time and project cost.
Accessibility became reactive, not integral to the creative process, and teams did not leverage creative technology effectively.
The Process
We needed to introduce a new way of working where information was shared to prevent repeating work, where designs and components are aligned to ensure consistency across brands and to improve our efficiency.
By bringing the design leaders together I was able to setup a guild that acted as a conduit between the core design system team and the rest of the creatives.
We wanted to get feedback on both existing and new components/designs, to tell us what users liked, what they didn’t like, and how we could make improvements to create seamless, user-friendly, and enjoyable online experiences across all of our brands.
To achieve this, we introduced our Central Design System.
We were confident that a single Design System would have a positive impact on the business, although it did bring with it some risks. It was a considerable investment, and a new way of working that would mean engaging and bringing on board all designers, researchers and copywriters – around 100 people – which was no easy task!
The Solution
Governance for all
Our new Design Guild were made up of designers, copywriters and user researchers. They act as guardians of our components, reviewing and inputting the winning research results into the Design System.
With the creation of the design guild, a new simple governance process was agreed making it easier for creatives and product owners alike to understand the need for a central design system while enabling them to continue to design and build concept components at speed.
Data is King
We agreed that any new design components had to go through user testing before they became available for use in the CDS.
Data helped validate each component, either through user testing, A/B testing, or native site analytics, so the designs we create are truly customer centric – it also means we can be sure we’ve created components that are fit for purpose.
Also, to further fuel our obsession with data, we created an advanced Figma Analytics tool that allowed the guild to track our design system. We had visibility of key metrics such as adoption rate, detachments and pillar/squad engagement.
Work smarter
Working directly with Figma on their beta variables allowed us to build, test, and implement responsive components for our creatives to use in their designs.
In addition, we introduced a new method for our copywriters to work. We were able to leverage copy teams' requests for centralised copy blocks, allowing copywriters the ability to amend parent components such as legal and content that were reused hundreds of times across multiple designs.
Work also began to train our LLM in our brand-specific tone of voice with a view to create a tool that would work directly with our designs in Figma.
Digital handshake
Making the process of handoff from design to dev as seamless as possible was important, so switching to using a cloud-based token system allowed for any changes made in design to automatically flow through to a staging environment with ease.
As each component was tested and built consistently, with a single set of tokens, this meant design, development, and CMS libraries were all aligned.
The Result
Thanks to the CDS, we’ve been able to develop components that can be used across our 4 brands, adding fantastic flexibility when building for similar journeys.
The introduction of tokens & themes allows new campaign designs, such as black Friday or January sales, to be added and published in minutes.
Since 2023 we have ran over 400 A/B tests, with the central design system aiding in the increased output.
Adoption of a single design system has increased to over 85% across our 80+ creatives and beyond to our B2B teams and third party agencies.
All our components are designed and built to meet WCAG 2.2 AA standards.
Our teams continue to roll out the new central design system across Web, App and Comms as a truly omnichannel design library. Customer journeys align closer with one another than ever before.