Over a eight year period and three separate contracts, I worked with Tesco to help them create their new digital design system. An extensive and amazingly in-depth project, their design language helps designers and developers across the business to create websites and apps that are unified and recognisably Tesco. It is also integral to giving customers a consistent experience across Tesco’s apps, websites and emails. The design system services over 160 UX and UI designers across one of the UK's largest companies. A really fantastic project to work on!
Project:
Digital Design System
Role:
Senior & Lead Product Designer
Key roles and responsibilities:
• Figma component build
• Product template build
• Token development
• Development documentation
• Consumer documentation (Zeroheight)
• Onboarding
• Consumer support
• Contribution analysis
• Development reviews
• Native migration
Design System V1
As part of the core team of five, I worked under the two heads of creative to help define and roll out design assets for all areas of Tesco's customer facing UI. From button and form language to email and promotions, every nuance of UI functionality had to be considered with rules defined. This was documented in the online 'DDL Toolkit' that was built by the team to allow easy access to the design language by both colleagues and external agencies.
Research was carried out across the entirety of the existing customer facing Tesco estate to establish the full extent of the business and customer needs for each sprint. This enabled the design rules behind each part of the language to be fully validated and cover every eventuality.
After two years of work we completed the first release of new design system. We created the below poster to communicate this to the business and to show the scale of what had been achieved.
Native integration
At the end of the first release of DDL, I joined the App Team as Lead Designer to help integrate our new design system into the Android and iOS groceries apps. This gave us opportunity to start stress testing the design language and get it in front of customers for testing and make further improvements/additions where necessary.
Design System V2
In 2020, I was asked back by Tesco to help them unify the component libraries into a brand new Figma library system. Over a three year period, I helped migrate the align the design system with engineering and work closely with Tetralogical to ensure that our design system meets the highest accessibility standards possible.
Tesco Technology
Following on from working on their new digital design language, I was asked by Tesco to join their Technology team which focuses on in store customer facing products and colleague tools. Predominantly focusing on the self service checkout and their customer engagement centre(OneCEC), I was tasked with integrating our new design language into the products whilst enhancing functionality and solving various pain points.
On self service checkout, there were two issues that we wanted to address. Firstly, research had shown that customers were experiencing difficulties with the existing button language and screen glare, preventing them from interacting with the touch screens effectively. Secondly, the styling was not up to our new brand standards. Working with NCR, who create the checkout terminals and software, I designed new screens to meet our brand standards whilst also making sure we were tackling customer pain points. Build restrictions prevented us from changing the UX, so I focused on making enhancements to the existing user journeys.
Old vs new customer checkout screens
In addition to my work on self service checkout, I also worked on enhancing Tesco's customer engagement centre(oneCEC). This is an online tool that is used by Tesco colleagues to help with customer requests. Historically, Tesco agents have had to use many different tools and apps to cater for this. Ranging from things like changing address details to merging accounts to ordering a new Clubcard, there are many different services that an agent has to carry out.
The job of OneCEC is to combine all of this into one place where they can easily access all they need in an efficient way and help serve the customer more effectively.
The job of OneCEC is to combine all of this into one place where they can easily access all they need in an efficient way and help serve the customer more effectively.
