The Problem Statement
Net-A-Porter and Mr Porter are consolidating onto a single application platform, requiring a multi-brand design system across all devices. Current design fragmentation and lack of unified design token management threaten brand consistency and development efficiency.
People Affected:
Customers: Risk inconsistent brand experiences.
Development Teams: Face increased complexity and time.
Design Teams: Struggle to maintain brand integrity.
Product & Marketing Teams: Risk diluted brand messaging and user experience.
Impact on the Organization:
Increased development costs and time.
Inconsistent user experiences.
Diluted brand identity.
Increased maintenance complexity.
Reduced development agility.
Potential usability issues.
Overview
I conducted a comprehensive discovery to create a better IA for the main navigation.
Outcomes
Refined taxonomy
Granular subjects improve search accuracy
Consistent terminology improves user clarity
Data-driven hierarcy
Building design system
Challenge 1
Net-A-Porter and Mr Porter, while sharing a unified platform, require distinct visual branding, primarily through color and typography. A simple shared token system proved inadequate due to component-level style variations (e.g., "Label 1" vs. "Label 2", differing header heights). This meant a basic token system could not guarantee correct brand representation within each component.
Solution:
To address this, "decision" or "semantic" tokens were introduced. These tokens are component-specific (e.g., --Accordion-title-font) and hold brand-specific values. For example, --Accordion-title-font uses "Label 1 bold caps" for Net-A-Porter and "Label 1" for Mr Porter. By building components using these decision tokens, the application accurately reflects the intended brand styling through precise theming. This ensures consistent and brand-appropriate visuals across the unified platform.
Challenge 2
The main navigation structures of Net-A-Porter and Mr Porter exhibited fundamental design differences, exceeding the scope of simple token adjustments. The development team struggled to find a viable solution for building these disparate designs within a single application.
Solution:
To overcome this, a component-level reconstruction was undertaken. Each header element and the overall header block were rebuilt. Within these components, additional layers were strategically added, each assigned brand-specific values. For instance, a layer at the bottom of the Net-A-Porter header was set to 0px height, while the corresponding layer in the Mr Porter header was set to 8px. This granular control, combined with carefully applied decision tokens, enabled the creation of accurate, brand-specific navigation designs within the unified application, surprising the development team with its effectiveness.
Impact:
Enabled the successful implementation of complex, brand-specific navigation designs within a single application.
Demonstrated a novel approach to component-level variation management.
Reduced perceived development limitations.
Maintained brand integrity within a unified platform.
Deliver
Following the successful resolution of complex challenges, including the implementation of decision tokens and innovative component reconstruction for the main navigation, a comprehensive multi-brand design system was created. This system encompassed:
Multi-Brand Design System: A robust system capable of supporting the distinct visual identities of Net-A-Porter and Mr Porter within a unified application.
3 Component Libraries: Development of three distinct component libraries, ensuring efficient and consistent design implementation.
Key Page Designs: Creation of detailed designs for critical pages, including product detail pages, product listing pages, my account, homepage, and returns pages, across desktop, tablet, mobile, iOS, and Android platforms.
Leadership and Team Management: Successfully led a team of 5 designers to complete the remaining page designs and support localization efforts across multiple languages.
