Dulux.

Dulux.

Introduction

Introduction

In 2024, AkzoNobel (parent company of the Dulux brand) began an extensive UX strategy and then a supporting design system project, aiming to streamline the user journey's across multiple brand sites, and establish a scalable foundation for visual consistency across their digital ecosystem. Operating in 22 countries and 8 different customers markets, with 20 different languages, creating a single reusable framework was essential to improve the overall brand experience.

Year

2024

Industry

Paint and Coatings

Scope of work

/

Design System

/

Ecommerce

/

UI

/

UX

Services

/

Strategy

/

Audit

/

Component Creation

/

Design-to-code

Timeline

10 weeks

Introduction

In 2024, AkzoNobel (parent company of the Dulux brand) began an extensive UX strategy and then a supporting design system project, aiming to streamline the user journey's across multiple brand sites, and establish a scalable foundation for visual consistency across their digital ecosystem. Operating in 22 countries and 8 different customers markets, with 20 different languages, creating a single reusable framework was essential to improve the overall brand experience.

Year

2024

Industry

Paint and Coatings

Scope of work

/

Design System

/

Ecommerce

/

UI

/

UX

Services

/

Strategy

/

Audit

/

Component Creation

/

Design-to-code

Timeline

10 weeks

0

01

variables

0

01

variables

0

01

variables

0

02

components

0

02

components

0

02

components

0

03

brand themes

0

03

brand themes

0

03

brand themes

0

04

design system

0

04

design system

0

04

design system

Challenges

Challenges

The challenge was to create a consistent, frictionless, end-to-end experience across all Dulux brands, which operated with varying digital standards. We needed to understand and address the gaps in the existing digital experience as it related to the customer’s decorating journey. The aim was to identify precisely where the experience supported and, critically, where it failed to meet expectations.

Activities

Synthesised around 20 diverse research materials (including global data, user testing, and competitor analysis) into a single, holistic customer journey

We facilitated intensive, cross-regional workshops with a broad group of stakeholders

Developed a white-label Design System, ensuring visual consistency across all Dulux brands

Established a strategic foundation for future growth, moving beyond individual brand silos, and delivering significant cost efficiencies and future-proofing for global rollout (B2C/B2B).

brand-primary

dulux.invertible.primary.500

brand-primary

dulux.invertible.primary.500

brand-primary

dulux.invertible.primary.500

accent-primary

akzo.invertible.navy.500

accent-primary

akzo.invertible.navy.500

accent-primary

akzo.invertible.navy.500

campaign-active

colour.surface.notification

campaign-active

colour.surface.notification

campaign-active

colour.surface.notification

secondary-default

flourish.secondary.700

secondary-default

flourish.secondary.700

secondary-default

flourish.secondary.700

secondary-active

flourish.secondary.500

secondary-active

flourish.secondary.500

secondary-active

flourish.secondary.500

secondary-hover

.flourish.secondary.300

secondary-hover

.flourish.secondary.300

secondary-hover

.flourish.secondary.300

CTA system

CTA system

A dynamic CTA system was introduced through tokenisation that defined Primary, Secondary and Tertiary variants and interactives states, for clear navigation across components and pages.

primary-default

interactvie.primary.default

primary-default

interactvie.primary.default

primary-default

interactvie.primary.default

primary-hover

interactvie.primary.default

primary-hover

interactvie.primary.default

primary-hover

interactvie.primary.default

primary-focus

interactvie.primary.default

primary-focus

interactvie.primary.default

primary-focus

interactvie.primary.default

primary-disabled

interactvie.primary.default

primary-disabled

primary-disabled

secondary-default

interactvie.secondary.default

secondary-default

interactvie.secondary.default

secondary-default

interactvie.secondary.default

secondary-hover

interactvie.secondary.default

secondary-hover

interactvie.secondary.default

secondary-hover

interactvie.secondary.default

secondary-focus

interactvie.secondary.default

secondary-focus

interactvie.secondary.default

secondary-focus

interactvie.secondary.default

secondary-disabled

interactvie.secondary.disabled

secondary-disabled

interactvie.secondary.disabled

secondary-disabled

interactvie.secondary.disabled

tertiary-default

interactvie.tertiary.default

tertiary-default

interactvie.tertiary.default

tertiary-default

interactvie.tertiary.default

tertiary-hover

interactive.tertiary.hover

tertiary-hover

