I noted in a previous post on ecommerce grocery checkouts that standards were low across the industry.
Ahead of most of the pack was Ocado. As a pureplay online retailer its website is its main customer touchpoint so it really has to provide a superior UX.
At the other end of the scale was Sainsbury’s which is relying on a very out-dated and frustrating website.
Here’s a look at the customer journey from start to finish on both websites.
Despite my many years experience of ecommerce, I’ve still never actually bought groceries online.
I’m used to buying fashion, books and electronics online, where you go straight to the product you want and make a purchase.
With grocery shopping it’s different as you’ll likely have a long shopping list, so I’m slightly unsure of where to start.
Basically, what I want is a big ‘Start shopping’ CTA to walk me through the process (Admittedly this is probably just my personal preference and most other people can cope with just getting on and doing their shopping).
Ocado does have this button but it plays second fiddle to the eye-catching carousel.
Over on Sainsbury’s homepage there are offers galore, but it’s not immediately obvious how to start shopping.
Ocado has taken several steps to reassure new shoppers that they’ve chosen the right online grocer.
As well giving me £10 off there’s a positive quote from another shopper, an award from The Grocer Magazine for being the world’s best online retailer, and a list of four reasons to shop with Ocado.
Click the ‘start shopping’ CTA and you’re taken to a category page where you can begin adding items to your basket.
Click to enlarge
With Sainsbury’s I assume you just go ahead and start looking for things you want using the top nav.
Navigating the Sainsbury’s site requires a lot of clicking as each product category has several subcategories, some of which then have their own subcategories.
These are all click-to-open and load in a new page, whereas Ocado uses hover-to-open menus in the sidebar and from the ‘Browse shop’ option in the top nav.
I think Ocado’s approach is more user-friendly as it means shoppers don’t have to keep going backwards and forwards to find the products they’re looking for.
If one menu doesn’t hold what you wanted then you can open a different one just by hovering your mouse over a different category.
Ocado also aids navigation by grouping products into different ‘shops’. These contain products that are related to one another but might not fit within the same shopping aisle in a supermarket.
So for example, there are shops for different world foods (halal, Swedish, French), brands, dietary requirements, or personal preferences such as the ‘sensitive shop’ which has products for people with sensitive skin.
However one criticism here would be that both columns in the pop out navigation menus are labelled ‘selected shops’, which might cause some confusion.
Both sites have pages for special offers, which are hugely important for keeping customers happy and driving up the basket size.
In terms of the aesthetics, Ocado puts a greater emphasis on the product images, which means the actual offers aren’t immediately apparent.
Overall though it’s pleasing on the eye and easy to navigate.
In comparison, the Sainsbury’s offer page is a wall of orange text where every offer begins with the same word (‘Only’).
The result is that nothing stands out and the offers are difficult to decipher.
Search tool and results
Both sites use predictive search, though these screenshots should illustrate which offers the superior user experience.
Ocado vs. Sainsbury’s
In the end I performed a broad search for ‘chicken’.
On Ocado the results page includes:
- Product and meal categories at the top (e.g. roast dinner, breast fillets).
- A side nav with related product categories.
- Filters on brands and dietary/lifestyle.
It also uses endless scroll so new products loads automatically as users navigate down the page.
There’s certainly a lot to choose from, but then this is a vague search term.
Over at Sainsbury’s, the product filters are at the very top of the page which is good for the UX, but there are no category options so it’s more difficult to narrow down the options.
Also, though cross-selling is an important sales tool it’s a bad idea to make a bottle of white wine the first result in a search for ‘chicken’.
I’m going to go out on a limb and say that people probably don’t often visit product pages on online grocery stores.
My reasoning is that shopping for a pint of milk or some frozen hamburgers doesn’t require the same purchase consideration as buying clothes or electronics.
Assuming I’m not totally wrong, it would mean that online grocers need to provide all the relevant information on the category and search results pages.
As a random example, let’s look at the category pages for ‘lamb’.
Ocado prioritises items that are on offer, so the top two rows are all available at a discount.
Each listing has the product name, an image, details of the special offer, star rating and product detail icons (e.g. frozen, organic).
Users can also click on the item to reveal a ‘quick view’ popup that includes more detailed information and a zoom feature to get a closer look at the product.
Both views include a small yellow ‘Add’ CTA.
Sainsbury’s offers the same information and an almost identical CTA. The only things missing are the product detail icons.
It also fails to offer the ‘quick view’ feature, so if you want any extra information then your only option is to go to the product page.
Adding an item
If you aren’t logged in to the Sainsbury’s site and you attempt to add an item to your basket, you’ll be directed to the ‘new customer’ page to register an account.
Ordinarily this would be a huge barrier to purchase, but it’s more excusable for grocery retailers as they need to make sure they deliver to your area before you waste 30 minutes filling your basket.
In comparison, Ocado allows shoppers to fill their basket before registering, but does attempt to prompt users to login using a popup window.
Registration and checkout
After inputting your postcode on the Sainsbury’s website it gives five reasons why you should use its home delivery service.
This is a good way of spelling out the basic benefits and criteria upfront. Shoppers then have to choose their delivery time.
It feels back-to-front choosing your delivery slot before having the chance to add any items to your basket, but presumably the logic is that it’s better to make sure people are happy with the fulfilment costs and timings before they begin shopping.
This page is quite confusing, however. The costs presented in the grid are only relevant if you spend between £40 and £100.
Orders for £25-£40 are charged a flat delivery fee of £6.95, while orders for more than £100 are delivered for free.
Shoppers are supposed to work all this out based on the tiny text box on the right of the screen.
Full registration isn’t required until you enter the checkout process, which you can’t begin until you reach a minimum spend of £25 (this isn’t actually mentioned anywhere though).
The ‘checkout’ CTA is a tiny yellow button on the right-hand side of the screen, which looks incredibly dated.
The checkout itself hasn’t been updated much in the two years since I last reviewed it so suffers from all the same problems:
- The CTAs are tiny so don’t stand out or create any sense of urgency.
- It asks how you first heard about Sainsbury’s – surely nobody can remember that?
- No fields are identified as compulsory, but nearly all of them are.
- It casually adds a £6.95 delivery charge even though I selected a £4 delivery slot at the beginning of the purchase journey.
- The basket summary is displayed only on the last page of the checkout.
- There are no basic UX or CRO features, such as an enclosed checkout or progress bar.
- The final CTA is ‘send order’, which doesn’t mean anything to customers.
Ocado really wants customers to register with Facebook. At every turn it’s the most prominent checkout option.
As an obedient shopper that’s the option I went for, though I had to subsequently register my details anyway so in hindsight there was no point in using the Facebook login.
The amount of form filling is roughly the same as with Sainsbury’s but it appears shorter simply because the design is more up-to-date.
Also, as shoppers choose the delivery slot at the end of the process they know exactly what the cost will be.
There’s also the option of using click & collect, which is available from a select number of locations around the UK such as car parks and tube stations.
Unfortunately there is a weird disconnect at this stage of the customer journey.
Having chosen the delivery slot the only available CTA instructed me to ‘continue shopping’ rather than ‘checkout’.
The next page confirmed my delivery slot and weirdly said ‘welcome to Ocado’, even though I’d already been on the site for half an hour by now.
I then had to select the checkout button in the corner of the screen for the second time.
So, having already booked my delivery slot I now have to go through about five other pages of product options and flash sales before getting to the payment screen.
- The ‘Continue’ button appears in a pop-up at the bottom of the screen so it’s easy to miss.
- The checkout isn’t quarantined so shoppers might be distracted by all the other options.
- And the progress bar counts seven separate stages in the checkout process.
The UX problems with these websites are quite astonishing.
With so much up for grabs in the online grocery market I would have thought these two brands would be trying to ensure they offered a first class customer experience.
But as far as I can tell neither Ocado nor Sainsbury’s has made any major modifications in the past two or three years.
Sainsbury’s website is incredibly dated and throws up so many barriers to purchase that it must put off a huge proportion of potential customers.
As a pureplay online retailer Ocado really has to get the UX right, and though it performs well in the early stages of the customer journey it is let down by a baffling registration process and a poor checkout.