Online vs. in-store grocery shopping

User Experience & Usability

Before March this year, I saw online grocery shopping as something I might do from time to time, but often felt that the effort of online was greater than the effort required to go in-store. This isn’t the case with other online retailers, but it perhaps feels surprising that some of the big supermarkets don’t have the online experience in the bag yet… sorry.

It goes without saying that 2020 has seen the demand for online grocery shopping sky-rocket. Many websites crashed under increased demand, delivery slots became impossible to find, and at one point several shops stopped onboarding new customers. With these increased hurdles to ordering groceries online, I wonder how new users, and in particular the ones who didn’t shop online previously, are dealing with the experience of shopping online, compared to visiting a physical supermarket.

We had a look at four supermarkets to compare some of the aspects of the online versus in-store experience.

Tesco, Asda, Sainsbury’s and Waitrose logos.

Beginning your shop

When arriving at a supermarket in-person, you collect a basket or trolley (after scrambling around for a pound coin) and are ready to get going. However, grocery websites make sign-in mandatory before adding any items to a basket. This is uncommon for e-commerce sites, as it creates an immediate barrier for users. This sign-in hurdle is done deliberately to prevent later frustrations if customers live in an area where the supermarket does not deliver to, or where certain products are unavailable. Asda and Sainsbury’s do well to offer a postcode checker on the grocery homepage that allows new users to check delivery and collection options before registering on the site. However, none of the supermarkets make it clear that the user is required to sign in first, and place equal prominence on links to ‘Shop now’, which directs users to view products. The requirement to sign in needs to be clear up-front, removing other distractions and setting the user on a clear path from the start of their journey.

Overall, the time taken to register as a new user (and to sign-in on subsequent visits) is much quicker than the likely time taken to get to a physical store. In saying that, the introduction of ‘Scan & Go’ services in supermarkets helps to make the in-store experience quicker by avoiding checkouts.

Sainsburys -Groceries homepage
The Sainsbury’s groceries homepage offers buttons to ‘Log in’ and ‘Check postcode’, however the user’s eye is also drawn to the option to ‘Shop now’

Timing your shop

Many people set aside a specific time each week to do a ‘big shop’ in the supermarket that fits around their schedule and considers how busy the shop will be. When shopping online, the delivery or collection time must be convenient, but other factors are important, including the cost and availability of different time slots. Booking such specific time slots is unique to online grocery shopping, so may not be something a first-time user has experienced before.

Given the current demand, it was surprising to find that Waitrose is the only supermarket to warn users about limited availability for delivery and collection slots when adding items to the basket. This supports the user by leading them to complete tasks in the most efficient order, whilst minimising frustration later in the experience if they lose a slot.

Waitrose - Slot availability warning message
Waitrose provides a timely warning message asking the user if they have booked a slot, to prevent frustrations later in the customer journey.

Once the user has clicked through to book a slot, all of the reviewed supermarkets clearly present distinct options for delivery or collection, with dates and timeslots. The user can also see prices for each slot to allow them to make an informed choice.

On sold out delivery slots, Asda and Tesco suggest users ‘Collect?’ their groceries instead. Frustratingly, this is duplicated repeatedly across sold out delivery slots, regardless of whether a collection slot is actually available at that date and time. Greater accuracy and transparency is needed to improve the customer experience; for example, by removing the suggestions when the alternative is unavailable.

Asda - Collection & delivery tables
Asda presents suggestions to ‘Collect?’ and for ‘Delivery?’ on every sold out time slot.

When shopping in a physical supermarket, besides the opening hours, there are no time or pace restrictions placed on the user. While users are free to shop online 24/7, they must check out within a specified time window to secure their chosen timeslot. This new concept was made clear by the supermarkets, with three of the websites keeping the time visible in the sidebar throughout the user’s shop to serve as a reminder.

Finding items on your shopping list

Shoppers who revisit the same grocery store, often have a pre-defined route through the aisles that is logical and time efficient (and dictated by the supermarkets themselves, of course). When shopping online, the user is given multiple ways to search for and choose items; using the menus, search, or heading straight to the special offers page. Multiple ways of achieving the same task can cater to differences in user preferences and needs, however there are some cases where the online approach to grouping of products differs to the in-store approach.

Menus

In-store, the user must familiarise themselves with the shop layout to find items efficiently. Distinct areas, such as the ‘rolls’ section of the bakery or the ‘fish’ section of the freezer aisle, are usually easily discoverable by systematically wandering from aisle to aisle and by signposting. The same approach can be applied to a grocery website, but the labels used could make or break the customer experience online, where it is more difficult to scan items across different sections.

