Case study

  • Design systems
  • Multi-brand
  • Components
  • Governance
  • Accessibility

Virgin Media O2 Design System

Making a shared system easier to use, govern and build.

As Central Design System Lead, I set the structure, guidance and governance for O2, Virgin Media and VMO2. I worked across Design, Brand, Product and Engineering to clarify what belongs in the system and how teams should use it.

Role
Central Design System Lead
Scope
O2, Virgin Media and VMO2
Timeframe
6 months, AI work ongoing
Status
Architecture, Figma and specifications complete
Outcome
Audited 147 entries into a shared core for O2, Virgin Media and VMO2.
A tablet on a stone surface, showing a multi-brand design-system view with O2, Virgin Media and VMO2 colours.

01 The problem

A system that had outgrown its structure

The inherited library contained 147 entries, mixing core components, larger structures and patterns, with more solutions being created locally. Designers needed clearer routes through the system, while design and engineering needed a shared view of what existed, what could be reused and what needed rebuilding.

A dense, angled grid of inherited design-system component files, including buttons, inputs, navigation and other interface pieces.

02 The approach

Bringing order to the complexity

I led the audit and classification of the library, defined the shared architecture and set the documentation approach. Working with Design, Brand, Product and Engineering, I used reuse, live usage and engineering parity to guide what should be shared and what should stay local.

Step one

Audit

I mapped the library against live experiences and engineering parity to identify duplication, gaps and where design and build had diverged.

A laptop on a desk showing a component audit: 147 components in scope, with engineering match marked none, partial or full for Pagination, Product Carousel and Tabs v2.

Step two

Rationalise

I reclassified the estate into core components, larger structures and patterns, based on reuse, live usage and engineering needs.

Library structure
  • Core Components49
  • Layout & Structural Components13
  • Patterns10
  • Icons
  • Brand Assets

Step three

Rebuild

I defined a brand-agnostic core that adapts across O2, Virgin Media and VMO2 through tokens, working with Brand to preserve each brand’s expression.

A laptop on a desk showing one shared card in Figma, with four token modes: Auto (VMO2), O2, VMO2, VM Acquisition and VM Inlife.

Step four

Document

I set the documentation approach and worked with designers and Engineering to turn decisions into accessible guidance and Jira specifications.

A laptop on a desk showing card guidelines for usage, anatomy and accessibility, with a card split into visual, content and actions.

03 The system rules

Making the system usable at scale

The system needed clear rules for classifying components, preserving brand expression and carrying accessibility requirements into implementation. I set guidance to help designers and engineers make those decisions consistently.

Decision framework

Component decision rules

Each audited item was assessed against live usage, reuse and engineering parity to decide whether it belonged in core, structural, a shared pattern or a local solution.

Reuse, live usage and engineering parity are considered together to assess an item. The item is then classified as one of core, structural, shared pattern or local.

Inclusive by design

Accessibility and motion built in

WCAG AA is the baseline, with accessibility and motion requirements built into component rules and reviewed during implementation.

Accessibility and motion requirements are set as rules, WCAG AA and motion, then applied in implementation. Review is where those requirements are checked and corrected.

Keeping journey logic in patterns

I kept the reusable Card in Core and organised Product and Tariff cards as patterns. Each pattern combines shared components with the content, states and composition needed for its journey, allowing personalisation requirements to evolve without adding journey-specific rules to the core.

Aligning tokens with the rebrand

I imported the colour primitives and worked with Brand to agree how they mapped to tokens. I demonstrated the mapping in components and refined colours for button hover states and anchor links, giving interactive and static elements a clearer, consistent logic.

04 The outcome

One system, built to scale across three brands

The architecture, updated Figma components and Jira specifications are complete, with coded components and supporting Figma documentation now being brought into parity.

Clearer library structure

Components, structures and patterns have distinct roles, giving designers clearer boundaries when choosing, combining and maintaining the system’s reusable foundations.

Shared foundations across brands

A common component architecture uses tokens to express O2, Virgin Media and VMO2, keeping shared foundations separate from brand decisions.

Guidance for consistent decisions

Usage rules, accessibility guidance and Jira specifications make design intent explicit, supporting clearer conversations between designers, product partners and engineers.

05 See the system in action

See the system in action

Switch between Virgin Media and O2 to see how the same core components adapt.

Choose brand

  • Core component

    Button

  • Core component

    Anchor

  • Core component

    Breadcrumbs

  • Core component

    Filter Chip

  • Core component

    Countdown

  • Core component

    Status Banner

  • Core component

    Selectable Card

  • Core component

    Pagination Controls

  • Core component

    Stepper

The demonstration uses coded CDS core components based on the real system specifications. Brand-owned typefaces are replaced with close alternatives for the portfolio while still demonstrating how typography changes between themes.