Sytner Group Design System

Overview

Client
Sytner Group

Deliverables
Multi-brand Design System

Tools
Figma

Introduction

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

Sytner Group, the UK's leading automotive retailer for luxury and performance vehicles, needed a cohesive design system to unify the digital experiences across its various brand portfolios. CarShop (a division of Sytner), while in the same industry has a very different identity and target customer. Each brand under the Sytner umbrella had distinct visual identities and user experience requirements, leading to inconsistencies and inefficiencies in their digital interfaces.

Objectives

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

The goal was to create a robust, flexible design system that could accommodate the unique characteristics of each brand while ensuring consistency and scalability across the group’s digital platforms.

Challenges

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

Multi-Brand Integration: Balancing the individual identities of numerous brands while ensuring a cohesive look and feel across all digital platforms.

‍Scalability: Creating a system that could be easily adapted to new brands and platforms as Sytner Group continues to expand.

‍Efficiency: Streamlining the design process to reduce time-to-market for new features and updates across different brands.

‍Consistency: Maintaining a consistent user experience across different brands without sacrificing the unique essence of each brand.

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

Defining the Core System

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

The first step was to define the core components of the design system that would be shared across all brands utlising an atomic design approach. This included:
‍

Typography: Establishing a flexible typographic scale that could be adjusted for different brand personalities while maintaining readability and accessibility.

Colour Palette: Creating a base colour palette with neutral tones that could be customised with brand-specific accent colours.

Grid System: Designing a responsive grid system that ensures consistency across devices and screen sizes.

UI Components: Starting from the atomic level, developing a library of reusable UI components (buttons, forms, navigation elements) that could be easily adapted to each brand’s style.

Brand Customisation

"From the profound to the mundane, design is the silent conductor in the orchestra of life."

- Dan Evans

After establishing the core system, I worked on customising it for both the Sytner and CarShop brands. This involved:

‍Colours: Applying brand-specific colours to the core components while ensuring contrast and accessibility standards were met.

Typography: Adjusting font styles and weights to align with each brand’s voice.

‍Components: Applying brand specific features such as corner and borders to each component.

Outcome

The multi-brand design system successfully unified the digital experiences across Sytner Group's portfolio, leading to several key benefits:

‍Consistency: The design system provided a consistent user experience across all brands, reinforcing Sytner Group's reputation for luxury and quality.

‍Efficiency: The reusable components and guidelines significantly reduced the time required to design and develop new features, allowing for quicker iterations and updates.

‍Scalability: The system was designed to easily accommodate new brands and platforms, ensuring that Sytner Group could continue to grow without sacrificing design quality or consistency.

‍Brand Integrity: Each brand retained its own unique identity within the design system.