Improving the online shopping experience through product recommendations
Background and goals
With competition between British supermarkets being closer than ever, this leading supermarket wanted to transform this challenge into an opportunity to improve and set themselves apart.
With the goal of attracting more online customers and increasing their sales, our team was tasked with providing a product recommendations solution for the supermarket.
But this all came with a twist: we only had 6 weeks to build an MVP.
MY ROLE
Senior UX Designer
OTHER TEAM MEMBERS
Product Owner
Business Analyst
Design Lead
Tech Lead
Senior Software Engineer
Junior Software Engineer
What is the industry standard when it comes to product recommendations?
Competitor research
We kicked off our engagement with a little bit of competitor research, to fully understand the space we were designing for.
After looking at other supermarkets, we quickly realised the faults with all their recommendations engines, or lack of them. Many did not have the functionality at all, but for those which did, there were a few problems.
Lack of personalisation
There was absolutely no personalisation - if a vegetarian person was looking at burger buns they'd be recommended the same beef burgers as a meat eater.
This got us thinking - how might we improve this?
Information overload
On some pages, we were completely overwhelmed by the amount of information we were presented with.
Too many sponsored products
Having lot of adverts on sites where we were already planning to pay for products felt wrong.
A little insight into our Invision Freehand board where we conducted our competitor research.
Interviewing supermarket shoppers
Constraint: Limited user research
At the start of the project, we were expected to start designing with no user research. This is not uncommon and often something we have to strongly encourage the project to reconsider, which we have done in this situation as well.
Since we didn't want to build a whole MVP from assumptions only, we decided to interview our friends and family, conducting 15 interviews in total.
Our top 3 findings:
Users who cared about their health were disappointed with what they were being shown
During our research, we found that most supermarkets always had items like crisps, sodas, or beer on offer and those were prominently shown left right and centre across the website. This was quite disappointing for users who took their nutrition seriously, as they felt like they were constantly 'tempted' to put packets of crisps or bottles of coke to their baskets, when in the real store those aisles felt just easy to avoid.
Supermarket 'browsers' were completely underserved
We quickly realised that we could one of the categories we could diferentiate shoppers by was how organised they were when going to the store. Some were super organised, having a 'master' shopping list that they used regularly and added to depended on their circumstances.
At the other end of the scale, we had the 'Browsers' 'Browsers' were users who loved going into the store, getting their basics and then going from aisle to aisle to see what's new, what catches their eye and what they're in the mood to in in the present moment.
For them, the online experience didn't have much to offer across all major supermarkets.
Current recommendations were described as 'random'
Users felt like whenever they were recommended items, they had nothing to do with THEIR preferences. On the flipside, others mentioned that seeing recommendations that fit them without understanding where they came from can feel 'creepy'.
Who were we serving?
After interviewing users, we also summarised our findings in 3 personas:
The family on a budget
The health conscious shopper
The experimental foodie
Persona - Family shopper on a budget
Persona - Health conscious shopper
Persona - Experimental foodie
Constructing design principles
As a result of our research, we made some of our design decisions quite early. We knew all of them needed further research and explorations, but thought these are some good constraints and data points to have when creating the MVP.
1. Offer more than just recommendations.
Offer personalised recommendations.
2. Be transparent.
Show exactly where the recommendation came from.
3. Eliminate decision fatigue.
Don't overwhelm the user with dozens of choices for the same product, especially when they have shown us through previous purchases what products they prefer.
4. Encourage positive decision making.
Prioritise showing healthy, affordable items.
5. Time as their choice.
If someone wants/needs to do their shopping in 15 minutes, give them the tools to do that. If they want to spend 1 hour browsing, let them do that too.
THE SOLUTION
Let’s go on the (shortened) journey
of a habitual family shopper
Step 1 - Choosing how Sam will get her groceries
Screen where the user can choose the method they’d like to get their groceries
It’s the end of the day. Sam has finished work, cooked supper for the children and while her partner puts the children to bed she has sat down to do the weekly food shop online.
She logs in to her Supermarket account and is immediately presented with recommended delivery and collection slots. She selects one for Saturday morning, which is her usual time for groceries delivery and quickly moves on.
The UX details
Historical based slots
Using a customer’s history of deliveries and collections, the system can identify patterns and look for available slots which fit.
Next available slot
The next available slots are displayed to help customers immediately understand if there’s anything in their desired timeframe.
Making choosing a slot mandatory
Option to start filling trolley without selecting a slot is removed. This was to avoid wasting time filling the only trolley, only to find out there is no suitable delivery or click&collect slot.
It allows for products to be hidden if not available, especially for Click & Collect.
Also allows customer’s coupon-eligible items to be highlighted correctly based on validity dates.
Future research questions:
How many customers would this change inconvenience?
Is this balanced by benefits listed above?
Step 2 - Reviewing her previous order
Sam is presented with her previous order, which is useful for her, as the vast majority of her shopping is the same each week.
She quickly scans down the list, adjusting the quantity of a couple of items that she knows they don’t need this week, or need some more of.
She notices the seasonal recommendation and adds one as her kids love them, but she rarely buy them out of season.
After her quick review of the list, she adds all the items to the trolley in one click. Simple!
The UX details
Highlighted recommendation
The occasional recommendation can be added to the list, clearly differentiated so there’s no accusation of ‘shadow’ adding to the customer’s trolley.
Note: This could be a seasonal item, or something that goes well with other items in her list.
Previous order
For the majority of customers, there will be a core set of products they buy each order, so using the previous order as a starting point allows them to shortcut adding these to their trolley each time.
Step 3 - Search, browse or checkout?
The redesigned homepage, allowing users to access multi-search easier and browse more products relevant to them.
With her regular items in her trolley, Sam now lands to a personalised homepage. She sees items she usually buys, or items that work well with what she tends to purchase.
Sam came across a recipe during the week that she wants to try out. She enters the extra ingredients needed in to the multi-product search box available on the homepage.
The UX details
Dynamic recommendations
On this current page, we featured different product categories (picnic classics, award winning wines) as recommendations. However, this can be used as a dynamic space, to feature other types of products. Options include:
Works well with [item in the user’s trolley e.g. strawberries]
Popular products on the site
Event-based products e.g. turkeys and stuffing close to the holidays
Items on offer
New products
Search for items
The current site has multi-search functionality, but it’s relatively hidden. During interviews, users mentioned they never realised it even existed. Here we feature it above the fold, to encourage its use.
Featuring more items on the homepage
Pre-redesign the homepage had a lot of images, but only four products could be added to the trolley from the homepage.
This wasn’t a big deal for habitual shoppers, but for buyers who wanted to explore browse, it was
Step 4 - Searching by shopping list
Screen where the user can choose the method they’d like to get their groceries
After entering her recipe’s extra ingredients to the multi-search box, Sam is presented with the top results for each item per row.
She can quickly go down the page selecting which item to add to her trolley for each item on her list.
Any items with offers or coupons is highlighted to her, along with any dietary restriction warnings, based on her profile.
For peanut butter, Sam doesn’t buy it often and so wants to look at one of the products in more detail. She clicks to navigate to its page.
The UX details
Multi-results
Showing the customer one row of results for each of their search items means they can quickly add items to their basket. This removes the repetitive process of adding a search term, seeing results and then adding another term, relying on customer remembering what they’ve already searched for.
This also reduces the decision fatigue per item by reducing the number of results shown.
Search results
The results for a customer are personalised based on their purchase history (frequently, recently bought etc).
Ex. If a customer’s favourite brand is not available, their second choice from their history is suggested.
Offers/coupons
Items that meet the search term and are on offer or the customer has a coupon for are prioritised in the results above general popularity, but below regularly purchased items.
Dietary warnings
For customers who have set up a dietary profile, items with more warnings are de-prioritised in the results, unless purchase history suggests otherwise.
Dynamic recommendations
Similarly to the previous screen, we created designated space for dynamic recommendations at the bottom of the page.
Future research questions:
How often are customer’s desired product in the first five results, particularly once have several historical orders to personalise from?
What technical restrictions are there on number of rows displayed before pagination is introduced?
Do customers get value from a persistent shopping list combined with multi-search functionality?
How best to highlight to customers that the shopping list is still available to return to?
Step 5 - Checking a product’s details
Screen where the user can choose the method they’d like to get their groceries
Sam can now see all the key information on this specific peanut butter.
She checks on the ingredients, and happily adds a jar to her trolley.
Sam’s eye is drawn to the suggested recipes with peanut butter, as her family doesn’t eat much of it so this could help avoid throwing a partially full jar away in several months. She selects to add the missing ingredient to her trolley.
Sam has added everything she wanted so she goes to review her trolley before checking out.
The UX details
Usually bought with
Based on wider customer buying habits, these items are recommended to the customer as cross-selling opportunities.
Need to be careful that recommendations are still obviously related to main product and not just coincidental.
Recipes with…
Using the supermarket’s extensive recipe database, what the customer already has in their trolley and what the product page is for, recipes can be suggested.
Future research questions:
Are we displaying all the product details customers are looking for? What about irrelevant ones that are just cluttering the page?
Could data such as ingredients or packaging be used to personalise search results for a user’s preferences?
Step 6 - Trolley page
Sam scans down the list of items to check if anything is incorrect or missing.
She notices the kitchen roll in the ‘have you missed’ section and realises she is running low, so adds a package of it.
The UX details
Suggested/seasonal recipes
This part of the screen can be populated with one or more suggested or seasonal recipes, based on items in the customer’s trolley, to foster inspiration and encourage experimentation.
These should be where the customer already has most/all of the ingredients, so is only a small up-sell if at all. This low barrier to trying should encourage more uptake.
Have you missed?
These recommendations are based on products that customers by regularly, but infrequently, based on their order history. Examples could include, oil, kitchen paper and washing powder.
If a customer only buys these every third or fourth order, they are easy to forget. Having the system prompt could help avoid this pain point.
Future research questions:
Which of the current sorting and filtering options are used, how often and by how many customers?
What mental sorting model do customers have that could be defaulted?
Top part of the trolley page
Bottom of checkout page, featuring the ‘Have you missed’ recommendations
Results & next steps
This piece of work was received overwhelmingly positively, so much so that the C-suite wanted me and the design lead to start working with their UX team and start implementing some of our recommendations sooner.
However, this work was presented at the start of the pandemic, which meant that only a few days after our presentation this work was paused. The team has moved on to other projects, so when (and if) this project is being picked up again it's likely that another team will bring it to life.