Tesco is a British multi-national groceries and general merchandise retailer. Their digital sites and apps receive over 25 million visits per month, all of which had their own style guide or design system.

Design systems

CONTENT STRATEGY

The ask from Tesco was to eliminate any inconsistency and unite teams and departments that had previously worked in silos. 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.

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

Consistently inconsistent

Consistently inconsistent

Consistently inconsistent

99.9% of teams working in large corporations tend to only focus and work on what matters to them, which makes sense, until it doesn't.

Customers had been consistently telling us that they often struggle with having to do things differently on each site/app and saw Tesco as "just one place".

Here are a few examples of inconsistent aspects on different Tesco sites.

Mapping what existed

To help understand the breadth and depth of inconsistency, I mapped out all of the sites and apps to ascertain which (if any) had a style guide or design system and which team was responsible for them.

To help understand the breadth and depth of inconsistency, I mapped out all of the sites and apps to ascertain which (if any) had a style guide or design system and which team was responsible for them.


(Scroll to the left to see the table below on mobile devices.)

To help understand the breadth and depth of inconsistency, I mapped out all of the sites and apps to ascertain which (if any) had a style guide or design system and which team was responsible for them.


(Scroll to the left to see the table below on mobile devices.)

Style guide

Design system

Team

Groceries

-

Axure design system

UX - Web

F&F Clothing

Local Sketch file

-

Marketing

Clubcard

-

Storybook component library

UX - Apps

Bank

Local Figma file

-

Content

Mobile

Local Adobe Illustrator file

-

Mobile

Recipes

-

Axure design system

Content

Photo

Local Sketch file

-

Marketing

Magazine

Local Figma file

-

Content

Direct

Local Adobe XD file

-

Digital Design

Internal tooling

-

Storybook component library

UX - Web & App

UX - Web
& App

Bringing everything & everyone together

Bringing everything & everyone together

Bringing everything & everyone together

While this project was lead by the UX web and app team, I presented my findings back to all teams concerned. Taking into account their thoughts and concerns.

From this, I set out the framework of what would be available in this new ecosystem. This was vital in ensuring this wasn't just a 'vanity project' and that it provided utility.

The outcome

The outcome

The outcome

On the design side we collectively agreed to use Figma as the only design tool, largely due to it’s cloud-based collaborating capacity. Pure branding assets (logo creation etc.) remained Adobe specific.

Figma libraries

Instead of creating a Figma page for each site, we created 6 key areas that covered everything. This allowed for everyone to effectively (and efficiently) apply and update consistent design across Tesco.

The platform

The new design system was accessible via a link, eliminating the need to ask for access to a specific platform etc. which in big companies, is a big problem.

The design system provided information that was team and discipline agnostic. Everything from design guidance and developer implementation to marketing and content practices and patterns.

Interaction

To keep things as close to 'live' as possible, we included a sandbox and live action aspects, which allowed for users to play around with everything from navigation to components.

The outcome

The outcome

The outcome

The creation of a unified design system for Tesco resulted in a significant improvement in consistency across all digital platforms, enhancing user experience and brand cohesion.


The adoption of Figma as the primary design tool streamlined collaboration across teams. However, the initial implementation faced challenges due to varying levels of team engagement and adaptation to the new system.


Continuous feedback and iterations helped overcome these issues, ultimately delivering a cohesive and efficient design system.