Kingfisher 2018–2023 Design Systems Lead

Multi-Brand Design System

Building a unified design language that scales across multiple platforms, products, and international brands while preserving brand identity and accelerating delivery.

5
Brands Supported
60%
Faster Feature Delivery
200+
Components Built
The Kingfisher design system documentation site showing component library and token architecture
The unified component library serving B&Q, Castorama, and Screwfix
The Challenge

Fragmented experiences across a retail empire

Business Problem

Kingfisher operates multiple retail brands across Europe—B&Q in the UK, Castorama in France and Poland, and more. Each brand had evolved its own design patterns, component libraries, and ways of working. This fragmentation meant:

  • Duplicated effort across teams building similar components
  • Inconsistent customer experiences within the same brand
  • Slow time-to-market as teams rebuilt foundational elements
  • Difficulty sharing innovations across the group

User Problem

Customers encountered inconsistent interactions and visual language as they moved between touchpoints—website, app, in-store kiosks, and colleague tools. This inconsistency eroded trust and created friction:

  • Different button styles and interaction patterns across journeys
  • Accessibility varied wildly between products
  • Brand identity felt diluted and unprofessional
  • Learning curve for customers using multiple touchpoints
My Role

From vision to adoption

I led the design system initiative from strategic vision through to implementation and adoption. This wasn't just about building components—it was about changing how multiple teams across multiple countries approached design and development.

  • Strategy & Architecture

    Defined the token architecture, theming approach, and multi-brand strategy that would allow one system to serve distinct brand identities.

  • Component Design

    Designed core components with flexibility built in—ensuring they could adapt to different contexts while maintaining consistency.

  • Governance & Process

    Established contribution workflows, review processes, and documentation standards that enabled teams to extend the system.

  • Adoption & Advocacy

    Worked across teams and geographies to drive adoption, running workshops, creating migration guides, and building internal champions.

Process

Building for scale

Audit & Discovery

Before building anything new, we needed to understand what existed. I led a comprehensive audit across all brands and platforms, cataloguing patterns, identifying inconsistencies, and finding opportunities for consolidation.

A screen showing a representation of a UI audit, comparing all instances of a component
Audit Findings - Pattern inventory, inconsistency mapping, consolidation opportunities

Token Architecture

The foundation of a multi-brand system is its token architecture. We designed a two-tier token system: primitive tokens (raw values), and component tokens (specific applications). This was a reflection of the design system maturity of the organisation at the time.

A screen showing a representation of a UI audit, comparing all instances of a component
Token Structure - Two-tier architecture diagram, brand theming example

Component Library

With tokens in place, we built the component library. Each component was designed to be composable, accessible by default, and flexible enough to handle edge cases without breaking patterns.

A screen showing a representation of a UI audit, comparing all instances of a component
Token Structure - Two-tier architecture diagram, brand theming example

Governance & Documentation

A design system is only as good as its adoption. We created comprehensive documentation, contribution guidelines, and a governance model that balanced consistency with team autonomy.

A screen showing a representation of a UI audit, comparing all instances of a component
Token Structure - Two-tier architecture diagram, brand theming example
Outcomes

Measuring what matters

Design systems succeed when they deliver value to both the business and the end user. We tracked metrics across both dimensions.

Business Impact

  • 60% Faster feature delivery

    Teams spent less time on foundational work and more on product differentiation.

  • 3→1 Codebases consolidated

    Multiple brand-specific component libraries merged into one shared system.

  • 85% Adoption rate

    Within 18 months, 85% of active products were using the design system.

User Impact

  • AA+ Accessibility compliance

    All components met WCAG 2.1 AA standards, some exceeding to AAA.

  • 47→8 Button variants reduced

    Simplified interaction patterns meant faster user learning.

  • +12% Task completion

    Consistent patterns reduced cognitive load across journeys.

Reflections

What I learned

  • Systems are about people, not components

    The hardest part wasn't designing components—it was changing how teams worked. Success required as much change management as design work.

  • Perfect is the enemy of adoption

    We launched with 80% of what teams needed and iterated. Waiting for perfection would have meant waiting forever.

  • Governance enables, not restricts

    Good governance gives teams confidence to contribute. Bad governance makes them avoid the system entirely.