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:
- 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
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