The websites we looked at offered three to four sub-levels in the menu to help the user gradually narrow down their search for items. The category labels in the online menus were generally concise and understandable, however some items were grouped unexpectedly. For example, both Tesco and Waitrose grouped ‘fresh meat’ and ‘fresh fruit’ under the same top level; this might not meet user expectations as these items would not be located in the same section of a physical store.

Search

In person, the number of items on each shelf can often be overwhelming to look at, meaning that those less visually prominent can be overlooked. Some products that don’t fit clearly into a known section of the store can also be difficult to find, meaning that users may need to ask a member of staff for assistance. One of the main benefits of shopping online is that the user can quickly search for items in the top toolbar, without needing to know what category it fits within. Asda’s search works particularly well by offering a clear dropdown menu of specific items (with images, quantity, and price), allowing the user to save time by adding them to the basket directly from the search area.

Asda - Dropdown search results
Asda offers dropdown search results, so items can be added to the basket quickly.

The user can also search for a list of multiple items on each website, which matches the in-store experience of using a physical shopping list. In person, the user must continually refer back to the list and may not follow the optimum route to pick up items, meaning that the shop can take longer than online, where the user can search for items in any order.

Sorting & Filters

The user’s decision to add an item to their basket or trolley in the supermarket may be influenced by several factors, including the price, brand and allergens. This information must be gathered by scanning the shelves, before making a comparison between the available items to match their needs. Online, some of this work can be done for the user as all of the supermarkets we looked at provided the option to sort and filter results. Repeat shoppers also benefit from being signed in as they can set and recall ‘favourite’ items from previous shops, as well as being able to set a ‘dietary profile’ with Sainsbury’s to flag items.

Adding items to your basket

In a supermarket, the action of adding or removing an item from the basket or trolley is distinctly noticeable. Equally, online the large ‘+’ or ‘Add’ buttons beneath each item make it easy for the user to add items to the basket, with most websites displaying text to confirm the action. A summary of the basket is also always available in a sidebar on the page, allowing users to review the contents more easily than rummaging through physical items. On the other hand, all four supermarkets lacked warning messages or a way to undo the action of accidentally deleting an item from your basket. Offering this option would align the user experience to that offered by other online shops, matching user expectations and increasing trust in the site.

All supermarkets - Item added to basket
All supermarkets visually inform the user when an item has been added to the basket, however some messages are difficult to read.

Paying for your shop

Over the past few years, supermarkets have made in-store payments more transparent by offering ‘Scan & Go’ services that allow the user to monitor the total cost of their shop as they add items to the basket or trolley, whilst also avoiding queues at the checkout. This matches the experience provided on grocery websites, as the user can look through the list and see the price of items in the basket before reaching the checkout.

One of the main drawbacks of shopping online is that items may later become unavailable, leaving the user with substitutions that may not meet their preferences. The user does, at least, have the option of opting in or out of substitutions. Tesco and Waitrose also go one step further and allow the user to add notes to the shopper for substitutions. However, this is still inferior to the experience in-store, where the user has greater flexibility around product choice and meal planning. Supermarkets should explore better ways to meet this need online, to improve customer satisfaction, for example, through communication with the customer to give the option to select from available alternatives.

Most supermarket websites provide a chance to take advantage of missed offers at the checkout, helping the customer save money… or spend money, depending on which way you look at it. Asda and Waitrose display this well on a dedicated page with links to ‘See all products in this offer’. In a physical supermarket it’s often down to the cashier to mention when an offer is incomplete, meaning that customers may miss out on this information.

Waitrose - Incomplete offers
Waitrose clearly lists missed offers, with the option to add more of the same item or view other products available in the offer.

At the end of the online experience, all of the websites we looked at presented customers with a clear order summary with sub-total costs, before asking for payment details. One final bonus of shopping online is that the user can save card details to their account, preventing the need to locate their purse or wallet.

To conclude

Here, we’ve touched on just some of the ways online and in-store grocery shopping experiences differ. Whilst current restrictions have shone a light on some of the areas that supermarkets can improve the online experience, it’s long been an area that lags behind other online retailers. Further consideration of and reflection on the customers’ in-store experience and needs online would help to provide more of that sense of freedom and choice that customers expect.

More like this

Five tips for designing your onboarding experience

Based on our experience of conducting user research and seeing how users respond to onboarding journeys, here are our five tips to consider when ...

Based on our experience of conducting user research and seeing how users respond to onboarding journeys, here are our five tips to consider when designing your experience...

Tablet usability research: case study

We were commissioned to undertake tablet usability research, helping Just Eat develop a deeper understanding of the issues relating to its device...

We were commissioned to undertake tablet usability research, helping Just Eat develop a deeper understanding of the issues relating to its device...

Usability testing

Testing your product or service with your users is an invaluable part of the design and development process. It will identify usability problems and ...

Testing your product or service with your users is an invaluable part of the design and development process. It will identify usability problems and highlight ways to improve the users’ experience...