More projects

Sainsbury’s Book Delivery



Role: Lead Product Designer.

Over the past year I've been responsible for the design of the Sainsbury's groceries website, where we've been gathering a vast amount of data about our users, and synthesising those insights into actionable outcomes that we want to change. One of those quarterly outcomes was to 'Improve ease of shop', specifically exploring why we get a high bounce rate on our mobile book delivery page.

Data was showing us that we had low customer satisfaction for cost of delivery (which is a contributor to reasons why users lapse), and a high bounce rate, especially on mobile devices. Additionally, the UI was not accessible for keyboard and screenreader users, and not optimised for tablet devices.

Outcomes we wanted to change

1. Reduce bounce rate (especially on mobile)

2. Improve customer satisfaction for ease of finding available slots

3. Improve value perception of delivery costs

Book DelivsBook Delivs
Book Delivs MobileBook Delivs Mobile

We started with hypothesis

To kick start this piece of work, we gathered a cross functional team of developers, PMs, designers and trading colleagues, and looked through all of the insight we had on our customer experience map, specifically focusing on the 'book delivery' phase of the customer journey. This included conversions, bounces, where users entered the journey from and much more. From this, we individually wrote down different ideas, questions and hypothesis we had, before combing these into the hypothesis shown below.

Desktop stats

Desktop statsDesktop stats

Mobile stats

Mobile statsMobile stats

We could see that the majority of users booked a slot at the start of their shopping journey, before adding to basket.

Where users come fromWhere users come from

A/B Testing

Following this, we identified a few quick A/B tests we could run to validate our assumptions. One of which involved highlighting the cheapest delivery slots in red to draw users attention. Our key metric was to increase CSAT, but we'd use slot booking conversion and bounce rate/cart abandonment as our measures of success for this experiement. And from the results below you can see that overall, this test had a positive impact.

Screen Shot 2019-09-10 at 7.23.01 PMScreen Shot 2019-09-10 at 7.23.01 PM

Qualitative testing

Another assumption the team had that we wanted to validate, was whether customer associated those red delivery slots with 'offer', or 'error'. We use red to signify both across the website, so it would be interesting to see what users thought this colour inferred. We ran a series of click tests and surveys using our remote testing tool Userzoom to help validate this, and from the results below you'll see that the majorty of users associated the red price with 'cheapest'.

Screen Shot 2019-09-09 at 12.10.26 PMScreen Shot 2019-09-09 at 12.10.26 PM

Importance of price comparison

From previous research, we know that the most important driving factors when booking grocery delivery is time and day. Customers know when they're home, and are typically in weekly routines and therefore get their shopping delivered around the same time each week. However, we wanted to understanding the importance of price when it comes to picking a delivery slot. We decided to run another survey to get an idea of how likely users would be to alter their slot to save money, or hunt for cheaper slots when shopping online.

You'll see in the designs below, that these insights led us to include a 'Show cheapest slots' checkbox, allowing users to easily locate the lowest cost slots on that day. Something we want to validate next is whether or not removing the £ sign next to the prices will increase value perception. Various psychological studies have been conducted in the past showing that by removing the £ sign users are less likely to assosiate the price with high cost, and are therefore more likely to convert.

iPhone-X-mockup-isometric (2)iPhone-X-mockup-isometric (2)

Delivery vs Collection

We also noticed in our traffic analysis that the majorty of users book a delivery rather than collection, 95% of users in fact. The current flow included a step before seeing the available delivery slots, asking customers if they'd prefer delivery or collection. Based on this data we removed this step from the journey completely, taking users straight to the delivery page with an option to 'Switch to collection. We ran several click tests and guerilla testing sessions to make sure users could still book a collection if that was their preference.

This is the old screen that we've removed from the flow:

Screen Shot 2019-07-04 at 11.29.36 PMScreen Shot 2019-07-04 at 11.29.36 PM

And here's our new design that users will be taken to when clicking the 'Book delivery' button elsewhere on the site:

Group 18Group 18

5 days vs 7 days

Another change we've made with our new design is only showing 5 days worth of delivery slots by default on desktop, compared to 7 in the old designs. As you'll see in the comparison below, the old design was visually overwhelming for all users, but especially those with visual or cognitive impairments. It was crucial for us to try and reduce the data overload on this screen.

We looked through the data and found the majority of customers book a delivery within 5 days, with only a small fraction booking further in advance. Based on this we decided to reduce the number of slots shown to 5.

Designing for access needs

Throughout the redesign, we were concious that we'd need to ensure the book slot journey was accessible for all of our users. We've worked closely with engineers to make sure we've accounted for screen reader users and those with dexterity impairments. However, during one of our user testing sessions, we tested with a blind user. As soon as he started to attempt to book a slot on a mobile device he came into issues. When moving his thumb around the screen, he was finding it difficult to locate specific time slots. There were several issues here.

1. The hit areas for each slot were too small. His thumb would often move off of one day and onto another.

2. The screen reader wasn't reading out the date of the slot, rather just the time. Therefore we've changed this to read '7am, £2.50, Friday 1st Sept', rather than just '7am, £2.50'.

We decided to tweak our designs and reduce the number of options present on the screen at any one time. Therefore, instead of showing multiple days worth of slots, we now show just a single day. The user need to make a concious action to move to another day, reducing the likelihood of errors occuring.

This is the design we started with:

And this is the updated design based on user feedback:

Our design system

Throughout this redesign we've worked closely with our Design Systems team, utilising existing shared components and contirubuting new designs and requirements back into the shared repository. This has helped both the design and engineering teams deliver accessible, usable code at speed, and allowed us to keep consistent with the rest of the Sainsbury's estate. Here's an example of some of the components we've been working with.


Next steps

Over the coming weeks we'll be working closely with our data and engineering teams, running further A/B test to validate additional hypothesis, and build out prototypes for testing.

We're also exploring future states for book delivery to streamline the experience further. For example, one concept (shown below) is to allow users to book delivery via a hover dropdown menu, without even needing to leave their current page.

Screen Shot 2019-09-10 at 7.17.38 PMScreen Shot 2019-09-10 at 7.17.38 PM