About

Work

Skills

About

Work

Skills

tesco.com

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

Role

Product Designer.

The tasks

The challenge

1. Audit and evaluate the current site to identify Healthspan's audience, their pain points and uncover disengagement areas across the site.


2. Identify and demonstrate quick wins and longer term improvements, across navigation, language used, integrating imagery and enhancing key landing pages.

Standardise the design output to improve existing and future product quality and eliminate inconsistency. Additionally, uniting teams and departments that had previously worked on design in isolation.

Results

A comprehensive guide of recommendations that were integrated into a roadmap.

100% design consistency across the company.

After applying changes, Healthspan experienced a 15% rise in converting casual browsers into repeat customers.

Unified designs across apps and sites saw less customer service queries.

Adopting Figma as the primary design tool streamlined processes and collaboration.

Set up

I worked as part of a small team, with one other designer and two developers from different departments. It was my responsibility to make sure that what we were creating was easy to use and provided the tools and explanations required.

The challenge

Standardise the design output to improve existing and future product quality and eliminate inconsistency. Additionally, uniting teams and departments that had previously worked on design in isolation.

Set up

I worked as part of a small team, with one other designer and two developers from different departments. It was my responsibility to make sure that what we were creating was easy to use and provided the tools and explanations required.

Results

100% design consistency across the company.

Unified designs across apps and sites saw less customer service queries.

Adopting Figma as the primary design tool streamlined processes and collaboration.

Role

Product Designer.

Duration

Five months.

The challenge

Standardise the design output to improve existing and future product quality and eliminate inconsistency. Additionally, uniting teams and departments that had previously worked on design in isolation.

Set up

I worked as part of a small team, with one other designer and two developers from different departments. It was my responsibility to make sure that what we were creating was easy to use and provided the tools and explanations required.

Results

100% design consistency across the company.

Unified designs across apps and sites saw less customer service queries.

Adopting Figma as the primary design tool streamlined processes and collaboration.

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.