Tesco Grocery app
Re-designing the mobile app shopping experience
Background:
The existing Tesco Grocery app was built on the Xamarin platform, which had become unstable over time. Tesco therefore wanted to re-platform to fully-native Android and iOS apps and improve the design to boost performance against KPIs.
My role:
I joined the product team at the delivery phase and was responsible for UX design of user flows for specific sections of the app (basket, checkout and amending orders) whilst working at pace in a large agile team.
Native components & design library
Tesco carried out an extensive discovery phase of 'innovative' ideas prior to when I joined the project, but this was put on hold in favour of focussing on re-platforming and making smaller fixes to user flows where the biggest pain points/opportunities were identified. The aim was to use native components as much as possible and reuse the latest version of the Tesco pattern library.
The work was broken down into job stories in Jira and divided between multiple pairs of designers (UX designer + UI designer) for each agile sprint. It worked well working side-by-side in this way because we worked through solutions together, each bringing our specialisms. However we had to ensure design solutions were visible across all pairs of designers to avoid repetition and inconsistency. To do this we utililised online tools for sharing all work in progress such as Miro boards, a shared component library in Sketch and keeping a record of finalised design components in Zeplin.
Using Miro boards for everyone to see work in progress
Working out solutions via sketches before mocking up in Sketch
Collaboration with Developers
It was equally important that we worked closely with Developers and QA testers. We sat together as a product team of nearly 30 people (Developers, QA, Product management, UI designers, UX designers and User researcher). This helped to ensure there was constant dialogue in addition to the regular agile ceremonies. In the cases when we needed to look at custom design solutions rather than native components we worked together from the outset to come up with solutions that were feasible to build.
With a lot of work going on at a fast pace, we needed to ensure there was a single source of truth for everyone in the team to refer to as the latest version. This came in the form of the 'App map' - a visual representation of all screens and high level user flows that everyone contributed to and the whole team accessed via a Miro board.
App map
Making the complex simple
I worked across some functionality-heavy sections of the app with lots of variables to factor in and many rules to consider in relation to how everything operated at Tesco. For example I needed to consider rules around inventory management for how to deal with unavailable items when a customer was amending an order. I therefore reached out to the experts in the operations team to work through solutions together, which led to identifying some further quick fix opportunities to improve the user experience.
One of the biggest challenges for me on this project was not having direct access to the usage data in Omniture that would have helped inform design requirements. Instead in order to get hold of any data I had to request a list of data points from the Product Manager, who would then raise a ticket for a Data Analyst to share. This normally took several weeks, which didn't suit the fast pace of the project and as someone who is experienced in conducting my own data analysis, this chain of request lost all possibility of serendipitously discovering interesting figures in the data. I therefore made use of the top level data we had to hand and the additional insight we gained from user testing.
A process flow to communicate different use cases
Mapping out all the different variables to help shape design requirements
Rapid design & research cycles
We adopted a 'just enough research' approach to test different user flows. The design and research cycles moved at pace as we held weekly user testing sessions with customers to test iteration after iteration. We were fortunate to have a user researcher embedded in the product team who was solely dedicated to organising the weekly user testing sessions. I worked closely with the researcher to ensure each round of testing covered the hypotheses we needed to test and to analyse the results together afterwards too. The researcher often worked alone and appreciated the collaborative effort to make research a team sport.
Additionally when I joined the team there wasn't much visibility amongst the wider product team of all the different user testing being conducted. In the earlier days of the project, different team members would observe the sessions directly, but in this delivery phase they found it difficult to make time. I therefore introduced a research wall in our workspace, which changed from week to week and highlighted at a glance what screen flows were being tested and what the key takeaways were afterwards. The team really engaged with this and it increased user needs being considered amongst the whole team.
Research wall in our product team workspace
Top image: Testing prototypes on different devices
Bottom image: Tracking research insights in Trello
Outcome
The new Android and iOS apps launched in 2019 and received an increase in 4 & 5 star positive reviews on the Play store and App Store, as well as the app successfully contributing to increased basket size per customer.
And very importantly it's now my mum's go to app for buying groceries online :-)