AZEEZ ADEBAYO
0%
CONTEXT
Haleon spun out of GSK in 2022 with a digital estate that had never been designed as a single entity. Sensodyne had its own components, its own toolkit, its own team. So did Panadol. So did Centrum. Fifteen brands, 170 markets, no shared foundation.
It showed.
It showed.
CHALLENGE
The ask wasn't a visual refresh. Haleon needed a design system that could hold fifteen brands without homogenising them — one where Sensodyne still felt clinical and precise, Centrum still felt warm and approachable, but both were built from the same components, the same tokens, and the same accessibility baseline.
The hard part wasn't building the system. It was convincing fifteen brand teams that sharing infrastructure didn't mean losing identity.
The hard part wasn't building the system. It was convincing fifteen brand teams that sharing infrastructure didn't mean losing identity.
GOAL
Three targets, written down from week one:
* Unify visual and interaction language across all 15 brands and 170 markets
* Eliminate the duplication that was costing design and engineering teams weeks per project
* Cut time-to-launch for a new brand site — at the time, that clock sat at 24 months
* Unify visual and interaction language across all 15 brands and 170 markets
* Eliminate the duplication that was costing design and engineering teams weeks per project
* Cut time-to-launch for a new brand site — at the time, that clock sat at 24 months
APPROACH
Four decisions shaped everything:
Atomic structure. Every brand is composed of the same primitives. No brand-specific clones that drift and eventually contradict each other.
Tokens as the brand layer. Colour, type, spacing, motion — all driven by tokens. A brand switches values; the system stays intact. This meant brand customisation was a configuration problem, not a rebuild.
One source of truth, from day one. Figma and code ran in parallel, not in sequence. Documentation was written for designers and developers simultaneously – because a design system that only speaks one language doesn't survive contact with engineering.
Governance built in, not bolted on. Contribution rules, version control, and a clear review path — written before we needed them. At 170 markets and dozens of stakeholders, the alternative was entropy.
Atomic structure. Every brand is composed of the same primitives. No brand-specific clones that drift and eventually contradict each other.
Tokens as the brand layer. Colour, type, spacing, motion — all driven by tokens. A brand switches values; the system stays intact. This meant brand customisation was a configuration problem, not a rebuild.
One source of truth, from day one. Figma and code ran in parallel, not in sequence. Documentation was written for designers and developers simultaneously – because a design system that only speaks one language doesn't survive contact with engineering.
Governance built in, not bolted on. Contribution rules, version control, and a clear review path — written before we needed them. At 170 markets and dozens of stakeholders, the alternative was entropy.
Leading the Team
I led 10 designers and 6 engineers across two time zones. The team ranged from senior to early-career, and the system was complex enough that unclear ownership would have killed velocity within weeks.
Three things kept it moving:
Named owners, not shared responsibility. Every component, token group, and documentation page had one person accountable for it. Reviews stayed collaborative; decisions didn't.
Critique against the brief, not preference. Every crit opened with the problem statement and the constraints we were working inside. It kept feedback grounded and gave junior designers the confidence to push back when something wasn't meeting the brief — not just when something looked off.
Design and engineering paired from week one. No handoffs. Both disciplines had skin in the game before anything reached production. The surprises you avoid that way are worth the coordination overhead.
Junior designers owned components end-to-end. I wasn't approving every decision — I was the first call when something was stuck.
Three things kept it moving:
Named owners, not shared responsibility. Every component, token group, and documentation page had one person accountable for it. Reviews stayed collaborative; decisions didn't.
Critique against the brief, not preference. Every crit opened with the problem statement and the constraints we were working inside. It kept feedback grounded and gave junior designers the confidence to push back when something wasn't meeting the brief — not just when something looked off.
Design and engineering paired from week one. No handoffs. Both disciplines had skin in the game before anything reached production. The surprises you avoid that way are worth the coordination overhead.
Junior designers owned components end-to-end. I wasn't approving every decision — I was the first call when something was stuck.
Managing the Client
A project at Haleon's scale doesn't have one stakeholder. It has dozens, each with a different definition of done, a different risk tolerance, and a different reporting line. I treated expectation management as a design problem: something to be structured, not improvised.
In week two, I co-wrote a one-pager with the client defining what we were building, what we weren't, and how we'd know when it was done. That document got referenced more than any delivery we shipped. It ended arguments before they started.
After that: a standing Friday review, same format every week. What shipped. What's in flight. What's blocked. What needs a decision from them. Predictability mattered more than the updates themselves — it changed the dynamic from vendor to partner somewhere around week six.
When milestones slipped, I said so three weeks out. Not to manage blame — to give the client time to make decisions. That approach recovered one significant scope change that would otherwise have derailed the timeline.
In week two, I co-wrote a one-pager with the client defining what we were building, what we weren't, and how we'd know when it was done. That document got referenced more than any delivery we shipped. It ended arguments before they started.
After that: a standing Friday review, same format every week. What shipped. What's in flight. What's blocked. What needs a decision from them. Predictability mattered more than the updates themselves — it changed the dynamic from vendor to partner somewhere around week six.
When milestones slipped, I said so three weeks out. Not to manage blame — to give the client time to make decisions. That approach recovered one significant scope change that would otherwise have derailed the timeline.
Defining best in class
Early in the project, I ran a working session with the team and key client stakeholders to define what "best in class" actually meant for Haleon — not as a principle, but as a filter we could apply to every component review.
We landed on five criteria. If something failed any of them, it didn't ship:
1. Accessible by default. WCAG 2.2 AA wasn't a checklist at the end — it was a constraint from the start. Retrofitting accessibility into components is how you end up with fifty edge cases and six months of remediation.
2. Brand-flexible, not brand-neutral. Every component had to feel native in Sensodyne's world and Centrum's world. Not like a compromise that neither team was happy with.
3. Performance-budgeted. Every pattern had a file weight limit and a motion overhead limit. Visual richness couldn't come at the cost of Core Web Vitals — especially in markets with constrained connectivity.
4. Globally legible. Tested in English, Arabic (RTL), and CJK before a pattern was signed off. If the layout broke in any of them, it wasn't done.
5. Documentation that didn't need a Slack message to make sense. If someone had to ask what a component was for, the docs had failed.
These five became the answer to almost every off-brief exception request. It's easier to say no to a short-term fix when everyone agrees in advance on what the standard is.
We landed on five criteria. If something failed any of them, it didn't ship:
1. Accessible by default. WCAG 2.2 AA wasn't a checklist at the end — it was a constraint from the start. Retrofitting accessibility into components is how you end up with fifty edge cases and six months of remediation.
2. Brand-flexible, not brand-neutral. Every component had to feel native in Sensodyne's world and Centrum's world. Not like a compromise that neither team was happy with.
3. Performance-budgeted. Every pattern had a file weight limit and a motion overhead limit. Visual richness couldn't come at the cost of Core Web Vitals — especially in markets with constrained connectivity.
4. Globally legible. Tested in English, Arabic (RTL), and CJK before a pattern was signed off. If the layout broke in any of them, it wasn't done.
5. Documentation that didn't need a Slack message to make sense. If someone had to ask what a component was for, the docs had failed.
These five became the answer to almost every off-brief exception request. It's easier to say no to a short-term fix when everyone agrees in advance on what the standard is.
Solution & OUTCOME
(WHAT WE BUILT)
The system gave every brand team a shared starting point — one they could configure without touching component code.
* A token-driven theming layer: new market sites launched with configuration, not custom builds
* 80+ components covering navigation, product detail, claims, regulatory disclosures, and forms
* Accessibility and editorial standards built into components — not added as a post-launch audit
* A governance model that defined who proposes changes, who approves them, and how the system evolves without us in the room
* A token-driven theming layer: new market sites launched with configuration, not custom builds
* 80+ components covering navigation, product detail, claims, regulatory disclosures, and forms
* Accessibility and editorial standards built into components — not added as a post-launch audit
* A governance model that defined who proposes changes, who approves them, and how the system evolves without us in the room
(OUTCOME)
Time to launch a new brand site dropped from 24 months to 10 weeks.
Within the first year, the system was adopted across 12 brands and 170 markets. Design and engineering duplication fell by an estimated 60%.
It was the first shared design language Haleon had built since becoming an independent company. That sounds like a milestone. What it actually meant was that a market team in Malaysia and a brand team in the UK were building from the same file, with the same constraints, for the first time. That's what the system was really for.
Within the first year, the system was adopted across 12 brands and 170 markets. Design and engineering duplication fell by an estimated 60%.
It was the first shared design language Haleon had built since becoming an independent company. That sounds like a milestone. What it actually meant was that a market team in Malaysia and a brand team in the UK were building from the same file, with the same constraints, for the first time. That's what the system was really for.
LET'S TALK
LONDON, UNITED KINGDOM