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 .

3D Render
3D Render
3D Render

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 .