Creating a Multi-Brand Design System

Overview

iTech is a global digital marketing services company with a focus on digital media, online communities and comparison products. iTech develops flagship brands and optimise platforms to engage, inform and entertain global audiences across iGaming, Sports Betting and Personal Finance.

In order to stop duplication of effort amongst teams and provide a framework to enter markets with new products faster, I’ve led the creation of a centralised Multi-Brand Design System.

My role

I’ve led a small design team of 2 Senior Product Designers to research, define and design a Multi-Brand Design system.

Business problem

iTech has a vast portfolio of products with similar purpose and value proposition. Dealing with each product in isolation requires a lot of resources. Designers had to create a design system and templates for each product which had to be developed and maintained. This lead to: - Duplication of work with designers and engineers reinventing the wheel each time - Entering a market with a new product was incredibly slow.

Buy in

To ensure the success of this project, it was important to get stakeholders on board before we start building our design system. We promoted the initiative via:

• A presentation where we shared the current problem and the anticipated benefits of the centralised Design System.

• Involving engineering into the conversation early on to collect their input.

By getting other teams involved from the onset and as the project evolved, we strived to promote understanding of the project and inspire a sense of co-ownership throughout the entire process.

The process

• Research

• Define

• Design

Research

I researched popular Design Systems and analysed their foundations, guidelines and components.

Key findings

• Heavy focus on foundations and tokens

• Extensive documentation and clear guidelines

• Prioritising accessibility and user adaptive interfaces

• Flexibility

• Rational. Based on real-world situations. Every component, pattern, and principle is informed by research and thoughtful testing.

  
  

Design Tokens

To streamline the work of building and maintaining the design system while ensuring consistency and ensure scalability, I’ve defined a set of robust and engineering focused tokens for Typography, Colour, Sizing, Elevation, Borders, Media Queries, Containers, Ratios and Motion.

Semantic tokens

In order to offer brand theming and optimise the launch of new sites, we’ve introduced a set of semantic tokens. Semantic tokens relate to a specific context or abstraction and they help to codify our design decisions and communicate the intended purpose of a token. Any designer on the project will also know what value to use where ensuring speed and consistency.

Brand Theming

By using semantic tokens and simply overriding their values, we can offer brand theming while maintaining consistency across our components and facilitating global styling changes.

File Structure

To achieve the brand theming we’ve separated our tokens from our components into separate files and utilised Figma’s Swap Library functionality to replace the tokens.

Color theming

Each brand can also support colour theming like dark and light by simply creating additional token files for that specific theme.

Atomic Design

We wanted to create our design system in a more deliberate and hierarchical manner, so we adopted our adaptation of Atomic Design which is a way to develop a modular system.

Variants

In order to simplify our design system and make it easier for everyone to find what they need, we have grouped and organised similar components using Figma’s variants. It takes the guesswork out of our design system and brings the components closer to front-end code since it closely resembles how are components are set up in the codebase

Interaction

We made all of our components interactive by leveraging Figma’s variant interactions. This saves us a lot of time when creating prototypes since it reduces the amount of frames and connections needed.

Flexibility

We wanted to offer as much flexibility as possible to our different brands so they don’t look like they came out of the cookie cutter machine. We have managed to achieve that by keeping our components and their names as generic as possible, by using slots, and offering different variants that our brands can choose from.

Documentation

The key to a great design system is documentation. Any discipline should be able to understand how each component has been constructed at a glance. ThisIt also helps engineers build higher quality components while also reducing the QAing time for designers.

Brand theming

By overriding the default token values, each brand can change the appearance of the components to align with their identity.

Tailwind CSS

For a CSS framework we opted for Tailwind which is a utility-class framework and allows us to rapidly build custom user interfaces. It’s basically a cool way to write inline styling and build a great interface without writing a single line of your own CSS. I’m personally not the biggest fan of Tailwind because it makes the markup look a lot busier than it should be, but our developers love it and life is made out of little concessions.

Histoire

Having a Design in System Figma is certainly not enough. We needed a frontend tool that helps developers our developers sandbox the UI components in order to be be observed, tested, and showcased in isolation. We opted for Histoire as it is compatible with our current tech stack and it can detect the Tailwind CSS configuration and automatically generate design tokens.

Project management

To avoid project management overhead and be able to focus on the work at hand, we moved the project management of the Design system in Notion instead of Jira, which is our regular project management tool. We also established a weekly meeting every Thursday in order to give an update of the work that has been done, discuss ideas, fill the backlog, review tickets and move them to completed.

Impact

Moving from individual design systems to a centralised Multi-Brand design system was a massive success. We managed to increase design velocity by 25%, decrease managed costs by 30% and we are now able to get to the market with a new product 4x faster than before.