THREE DESIGN SYSTEM

Building an enterprise design system that transformed how Three designed, built and delivered digital products

Role

Senior UI designer (design systems)

Duration

7 years

Team

Cross-functional product team

Impact

Accessibility ↑
Delivery time ↓
Enterprise adoption

When I joined Three's Design Systems team, there was no unified design system. Products had evolved independently over many years, resulting in duplicated UI patterns, fragmented documentation and inconsistent accessibility across customer journeys.

Over the next seven years I helped establish and evolve the enterprise design system that became the foundation for Three's web and mobile products.

My work went far beyond designing components. I helped build the reusable framework that designers, engineers and content teams relied on every day — improving consistency, accelerating delivery and changing how digital products were designed across the organisation.

My responsibilities ranged from component design and accessibility through to implementation support, documentation, design operations, design system governance and ultimately the migration from Sketch to Figma.

My role

Senior UI Designer (Design Systems)

Working within a multidisciplinary team of designers, product managers and engineers, I was responsible for:

Designing reusable UI components and interaction patterns
Building and evolving scalable component libraries
Rationalising duplicated UI patterns into reusable systems
Defining accessibility standards (WCAG AA)
Creating and maintaining design system documentation
Supporting engineering teams throughout implementation
Driving adoption of the design system across multiple product teams
Mentoring designers and promoting component-first workflows
Supporting the evolution of the system through Three's digital rebrand

The challenge

Three's digital products had grown organically over many years.

Different teams had solved similar problems in different ways, creating duplicated components, inconsistent customer experiences and fragmented implementation across products.

The challenge wasn't simply to build a component library.

It was to establish a shared design language that designers and engineers could both trust, improving quality, accessibility and delivery while reducing duplication across the organisation.

Creating a scalable component system

Working initially in Sketch, I helped build a comprehensive component library organised around Atomic Design principles.

Every component was designed to:

communicate hierarchy clearly
meet WCAG AA accessibility standards
scale responsively across breakpoints
behave consistently across products
support efficient implementation by engineering teams

Rather than designing individual pages, we focused on creating robust building blocks that could be reused throughout the organisation.

As the system matured, we continually identified duplicated patterns across products, consolidating them into reusable components so teams solved problems once instead of repeatedly solving them independently.

That shift towards component-first thinking fundamentally changed how digital products were designed at Three.

Documentation that became part of the workflow

A design system only succeeds if people understand how to use it.

We initially documented the system within InVision before rebuilding and expanding everything into Zeroheight to form a living knowledge base.

Every component included guidance covering:

usage
behaviour
accessibility
responsive behaviour
motion
implementation guidance
engineering code references

Rather than repeatedly answering the same questions across different teams, documentation became the shared source of truth for designers, developers and content teams, making consistent implementation much easier across the organisation.

Supporting implementation

My involvement didn't end once components had been designed.

I worked closely with engineers throughout implementation to ensure components behaved as intended and maintained the quality established during design.

We regularly discussed accessibility, interaction behaviour, responsive edge cases and implementation constraints, helping reduce the gap between design intent and the final product.

During Three's migration from Fatwire to Adobe Experience Manager, the design system became instrumental in translating reusable components into the new CMS, enabling content teams to publish updates in hours rather than days.

Migrating the design system to Figma

In 2023 I helped lead the migration from Sketch to Figma.

Rather than simply moving files between tools, we used the migration as an opportunity to modernise the design system.

Using Variables, Design Tokens and advanced component architecture, I rebuilt libraries that:

automatically adapted across layouts
responded intelligently to light and dark surfaces
supported desktop and touch interactions
included interactive behaviours for rapid prototyping
were easier to maintain and scale as the system evolved

Alongside the technical migration, I mentored designers, product owners and content teams as they adopted new component-based workflows within Figma.

Outcomes

The design system became the foundation of Three's digital ecosystem.

Key outcomes included:

Accessibility scores improving from the high 70s into the low 90s using Google Lighthouse
Publishing times reduced from days to hours
Successful delivery of a major digital rebrand with significantly faster rollout
Consistent UI patterns across web and mobile products
Greater collaboration between design, engineering and content teams
Organisation-wide adoption of component-first design practices
Reduced duplication through reusable components and shared patterns
A trusted design system used daily across multiple product teams

Perhaps the biggest achievement wasn't the component library itself, but helping change how the organisation thought about designing digital products.

Over time, the focus shifted from creating individual pages to building reusable systems that improved consistency, quality and delivery across the business.

Looking ahead

A well-structured design system should do more than support today's design process—it should be ready for the next generation of digital product creation.

By the time I left Three, the design system had evolved into a mature collection of reusable components, design tokens, behavioural guidance and documentation that provided a strong foundation for AI-assisted design workflows.

During 2025–26 we began exploring how AI agents could use the design system to generate page layouts from natural language prompts. Because components were consistently defined, documented and governed, the system was already structured in a way that supported this emerging approach.

Those experiments reinforced an important principle: investing in a well-governed design system doesn't just improve consistency today—it creates the structured foundation that future AI-powered design tools will increasingly depend upon.

All images © Vodafone Three