Multi-brand, multi-platform Design System

Sainsbury's are one of the leading supermarkets in the UK. They've built up a number of different products specifically in grocery shopping but also span to others like finance with Sainsbury's Bank. Along building their own products they have expanded with brand affiliates like Nectar, Tu clothing, Habitat and most notably Argos. Each bringing their own brand values and resources, we saw this was a time to pause, take stock and address the wear and tear of product delivery over the years.

  • Recognising different company cultures
  • Multi-brand UI library
  • Multi-platform UI library
  • Headless Global UI library
  • Design Tokens
  • Contribution method
  • UX Strategy
  • UX Design
  • UI Design
The Challenge

How can Design Systems enable product teams to work more efficiently and produce an experience that feel more aligned.

We use the Double diamond process to communicate our strategy and share with product teams.
Sainburys logo
Argos logo
Nectar logo
habitat logo
Tu logo
Speak to and spend time with people who are affected by the issues.

A project with such a huge scope has to start somewhere. The discovery was lead by talking with other designers, understand how they're working, what conditions are they up against, their existing knowledge of design systems, their skill level with tools like Figma and be open to hearing as much feedback as possible.

It's understandable for products to eventually feel the wear and tear of working in fast agile environments, features are shipped and delivery deadlines met but sometimes some corners need to be cut, this was starting to show in end-to-end experiences and a difficulty to supporting a unsustainable siloed working environment.

Designers have been great at making their own efficiences with local Figma libraries, discussion and audits over these highlighted the level of duplication and inconsistencies by a lack of transparancy and centralised governance.

Product teams split by brand, product and platform.
Self conducted audits carried out on end-to-end experiences. Online orders to instore kiosks.
Product teams need for speed seeing each build their product libraries for their own efficiences.
Different company cultures

An interesting discovery that come from the different design systems and libraries in place is how it has influenced or been influenced by the working cultures.

Argos Bolt Storybook library
Used on Argos brands (Habitat & Tu) it's a dev first component library, its widely adopted and maintined through development. There is no Figma library counterpart, limited to web only components and being dev first means designers playing catchup or starting from scratch each time.

Sainsbury's Luna
Used across the Sainsbury’s brand and a growing alignment with a Figma UI library. Luna recognises the broadness of a design system with patterns and guidelines and heavly influenced by accessibility. There has been a small adoption in design and limited adoption in development

Argos Storybook component library. Dev lead UI library
Sainsbury's Luna Design System. Values the broadness of design systems and desire for accessibilty.
Define the challenge from the insight gathered from discovery.
What is a design system?

A common misconception is that a design system is just a UI library. UI libraries are often built out of a team or individuals personal desires to stream line their own workloads but this only goes so far to fix the issue and it soon falls apart when updates or maintenance are needed across multiple teams.

Sainsbury's had already recognised the value of design systems and as such, treated it as a product team. This would allow the team to follow the same ceremonies as a product and have their own goals and targets.

Design systems are not just for designers and theres huge overlap

Communicating the broadness of Design systems and breaking away from the idea of they are just UI libraies.
Bolt vs Luna

Sainsbury's have made good lead way with both products but each has their faults. For us to move forwards we wanted to build on what would be most scalable and desirable. Bolt is more established in the development community but used inconsistently and lacks guidance and design input. Luna is design lead, offers stronger guidance a huge drive of raising standards of accessibilty but less mature in its usage.

A desired approach was to build a single source of truth that each discipline can benefit from, bringing parity between design and development and reduce workload duplication.

Figma tokens closed the gap between design and development even further, our UI libraries could now use the same variants that are used in code.
Develop and explore different solutions to this challenge.
Figma UI libraies using live code

Working with Token Studio we were able to align and import design tokens from Development to be used on a headless Global UI library and exported to each brand. This offers flexibility with variables per brand and easily maintained by a small product team.

Building Global UI
A headless Global UI library could have Design tokens applied to export for each brand.
Global UI checkbox example
Designers can override content and easily toggle to native patterns.
Global components built once to map to brand tokens.
Example of token controls. Fonts, sizes, colours and corner radius
Develop and explore different solutions to this challenge.

Design systems have advanced and matured massivly over the past few years. This has seen products like Figma and third party products rise to support these growing needs that Sainsbury's have been willing to embrace and innovate with.


Working closely with product teams through the development of the Design Systems has enabled us to work in the open and up skill designers along the way. We had a very conscious effort throughout to not become the bottleneck and the design system is here to support and encourage their productivity.

Like all good products, we can recognise our and build on our faults. Using Figma analytics offers us a small insight into weekly adoption and also where we can offer clarity or governance with component detachments. It's been great to see the growth of this system and raise the integrity of design, accessibilty and consistency of E2E solutions.

AVG Weekly inserts
Using Figma analytics to measure adoption.

It's been great to work with the Sainsbury's team on their design system. They've recognised the value a design system can bring to their product teams and assigned resources to it like any other product. I've seen many brands build their UI libraries and design systems by a passionate few as an extracurricular activity whilst juggling other product work, this rarely works, its not sustainable and becomes a bottleneck.

Sainsbury's deserve huge praise for the standards of accessibility they work to and its been great to see it at the forefront of all decissions.