A design toolkit for Tesco's digital products

Tesco DDL opening img 2

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.


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.



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

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



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

  • Navigation
  • Form labels
  • Input fields



Modules are structures usually formed of groups of elements:

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



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

Promotional Modules


Guidelines on promotional content and their containers.



Guidelines on styling for Android and iOS devices.



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.



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.


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 scaleHaving the new system in place opened up the opportunity to scale quickly and easily