Volkswagen Intertwined
A design system powering e-commerce for Volkswagen Group brands.
Year:
2022
Timeframe:
1.5 years
Tools:
Figma
Category:
Design Systems, UX/UI
Overview
Scaling E-commerce Across Volkswagen Group Brands
Volkswagen needed a design system that could power e-commerce platforms for multiple brands (VW, Audi, SEAT, Škoda, CUPRA) without forcing each one to start from scratch or lose their unique identity.
Problem
Each VW Group brand was building e-commerce experiences independently, duplicating effort on common patterns like product browsing, filtering, and checkout. This led to inconsistent quality, slow deployment, and wasted resources. The challenge was creating something flexible enough to respect each brand's visual identity while maintaining shared functionality and quality standards.
Solution
I designed a brand agnostic design system with reusable components and foundational patterns. The system established core UX standards and technical foundations using multibrand tokens, allowing each brand to apply their own visual language through controlled variables like colors, typography, and spacing. Teams could ship faster, maintain consistency within their brand, and benefit from shared improvements across the entire group.
Impact
Every Volkswagen Group brand adopted the system in some capacity. Teams shipped faster and significantly reduced time to market, staying ahead of the competition through quicker deployments. I designed over 30 components and patterns that powered most of each brand's e-commerce ecosystem. Quality improved through clear communication and thorough documentation, ensuring teams could implement consistently without constant designer involvement.
Role
Product Designer co-leading (1 of 2) design system architecture, token strategy, component design, and cross-brand stakeholder alignment.
Responsibilities
Token system design and architecture, Component library creation (30+ components), Brand stakeholder workshops and alignment, Developer collaboration and handoff, Design system documentation.
Collaborators
Brand Design Teams (VW, Audi, SEAT, Škoda, CUPRA), Frontend Developers, Product Managers, Brand Stakeholders.
Key Challenges
Building one system that flexes from 5 to 12+ colors per brand without breaking component logic or forcing brands into a one-size-fits-all structure. Managing expectations and navigating early brand push back due to fear of losing control of their identity.
Understanding Brand Constraints
Before designing anything, I needed to understand what each brand actually needed. I conducted stakeholder interviews with design leads across all five brands and audited existing implementations to identify patterns of duplication and opportunities for standardization.
Discovery 1: Color Complexity Varied Wildly
VW needed 5 simple colors. Audi required 10+ including gradients. SEAT had 8 with unique hierarchy. Any system had to accommodate this range without forcing brands into a rigid structure.
Discovery 2: Semantic Naming Created Confusion
What Audi called "accent" meant something completely different to VW or CUPRA. Semantic tokens that seemed logical in theory created conflicts in practice.
Discovery 3: Fragmented Development
Developers were rebuilding the same components for each brand with slight variations. A single button existed in five different implementations, requiring updates in five separate codebases. This created maintenance complexity and inconsistent quality across platforms.
How might we create a single design system that serves five brands with different color needs without forcing them into a one-size-fits-all structure?
This meant solving for:
Brands with 5 colors AND brands with 12+ colors
Simple hierarchies AND complex gradient systems
Brand autonomy AND shared component logic
Fast iteration AND long-term scalability
Finding the Right Approach
I explored multiple token naming strategies, prototyping each in Token Studio and presenting to brand teams. Each iteration taught us something new about what brands actually needed versus what seemed theoretically correct.
Results & Adoption
The White Label Design System proved that flexibility and consistency aren't mutually exclusive. By prioritizing brand autonomy within a shared technical foundation, we achieved 100% adoption across all five Volkswagen Group brands. Something that wouldn't have been possible with a more rigid approach.
Brand adoption rate
Components & Patterns
Colors supported per brand
