SAINSBURY'S PRODUCT DETAIL
Role: Lead Product Designer. Platform: Responsive web.
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 synthesizing those insights into actionable outcomes that we want to change. One of those quarterly outcomes was to reduce bounce on PDPs, and increase conversion (which we have done by +11.2%!)
Data was showing us that we had an extremely high bounce rate on out PDPs, both on desktop and mobile, and that PDPs were the most common entry point to the website for customers, mostly coming from Google. We noticed that users who bounced were scrolling more, trying to click on the image (which didn't do anything), and engage with search a lot more often, perhaps unable to locate a relevant item.
Outcomes we wanted to change
1. Reduce bounce rate (even a 5% reduction could see a significant increase in revenue)
2. Increase adds to basket
3. Increase engagement
We started with hypothesis
To kick off this piece of work, like many other projects I've worked on, we gathered our cross functional team and examined the data at hand. We looked through the customer experience map I had created prior to this workshop, showcasing all of the know insights about how customers shop with us online, their drivers, needs, and pain points, alongside a wealth of additional data about customer behaviour.
From this, we each generated a range of hypothesis and combined these onto the matrix shown below. This is what we wanted to prove or disprove over the coming weeks.
Why might users bounce?
One of the main issues we wanted to explore was the high bounce rate on PDPs. This had huge benefit for the business, as if we could turn just a fraction of these into converting users it would have a huge impact on our bottom line, but at the same time we wanted to understand why users were unable to locate relevant items. As shown in the chart below, you can see that 56% of those viewing a PDP on desktop bounce, and a large portion view many PDPs without adding to basket.
The current user journey looked something like this:
This flow relies on customers landing on the EXACT item they want, and when they enter from Google, this is very unlikely. Perhaps there's a different size or flavour they're looking for, perhaps a cheaper or more premium brand? Maybe there's a characteristic of this item that isn;t suitable, such as dietary or allergen information. Ultimately, we needed to give users more options to choose from.
For example, thinking about the in-store journey, if you're looking at Coca-Cola, you can easily see all of the other sizes and flavours on the surrounding shelves, even competitor brands that may be on offer. How could we mimick this in-store behaviour.
Something more like this:
PDP as a landing page
From our data we could also see a vast number of visits coming directly to the PDP from Google, suggesting users could be on a discovery / fact finding mission.
Therefore, we started to explore the different pieces of information users might be looking for, the decisions they'll make along the journey and how we can optimise the UI to show the most relevant information first.
Based on this, we created some quick concepts and built some prototypes in Invision for user testing. These included simple improvements such as showing different product variants (sizes/flavours) on the PDP, as well as similar items. Customers come to expect these kinds of features on PDPs nowadays, so it was a welcome improvement, and seen as a 'next step' for many users.
The next hypothesis we wanted to explore was whether we could optimise the layout of information on the page to reduce bounce rate. To do this, we needed to speak to customers about their purchase patterns, decision process, and needs. We ran a survey with 150 customers asking questions about why they visit PDPs, for what product types, and what information they're looking for.
From speaking to customers, we found that their needs vary depending on their mission, and product type. For example, if they're cooking a meal for the family, they want to find recipes, view nutritional data to ensure the food is healthy, and find deals. Compare this to customers shopping health and beauty or GM, who want to read reviews and additional information about the product, or customers shopping for wine who want to know more about where it came from, what food it pairs with, and be able to buy in bulk with ease.
Based on this insight from users, we utilised a progressive disclosure technique to ensure only the most important and relevant information was shown to users, rather than showing everything at once. We used accordions from our design system for these, and exposed key information on each, such as review summary, region, and dietary info.
Customers are mission led
As you can see from the data below, we noticed that seasonal events increased the number of PDP entries to the site, and also an increase in bounce rate. From qualititive data customers told us that they were frustrated they couldn't easily find items they'd previously seen on TV or other advertising, so we plan to explore this further, how we can ultimately turn PDP's into a discovery tool (i.e seeing all items for Pancake Day such as flour, eggs, lemon, sugar etc) rather than just adding a single item to your basket.
From this, it was obvious that we couldn't design a 'one-fits-all' solution. PDPs would need to be tailored to the product type and customer mission. However, for our MVP we'd focus on the most basic verison of a PDP before iterating different variants. Therefore, we needed to design the impossible 'one-fits-all' solution, so, we looked at the relative importance of each piece of imformation per item type and tried to find common placement for all scenarios.
Now that we knew the order in which we want the data to be displayed, we needed to work with the architects to ensure we received the correct information, in the correct groupings. Not only did we want to change the order of information on PDPs, but we also wanted to create clearer hierarchy, better IA (based on card sorting with customers), and more helpful and descriptive copy.
This was no easy task. There were 2 challenges;
1. All of the data is uploaded by either trading colleagues internally, or by 3rd party suppliers, in to two different CMS systems! This meant it would be almost impossible to create consistency between all brands, and we're still exploring this.
2. A lot of the data structure had been informed by the product packaging, making sure the same information is displayed online as on physical products in-store. Here's an example of 2 physcial products and the various pieces of information we receive...
While we were exploring this, we also ran a number of A/B tests on the current site to see what impact certain changes would have on customer behaviour. An example of one of those is shown below, where we tested including a 'Shop vegan' and 'View recipes' button on vegan PDPs to see if the option of a broader mission would reduce bounce rates. As you'll see, this test reduced bounce on desktop and mobile.
Based on all of this insight, and technical constraints with the data, we refined what we wanted to learn, and therefore include, for our MVP. In order to reduce bounce, we included;
Larger imagery / Click to zoom imagery / Additional imagery / Clearer content structure / Top review callout (social bias) / A single 'Why not try' item / Collapsed 'less important' product information