Tesco Groceries

The project

Tesco were struggling to maintain and build upon their existing cross platform app. We designed and built two native apps, focusing on usability, scaleability and accessibility.

My role

Working within a cross-functional team on design systems, internal design processes, production design and continuous usability testing.

The timeline

1 year to design, test and roll out the two native products.

The team

4 Product Designers, 12 Engineers, 3 Test Engineers, 1 Product Owner, 1 Agile Delivery Lead.

The previous product

The current product was a cross-platform app built on Xamarin. The codebase wasn't in the best state, which meant the product wasn't scaleable. The designs were also out of date and were full of inconsistencies.

Jumping the gun

When Tesco decided to redo their current app, their initial strategy and approach was problematic. When thinking about beginning the redesign, they were spending lots of time thinking about what the best possible shopping experience could be for their customers. However, seeing as the app made an extremely large amount of money, such an innovative approach was risky to say the least. We knew that we had to be careful when making any major changes as there was a lot of revenue on the line.

We decided to make subtle changes to the new app and to thoroughly test anything which changed previously learned behaviours.

Our process

I was fortunate to be able to test any hypothesises which the team had throughout the whole of the design process. The colleague releases were extremely insightful and ensured we were covering all of the edge cases which might have slipped through. There are tonnes of permutations throughout the app and it's much more complex than you'd expect. As we had been thorough in the first 8 months, the last 4 months were incredibly positive.

Our design and development process was constantly evolving and being iterated on. I took an active role in experimenting with new ways to approach ways of working and processes with a focus to ensure they were efficient and effective.

Access to Tesco's data

The best thing about the existing Tesco app was that it had a whole bunch of analytics baked into it. This meant that I was able to assess the areas where Tesco were making the most revenue and ensure that we were mindful when designing these flows. An example of where this was super useful was when we were designing the new navigation. We went from a hamburger menu to a tabbed navigation model, which took a lot of care and consideration when re-thinking the app's architecture.

The Design System

I worked closely with the engineers to ensure we were building the app from reusable components. All of our colour styles and text styles were the foundations of our design system. We ensured that all of the pairings were accessible and worked across the whole of the product. All of the components we created were styled from these core styles.

I created a library for each platform, and also one for the various assets which we were using which were platform agnostic. I split out our sketch files into the key flows throughout the app. This kept everything organised and ensured the team could easily search and find files, artboards and flows in seconds.

This is a small part of our Android design library file - we had a similar one for iOS, using native iOS patterns. When I first joined the project, some flows in the app had already been designed without using a design library. We decided to go all in on the sketch library beta and I did an audit of the existing elements we were using. I then created the library from scratch and re-built the screens using the library elements. Meanwhile, the team carried on as they were, and once the library was at a good level I introduced into our wider process.

A key part of this succeeding was having a gatekeeper to the library. We carefully considered changes, updates and additions in our weekly design sessions.

A look at the finished product.

👀 ⬇️

Helping customers find products

Customers need to be able to find the products they want with as little friction as possible. We combed through tonnes of analytics and previous insights to ensure that the most important journeys were implemented with precision and care.

Insight 💡

We added 'orders' as a main section to the tab bar after realising how many people were adding their previous orders to their basket to speed up their shopping experience. We ran a mini design sprint to explore all of the various options and then validated our solutions by testing them with users.

Booking a delivery slot

We encourage the user to book a slot before beginning their shop, this way we can offer them a much more tailored experience. There are a lot of different nuances and edge cases when it comes to booking a slot. It affects a lot of various sections of the app, which meant we had to work closely with the engineers and testing team.

An intelligent basket experience

There were interesting challenges with the basket experience. This is what people see as their place to go to get a clear, concise overview of their current shop. We focussed a lot on scroll states, refreshing and displaying the correct information at the right time on this section.

Insight 💡

When we were testing this with users, we noticed that there were some problems whey they were adding products to their basket when they'd lost signal. We implemented functionality which allowed the user to edit their basket offline - once they had got connection again, we synced their basket data to their account.

Recommending & substituting products

Tesco's products aren't always available in every store. When this happens, we wanted to make it easy for the user to choose an alternative product which matched their needs. The challenge here was making the interface clear enough whilst not being too intrusive.

Insight 💡

Analytics told us that the 'Have you forgotten' carousel was performing well in the current app. Due to Tesco's smart algorithms under the hood we were able to leverage this to our advantage in the new app to remind users when they might have forgotten something from their basket.

How it's doing

5 star reviews increased by
1100%
Average basket value up by
10%
App store rating is
4.7★
A look at how the 5 star reviews increased when we launched the iOS app in March

The icing on the cake

When creating the two new apps, we took a lot of time and consideration into making sure the app was accessible to as many customers as possible. Seeing these reviews for me, was one of the most satisfying and gratifying feelings I've ever had from designing a product. I've written about this aspect of the project here.

Thanks for reading.

Check out the two apps below
Back to the top ☝︎