25 designers and 20 developers were all working on different areas of Tesco producing designs that were great, but inconsistent.

The challenge

I worked as part of a small team, with one other designer and two developers to create a design system to be a central source of truth for all design solutions.

The ask from Tesco was to eliminate any inconsistency and unite teams and departments that had previously worked in silos.

It was my responsibility to make sure that what we were creating was easy to use and provided the tools and explanations required.

The process

First steps

Scoping time & effort

Collectively, we agreed on a T-shirt sizing technique where the tasks were classified into t-shirt sizes: XS, S, M, L and XL, depending on their complexity.

Getting everyone onboard

We held a series of meetings with other teams such as marketing, to get their initial buy-in and ensure that their input was taken onboard and applied.

Planning and priority

We collected a list of all of the features, elements and modules that made up the Tesco experience. Using this list we created a backlog and worked on areas in two week sprints.

Audit

After capturing every aspect of design for Tesco (buttons, icons, patterns etc.) I grouped them into categories. Atomic design principles served as the best route for creating a robust design system.

Foundations

Aspects of a Tesco site or product that apply at a fundamental level:

• Grid
  
• Colour
  
• Typography
  
• Iconography
  
• Links
  
• Buttons

Elements

Elements are the basic building blocks of a Tesco digital product:

• Navigation
  
• Form labels
  
• Input fields

Modules

Modules are structures usually formed of groups of elements:

• Footers
  
• Headers
  
• Navigation flyouts
  
• Promotional carousels
  
• Content carousels

Email

Guidelines relating to the modules used in marketing and service emails.

Promotional Modules

Guidelines on promotional content and their containers.

Apps

Guidelines on styling for Android and iOS devices.

Execution

Layout

After a few rounds of feedback we landed on a layout that would be easy to access and process for any user, while also including just enough information to not overwhelm with information.

Interaction

A lot of design aspects were not flat and rather than simply showing things in a static format we opted to include as much interaction as possible.

Results

In a relatively short amount of time, we managed to deliver a design system that had solid foundations and would continue to evolve and shape the future of Tesco's digital products and services. The key achievements of this project were:

• Decreased build time - The new design system helped to reduce build time by 12% month on month
• Encouraged collaboration - The new system unified teams under a common language, that had historically worked in silos
• Flexibility and scale - Having the new system in place opened up the opportunity to scale quickly and easily