CASE STUDY

2023

Neo Design System

Driving multiple Brands & development in sync

Design System
UX & UI
Corporate Identity

BMW
MINI
BMW Motorrad

Team Lead
Token Architect

Figma
Design Tokens

00 PROJECT

We overhauled and modernized BMW's e-commerce design and workflow

Made possible with a whitelabel multi-brand design system based on design tokens, focusing on creating a scalable and future-proof solution for the brand’s evolving needs.

01 PROBLEM

Maintaining design coherence, flexibility and speed while adjusting multiple e-commerce products for different brands in design and development

Design inconsistencies hurt brand trust and market performance. When products don’t adapt quickly enough to customer needs, they become outdated and lose ground to competitors. The result? Lost customers and revenue.

02 SOLUTION

Token based multi-brand white label design system

We introduced a token based multi-brand white label design system, designed for flexibility and scalability, to streamline the design and development processes and significantly speed up time to market while reducing cost and work overhead.

Imagine

Imagine you could switch themes or even full Brands by the click of a button. Thanks to design tokens this becomes reality – for design and development.

How design tokens work

Design tokens function as the foundational elements of a design system, representing a universal language that bridges the gap between designers and developers.

By centralizing fundamental values, design tokens streamline collaboration, simplify updates across the product, and offer adaptability for diverse themes or branding. This approach not only accelerates development but also ensures a cohesive and flexible design system that can evolve with the product’s needs.

From specific values to versatile components: Design tokens evolve from raw color values to global identifiers, then to contextual aliases, and finally to specific use-cases within UI components.

Atomic Design with Design Tokens: Building consistent, scalable UIs from basic elements (atoms) to complex components (organisms), all unified by standardized design values.

Example Component

Four contexts for various button types. Light, dark, on light image and on dark image. My team and I overhauled the existing interface components and added tokens for better control and easy handover to development.

Project Logo

To make internal project communication and promotion easier I decided to design a logo for the project.

03 CHALLENGES

Design System Architecture

Our design system architecture was carefully designed to scale effortlessly as new brands and products were added.

We wanted to ensure brand consistency across the many products while allowing each brand to express its unique identity, all within a cohesive and manageable system.

Scalable Token Structure

Another challenge was to create a token system that was scalable and in line with development and designers.

We created a token syntax and structure to allow for scale and flexibility for years to come while making sure that multiple brands, plattforms and products could fit into our system.

Stakeholder Approval

Securing the go-ahead from numerous stakeholders and product-owner was challenging, as the concept of design tokens is abstract and was rather new at that time.

The key was to demonstrate how this approach enhances design consistency and efficiency across different products and brands for design but also development.

04 EFFECT

Key Features

Streamlined exchange between design and development

Rapid and cost-effective product development

Future-proof design system architecture

Fast time-to-market

Coherent design decisions across products and brands

Versatile multi-plattform with easy scalability

05 CONCLUSION

Wrap up

The implementation of our white label multi-brand design system with tokens offers a strategic solution that enhances brand coherence, reduces production overhead, accelerates time-to-market, minimizes costs, and ensures market adaptability for new features, ultimately contributing to a streamlined user experience, competitiveness and overall efficiency of the brands involved – by creating a language to connect design and development for daily business and great visions.

As the team lead, design system & token architect and user interface designer, I am proud to have my team and me play a pivotal role in creating a solution that not only met our immediate needs but also enabled BMW for long-term success by creating a modern solution for complex problems.

Shout out to my amazing team

Let's get in touch

Need help bringing your vision to life? That’s exactly what I do. Let’s have a chat about your ideas.