Multi-brand Design System
Multi-brand Design System
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
My Role
My Role
Product Designer
Product Designer
Product Designer
The Team
The Team
Product Owner
Product Owner
Product Owner
Front-End Developers
Front-End Developers
Front-End Developers
Digital/Graphic Designers
Digital/Graphic Designers
Digital/Graphic Designers
Challenge
A small design & dev team supports 10+ e‑commerce brands, each with its own site. Managing UI divergence and brand customisation was getting harder and risked slowing delivery.
Impact
The design system implemented in both Figma and Storybook, significantly improved the design and development efficiency, reduced the time to market.
Challenge
A small design & dev team supports 10+ e‑commerce brands, each with its own site. Managing UI divergence and brand customisation was getting harder and risked slowing delivery.
Impact
The design system implemented in both Figma and Storybook, significantly improved the design and development efficiency, reduced the time to market.
Challenge
A small design & dev team supports 10+ e‑commerce brands, each with its own site. Managing UI divergence and brand customisation was getting harder and risked slowing delivery.
Impact
The design system implemented in both Figma and Storybook, significantly improved the design and development efficiency, reduced the time to market.
👉 How can we create a simple, flexible, and scalable multi-brand design system that serves both designers and developers?
👉 How can we create a simple, flexible, and scalable multi-brand design system that serves both designers and developers?
👉 How can we create a simple, flexible, and scalable multi-brand design system that serves both designers and developers?
Research & Design
Design System Review
I surveyed leading public systems (e.g., Uber Base Web, Shopify Polaris, Google Material). They’re comprehensive, but building that depth without a dedicated team would take too long. We needed a right‑sized approach that could evolve.
Research & Design
I always love creating things that genuinely make people's lives easier. After multiple rounds of discussion with the team, we finally agreed on the solution of creating a design system.
Leading Design System Review
I quickly started exploring top design systems from leading companies on Designsystemrepo.com, such as Base Web from Uber, Polaris from Shopify, and Material from Google. It turned out that these design systems were incredibly comprehensive. We wanted ours to be just as thorough, but without a dedicated team, it would take us forever to achieve that level of completeness.
Research & Design
Design System Review
I surveyed leading public systems (e.g., Uber Base Web, Shopify Polaris, Google Material). They’re comprehensive, but building that depth without a dedicated team would take too long. We needed a right‑sized approach that could evolve.
Methodology — Atomic Design
Adopted Brad Frost’s Atomic Design, starting small and evolving as product work progressed. This let us ship value early while building foundations for scale.
Methodology — Atomic Design
Adopted Brad Frost’s Atomic Design, starting small and evolving as product work progressed. This let us ship value early while building foundations for scale.
Methodology — Atomic Design
Adopted Brad Frost’s Atomic Design, starting small and evolving as product work progressed. This let us ship value early while building foundations for scale.
Start Small, Grow Deliberately
We began with a few buttons and inputs, then grew the library alongside live projects. When adding new components, I reused primitives wherever possible to keep maintenance low.
We began with a few buttons and inputs, then grew the library alongside live projects. When adding new components, I reused primitives wherever possible to keep maintenance low.
We began with a few buttons and inputs, then grew the library alongside live projects. When adding new components, I reused primitives wherever possible to keep maintenance low.
Not perfect but a good step forward
As the only designer, I had very limited time for system work because it wasn’t a top business priority. I built it incrementally alongside live projects.
As the only designer, I had very limited time for system work because it wasn’t a top business priority. I built it incrementally alongside live projects.
As the only designer, I had very limited time for system work because it wasn’t a top business priority. I built it incrementally alongside live projects.
For each component, I include all relevant information—such as size, state, and Storybook link—along with the required CSS tokens and CSS code for each states, making it easier for developers to reference.
For each component, I include all relevant information—such as size, state, and Storybook link—along with the required CSS tokens and CSS code for each states, making it easier for developers to reference.
For each component, I include all relevant information—such as size, state, and Storybook link—along with the required CSS tokens and CSS code for each states, making it easier for developers to reference.
Design Variables & Tokens
We needed multi‑brand flexibility without separate components per brand. Working with the FE lead, we moved to a design‑tokens strategy:
Global tokens (e.g., colour, spacing, radius, typography) drive brand‑agnostic foundations.
Component tokens alias the globals, so components remain one source of truth while still theming per brand.
Consistent token names across brands: Devs keep a per‑brand token CSS file, but all component tokens map back to the same global set.
Example: Global colour → Component colour mapping keeps consumption stable while brands evolve their palettes.
Design Variables & Tokens
We needed multi‑brand flexibility without separate components per brand. Working with the FE lead, we moved to a design‑tokens strategy:
Global tokens (e.g., colour, spacing, radius, typography) drive brand‑agnostic foundations.
Component tokens alias the globals, so components remain one source of truth while still theming per brand.
Consistent token names across brands: Devs keep a per‑brand token CSS file, but all component tokens map back to the same global set.
Example: Global colour → Component colour mapping keeps consumption stable while brands evolve their palettes.
Design Variables & Tokens
We needed multi‑brand flexibility without separate components per brand. Working with the FE lead, we moved to a design‑tokens strategy:
Global tokens (e.g., colour, spacing, radius, typography) drive brand‑agnostic foundations.
Component tokens alias the globals, so components remain one source of truth while still theming per brand.
Consistent token names across brands: Devs keep a per‑brand token CSS file, but all component tokens map back to the same global set.
Example: Global colour → Component colour mapping keeps consumption stable while brands evolve their palettes.
Global Colour to Component Colour
Practical Constraint → Workable Workaround
Constraint: Our Figma plan allows only 4 modes per file, which blocks a single “brand styleguide” file with all brand modes.
Practical Constraint → Workable Workaround
Constraint: Our Figma plan allows only 4 modes per file, which blocks a single “brand styleguide” file with all brand modes.
Practical Constraint → Workable Workaround
Constraint: Our Figma plan allows only 4 modes per file, which blocks a single “brand styleguide” file with all brand modes.
Work Around
Split tokens across multiple files using the same token names, all linked to a central styleguide. This supports up to 16 brands while keeping component definitions in one place.
Work Around
Split tokens across multiple files using the same token names, all linked to a central styleguide. This supports up to 16 brands while keeping component definitions in one place.
Work Around
Split tokens across multiple files using the same token names, all linked to a central styleguide. This supports up to 16 brands while keeping component definitions in one place.
Eg: Device & Brand Variables
Device variables help designers adapt components quickly for web/tablet/mobile.
Brand variables make it easy to preview and QA brand—specific behaviour without duplicating components.
Eg: Device & Brand Variables
Device variables help designers adapt components quickly for web/tablet/mobile.
Brand variables make it easy to preview and QA brand—specific behaviour without duplicating components.
Eg: Device & Brand Variables
Device variables help designers adapt components quickly for web/tablet/mobile.
Brand variables make it easy to preview and QA brand—specific behaviour without duplicating components.
Figma & Storybook Alignment
Figma & Storybook Alignment
We aligned Figma variables and Storybook tokens so designers and developers reference the same names and structure. This reduces QA back‑and‑forth and keeps UI updates predictable across brands.
We aligned Figma variables and Storybook tokens so designers and developers reference the same names and structure. This reduces QA back‑and‑forth and keeps UI updates predictable across brands.
Documentation (Lightweight)
Given limited capacity, I created a starter reference to onboard future designers:
Component overview & anatomy
Properties/variants
Examples
Do’s & don’ts
Documentation (Lightweight)
Given limited capacity, I created a starter reference to onboard future designers:
Component overview & anatomy
Properties/variants
Examples
Do’s & don’ts
Documentation (Lightweight)
Given limited capacity, I created a starter reference to onboard future designers:
Component overview & anatomy
Properties/variants
Examples
Do’s & don’ts
Outcome
With our Shoniverse Design System, our design and development time has been reduced by almost half.
We can now bring products to market faster, even with tight timeframes and limited resources, while also minimizing back-and-forth during QA.
Outcome
With our Shoniverse Design System, our design and development time has been reduced by almost half.
We can now bring products to market faster, even with tight timeframes and limited resources, while also minimizing back-and-forth during QA.
Outcome
With our Shoniverse Design System, our design and development time has been reduced by almost half.
We can now bring products to market faster, even with tight timeframes and limited resources, while also minimizing back-and-forth during QA.
What I’d Improve Next
Add linting/checks for Figma token drift vs Storybook.
Broaden documentation with usage guidance and migration playbooks.
Introduce usage analytics to see which components/tokens need investment.
What I’d Improve Next
Add linting/checks for Figma token drift vs Storybook.
Broaden documentation with usage guidance and migration playbooks.
Introduce usage analytics to see which components/tokens need investment.
What I’d Improve Next
Add linting/checks for Figma token drift vs Storybook.
Broaden documentation with usage guidance and migration playbooks.
Introduce usage analytics to see which components/tokens need investment.
Start From Small
The design system started very small, with only a few button and input components. As other projects progressed, the design system grew alongside them. However, I still try to reuse existing components as much as possible when building new ones to make maintenance easier.
Not perfect but a good step forward
As a sole designer on this company, I only have small amount of time to create the design system as it's not the business prioritisation.
Featured works
Featured works
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Multi-Brand Design System
Implementing a Design System for multiple e-commerce sites to ensure the scalability and consistency.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
Multi-Brand Design System
Implementing a Design System for multiple e-commerce sites to ensure the scalability and consistency.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
Multi-Brand Design System
Implementing a Design System for multiple e-commerce sites to ensure the scalability and consistency.
View Project
Multi-Brand Design System
Implementing a Design System for multiple e-commerce sites to ensure the scalability and consistency.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing