Unilever White Label Design System

Background and context

Unilever operates a global digital ecosystem reaching 2.5 billion consumers daily. To standardise the web estate, the organisation implemented a highly customised instance of Adobe Experience Manager (AEM), featuring shared components and governance.

A key element of the implementation was The White Label: an in-house, politically neutral reference brand used to pilot capabilities and recruit brands onto the system. I was hired as sole Design Lead within the Experience Squad to take ownership of this design system layer.

The problem

In the context of the project’s scale, the existing component library lacked structural integrity, creating significant ambiguity for brand teams:

• Lack of foundations: 400+ components existed across three breakpoints with no master stylesheet, reusable text styles, or coherent grid logic.
• Implementation issues: Without an authoritative source of truth, discrepancies between design and built product were commonplace.
• Opaque Documentation: Presentations of modules and components were often ad-hoc, utilising static exports that failed to convey logic or AEM constraints.

Approach

I reorganised the design layer into a governed platform system built around compositional logic rather than page-level thinking.

Using Atomic Design principles, the library was formalised into atoms, molecules, organisms and modular page assemblies. This replaced fragmented layouts with structured building blocks and ensured that visual and behavioural changes cascaded predictably across implementations.

Workflow alignment was equally important. Static exports were replaced with an inspection workflow using Zeplin that allowed offshore developers to extract CSS values, assets and grid specifications directly from source files. This reduced translation errors and shortened feedback loops between design and engineering.

Additionally, I also explored Git-based version control for the Sketch library via BitBucket in an attempt to introduce development-style discipline into the design workflow. Although this wasn’t ultimately workable due to the limitations of binary design files, it clarified the need for stronger structural governance and version clarity within the design system.

Alongside structural changes, I owned the validation loop between brand ambition and AEM capability. Proposed components were tested against real brand use cases and technical constraints before being promoted into the shared library. Testing was a mixture of ad-hoc and more formalised environments which I wrote user testing scripts for.

Documentation was expanded to describe configuration logic and functional boundaries, giving brands and partner agencies a clear reference point for the ‘catalogue’ of modules.

Outcome

The White Label evolved from a reference implementation into an enforceable delivery standard for Adobe Classic.

Although granular analytics were not instrumented at the platform level, the operational shift was visible. Developers moved from repeated clarification cycles to assembling pages from a stable, documented component set. Global brands, including Dove and more than fifteen additional launches, adopted White Label patterns as a foundation for their own AEM components.

By centralising component logic, the cost of global updates, including accessibility and UX improvements, shifted from page-level rework to component-level revision. The system reduced ambiguity, improved consistency and created a scalable foundation for ongoing digital growth.