Unified Multi-Brand Design System for Net-A-Porter & Mr Porter
A unified multi-brand design system was created for Net-A-Porter and Mr Porter, introducing component-specific decision tokens and strategic component reconstruction to ensure consistent visual identity, streamline development, and support five device platforms—while leading and mentoring a team of five designers to deliver at scale .
Challenge
Problem: Fragmented visual branding across two luxury brands.
Impact: Inconsistent typography and color usage led to risk of diluted brand identity and increased developer confusion
Problem: Divergent navigation designs for each brand exceeded simple styling overrides.
Impact: Development teams struggled to implement distinct headers within a unified codebase, slowing delivery and threatening UX consistency
Results
Brand Themes Supported: 2 (Net-A-Porter, Mr Porter)
Decision Tokens Introduced: Component-specific tokens (e.g.,
--Accordion-title-font
) ensuring correct theming across both brands .Component Libraries Created: 3 distinct libraries for streamlined implementation .
Key Page Templates Delivered: 7 (Homepage, Product Listing, Product Detail, My Account, Returns, Whishlist, Basket) across 5 platforms (Desktop, Tablet, Mobile Web, iOS, Android) .
Design Team Size: 5 designers (led by me), supporting global localization efforts .
Process
Audit & Strategy
Led stakeholder interviews and a comprehensive design inventory with my team of five to surface fragmentation across brands and platforms .
Token Strategy
Defined a hybrid token system—global tokens for core values and decision tokens for component-specific theming—to balance consistency with brand variation .
Component Reconstruction
Directed the rebuilding of header and navigation components, applying decision tokens at each layer to achieve precise theming .
Delivery & Leadership
Packaged a multi-brand design system, three component libraries, and five page templates; led and mentored five designers in crafting final assets and localization support .
Key UX Problems & Solutions
Problem: Inconsistent Brand Theming
Issue: Shared tokens couldn’t handle component-level style differences.
Solution: Introduced decision (semantic) tokens—e.g.,
--Accordion-title-font
with brand-specific font values—to enforce correct theming per component .
Problem: Divergent Navigation Layouts
Issue: Net-A-Porter and Mr Porter headers had fundamentally different structures.
Solution: Rebuilt header components with layered brand properties (e.g., 0px vs. 8px bottom padding) combined with decision tokens, guided by my team, to accurately render each brand’s nav .
Conclusion
This design system project demonstrates how semantic decision tokens and targeted component reconstruction can overcome multi-brand challenges. By leading five designers, I ensured the system preserved luxury brand identities, reduced development complexity, and delivered consistent experiences across five platforms—setting a scalable foundation for future features and localization needs .