Tesco

Senior UI Designer. London 2019

Senior UI Designer. London 2019

Senior UI Designer. London 2019

tesco-hero@2x

Overview

Tesco is one of the largest groceries and general merchandise retailers in the world with about 4,000 stores in the UK serving million of customers annually. Because of the volume of customer's and orders, Tesco need an easy way to track, record and view all of this information, easy and fast. They have various legacy systems which provide this information however it is massively fragmented, dated and chaotic.  

Tesco hired me to work on a brand new platform to combine all legacy systems together for a streamlined and painless experience.  OneCEC which stands for customer engagement centre is the new customer service hub which enables Tesco customer's to interact with agents to locate, record, track and amend customer orders and information.

Design audit

Design audit

First thing first, working alongside UX support we needed to audit what already existed and understand how this worked and how the Tesco agents interacted with it whilst communicating with a customer. 

From a visual design perspective, the legacy systems were especially outdated, and there was no clear hierarchy to the design which inevitably made the user experience difficult to understand. 

Juvo is the order management system which was the first legacy system required to migrate to the OneCEC platform. Juvo was a huge system and had endless complexities and scenarios which we had to account for.  

Sitemap

Together with UX support, we decided it would be best to map out the flows of the OneCEC platform for clarity not only for us but for project management and development. By breaking it down it helped us to understand the flows better and for me to estimate what components would be required for each screen.

tesco-sitemap@2x

Digital Design System (DDS)

Tesco's design system internally known as the DDS was extensive, flexible and without doubt efficient. However, because the OneCEC platform was relevantly new, it therefore did not have a design system in place, and inevitably showed inconsistencies. 

Amongst working on various projects for the OneCEC platform, I also took it upon myself to build a functional Sketch design system for OneCEC with responsive components which aligned with the company wide DDS.

This begun defining a working grid system for the platform which didn't require responsiveness as the agents using the system used it full screen on their computers for ease of use. So I devised of a grid system which I optimised for screens with and without the side navigation as there were many instances where the side navigation would be hidden or disabled.

tesco-grid@2x

Typography

A collaborative piece of work by Wolff Olins and font foundry Colophon, together they designed a 34 style font family derived from Colophon's own Aperçu font. 

Tesco modern was the company wide typeface used across all channels, therefore using it across the OneCEC platform was essential. 

tesco-typography@2x

Colour palette

As part of the Tesco DDS, the colour system which had been created was again impeccable, and all instances were thought out including accessibility for typography and error messaging. 

I continued using the existing colour palette for the OneCEC within components to provide consistency throughout the platform.

tesco-colour@2x

Iconography

Along with typography and colours, the Tesco DDL iconography library was full and solid with a 1.2px outline icon set. I used a large variety of icons through the platform, reinforced with labels for better readability and recognition. I had to design several additional icons for the platform also, but I ensured these fit within the brand.

tesco-iconography@2x

UI Components

The OneCEC platform now has a fully functional component library which can accommodate most design situations. It is flexible, responsive and consistent with all of Tesco's digital design systems.

tesco-navigation@2x
tesco-buttons@2x
tesco-inputs@2x

Final design

OneCEC platform is currently live and fully functional with the Tesco colleagues and call centres. My time on the platform I have worked on various projects, migrating various legacy systems into OneCEC and building an effective design system for the platform.

tesco-onecec01@2x
tesco-onecec02@2x
tesco-onecec03@2x
tesco-onecec04@2x
tesco-onecec05@2x
tesco-onecec06@2x
tesco-onecec07@2x

PREV

NEXT

Anthony Eamens 2020©

Anthony Eamens 2020©