A design toolkit for Tesco's digital products
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:
Elements
Elements are the basic building blocks of a Tesco digital product:
Modules
Modules are structures usually formed of groups of elements:
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: