SAINSBURY'S GROCERIES

Role: Lead Product Designer, responsible for end to end design delivery, research, testing, UI and UX, working with one other designer in our scrum team.

Over the past 8 months I’ve been working on the core groceries website, where we receive millions of orders every single day. It’s an extremely important part of our business, and customers expect it to work flawlessly. The problem? It’s built on a very old (non repsonsive) platform, meaning it’s tricky to be agile and iterate, there’s a lot of risk involved in releasing new code, and we have to manage 2 code bases for desktop and mobile.

It was our job to help rebuild this website onto a new responsive platform, using our Luna design system, making it easier for customers to shop whenever and however they want. We decided to focus on the most visited areas of the website that generated the most revenue, starting with the Favourites page. We knew that once users had shopped with us twice, the stored value in Favourites leads to a much higher retention rate.

Here’s our new, responsive favourites page, where we've seen a 4% increase in order conversion, an 8.7% increase in adds to basket, a decrease in site duration by 41 seconds, and an increase in revenue per session of £3.46.

And we’ve not just been looking at our new Favourites page. We’re in the middle of doing the same thing across other important parts of the site, including book a slot, checkout, PDPs and building a brand new feature; user generated lists. Check out the prototype here.

However, when I first joined the project I noticed the team were very output focused, delivering features and being measured by delivery, and I needed to turn them in to an outcome focused team, focused on changing customer behaviour and being measured by KPIs.

To do this, we needed to make data more accessible to the team so they could focus in the right areas, and we had A LOT of data. We started by creating a site map to better understand the size of the website.

We then worked with many different teams and stakeholders to gather all of the insight we had, from complaints to the call center, to bounce rates, CSAT, live zoning, online drivers and more.

We captured each stat on a post-it and mapped these onto a board to document a high level experience map for both mobile and desktop, making it easily accessible for the whole team so it can be used to help plan each sprint. We then turned this into a digital document to share with the wider team.

Following this, we highlighted some of the largest pain points across the journey, and ran a workshop with the engineering and trading teams to generate hypothesis and possible solutions to the problems we’d identified.

We then worked with wider stakeholders to create 7 outcomes for the team to focus on over the coming months. These ranged from reducing bounce rate on PDPs, to increasing value perception and showing more relevant products to customers.

These are now stuck up around the office, so each member of the team knows how the piece of work they’re doing ladders up to our quarterly outcomes.

Changing team structure

To deliver these outcomes, we realised that we'd need to create truly cross-functional teams, who would be responsible for the end to end customer journey. We therefore moved from technical capability led teams, to customer experience focused teams.

Adding value, quickly

From looking through the data, we could see that our Favourites page was a highly used and valuable page to both customers and the business. Below, you can see that over 60% of cart adds come from Favourites, so we hypothesised that by fixing some low hanging fruit we could really help drive sales.

In addition to this, we could see that users were using Favourites to build their baskets, either by adding multiple items or by adding an item, navigating away (using search), and then coming back to Favourites again (you can see this on the chart below, red being the favourites page, black being an 'add' event, and green being search). Based on this, we built in a feature in Favourites allowing users to continue where they left of, so the Favourites page would anchor down to the last position they were at.

The first element that we needed to rebuild on the Favourites page was the product tile. This is a crucial component on the site, giving customers all of the information they need about a specific item. 

Our exisiting tiles were not accessible, had a lot of visual noise, and lacked consistency, making it harder for customers to find relevant items easily. We undertook a lot of research, speaking to customers (and business colleagues) about the information they find important, and not so important, to help us reduce the number of elements displayed on our tiles. For example, it was important the trading teams were able to showcase supplier funded content (sponsored) across the site more easily.

This shows the new product tile we created, with all elements turned on. This would be a worst case scenario.

We did a tonne of user testing and reseach, asking customers what information would be most important to them in various situations. This helped us rationalise why we should remove a number of elements from our product tiles, from ‘British’ badges, to excessive offer labelling, maximum order messaging and ‘New’ badges. A/B testing showed that these had no impact on conversion rates and adds to basket metrics. This also helped improve the accessibility of our tiles.

One multi-variant test we ran was around offer messaging. We found that users were able to locate on offer items as quickly and accurately by just displaying the price in red, rather than having an additional ‘Offer’ badge on the tile. 

Product tile redesign: before and after

Mobile optimised hero images

We know that customers primarily locate products based on their image, so making sure our images were optimised for smaller screens was super important. We made sure suppliers provided assets that enhanced certain vital information, such as variety and size of item, or showing the individual item inside of a multipack. This was critical in helping customers identify the correct item for their needs. Further research can be seen here.

Once we’d cracked product tiles, we needed to consider the PLP. Again, we followed a similar approach and ran a number of research and user testing sessions to understand how people wanted to browse our site, from sort and filter options to how much editorial content they want to see across different page types. We also used our live tracking tool to surface in page click rates, hover rates, scroll reach and exposure rates, which proved really helpful in determining areas for improvement or removal from our MVP.

We also found that users wanted to see content much higher up the hierarchy. The current site only displayed products on the very bottom pages (shelves), and our proposal was to surface these products at the very top level (zones), making it much easier for customers to locate items.

We also worked very closely with our content and trading teams, to ensure we provided adequate space for our suppliers to surface their content, in a user friendly way. This ranged from labelling products with ‘Sponsored’ if they’re supplier funded, to integrating a promotional banner within the grid of products, as shown below.

Our current site displayed this banner at the top of the page, pushing relevant content much further down, and therefore received a low number of clicks. Our hypothesis was that by moving it into the responsive grid, we would increase ease of use for our customers and also engagement on the promotional banner. Data has shown that we’ve increased banner CR by 300%, and supplier funded adds to basket by 550%.

We redesigned all components on the PLP to fit into our new Luna design system, such as filters (shown below). We know that 82% of our customers rate health and nutrition as a very important factor when deciding what to buy, and health is the 3rd biggest driver after price and quality, yet our filters saw very little engagement and our CSAT score was low. Through rounds of customer testing, we've introduced a more visible filtering system that clearly indicates the types of filter we have available, such as 'Dietary',

We ran multiple research and user testing sessions to understand how users want to shop and navigate our PLPs, both moderated and unmoderated.

We’re now looking at more complex PLPs, specifically editorial areas of the site such as event pages (Valentines, Christmas), branded pages (Cadbury, Godiva), and zone pages (Health and Beauty).

To do this we have been working closely with our content and trading teams to make sure we’re creating a flexible page that they feel gives them a variety of useful ways to promote and surface relevant content to users, from ‘Top picks’ to ‘Trending carousels’ and easier ways to navigate through a broad range of items.

I ran a series of workshops with the team, using cut-out components to assemble PLP structures that they think could work, across desktop and mobile.

One of the principles we followed was to show as many products to users as possible. To do this we needed to shift the mini trolley from the right hand side into the header. This allowed us to show 6 products per row rather than 4 on our old PLPs. We ran user testing sessions to understand the importance of the mini trolley, and if users were able to locate it on our new PLP pages. We also worked closely with the accessibility team to ensure this met our AA standards.