interactive.tertiary.hover

tertiary-hover

interactive.tertiary.hover

tertiary-focus

interactive.tertiary.focus

tertiary-focus

interactive.tertiary.focus

tertiary-focus

interactive.tertiary.focus

tertiary-disabled

interactive.tertiary.disabled

tertiary-disabled

interactive.tertiary.disabled

tertiary-disabled

interactive.tertiary.disabled

Brand modes and theming

Brand modes and theming

We created a new white label design system that included multiple themes for both B2C and B2B brands to create a seamless transiton of design through reusable core components.

(Drag left to right below to see the B2C -> B2B transition in the brand theming)

/ Homepage

/ PLP

Tokensiation in action

Tokensiation in action

Below shows how we used tokenisation to create reusable patterns across brands, by employing modes to load specific content and parameters.

How it came together

How it came together

We established a design foundation for future growth, moving beyond individual brand silos, and delivering significant cost efficiencies and future-proofing for global rollout (B2C/B2B).

Product design and development

Product design and development

A range of bespoke tools and apps were created using the design system, to help customers better organise and create home DIY projects, using Dulux key product lines.

The results

The results

Project Overview

Scope

Scope

Scope

/

/

/

Design System

Design System

Design System

/

/

/

Ecommerce

Ecommerce

Ecommerce

/

/

/

UI

UI

UI

/

/

/

UX

UX

UX

Services

Services

Services

/

/

/

Strategy

Strategy

Strategy

/

/

/

Audit

Audit

Audit

/

/

/

Component Creation

Component Creation

Component Creation

/

/

/

Design-to-code

Design-to-code

Design-to-code

Transforming the Dulux​ digital experience​

2024

The Design System:

0
0
0

variables

0
0
0

components

0
0
0

brand themes

“Working with the new design system has made my design workflow so much easier and quicker. Thank you.”

Katya Domenik

Senior Staff Designer

0%
0%
0%

+24%

+24%

Faster development time for new digital features

Faster development time for new digital features

*Calculations are based on 1 month of stress testing production on time-recorded tasks

0%
0%
0%

+40%

+40%

WCAG 2.2 AA compliance across all platforms

Color

+4%

Color

+4%

Color

+4%

Images

+8%

Images

+8%

Images

+8%

Controls

+5%

Controls

+5%

Controls

+5%

Keyboard

+9%

Keyboard

+9%

Keyboard

+9%

Global code

+14%

Global code

+14%

Global code

+14%

a11y compliance

+40%

a11y compliance

+40%

a11y compliance

+40%

Final thoughts

Final thoughts

The strategic design work undertaken in the project reshaped Dulux's digital footprint, creating a seamless, cohesive ecosystem.The organisation now has a single source of truth for global teams and suppliers to use as a reference and resource.

Key achievements:

––

Unified brand experience across the whole Dulux and AkzoNobel ecosystem

––

Streamlined design-to-development workflow

––

Improved accessibility and performance metrics

––

Reduced maintenance overhead and technical debt

––

Scalable foundation for future digital growth

blairjarvis.

studio

Have a project in mind?

By submitting, you agree to our Terms and Privacy Policy.

© 2025 blairjarvis.studio

Let’s talk.

Tell me about your project—whether it’s a design system, website, or branding.

Quick response.

If you’re ready to create and collaborate, I’d love to hear from you.

Clear next steps.

After the consultation, I’ll provide you with a detailed plan and timeline.

Design Director

at blairjarvis. Studio

Blair Jarvis

blairjarvis.

studio

Have a project in mind?

By submitting, you agree to our Terms and Privacy Policy.

Let’s talk.

Tell me about your project—whether it’s a design system, website, or branding.

Quick response.

If you’re ready to create and collaborate, I’d love to hear from you.

Clear next steps.

After the consultation, I’ll provide you with a detailed plan and timeline.

Design Director

at blairjarvis. Studio

Blair Jarvis

blairjarvis.

studio

Have a project in mind?

By submitting, you agree to our Terms and Privacy Policy.

© 2025 blairjarvis.studio

Let’s talk.

Tell me about your project—whether it’s a design system, website, or branding.

Quick response.

If you’re ready to create and collaborate, I’d love to hear from you.

Clear next steps.

After the consultation, I’ll provide you with a detailed plan and timeline.

Design Director

at blairjarvis. Studio

Blair Jarvis