The secret to designing a better online supermarket? Fewer features


Our user-centred approach uncovered customers' real problems and showed why so many online supermarkets get it wrong.

How did we do?

Grew at twice the rate of nearest competitor (7.2% year on year)
Increased market share by 1%
Positive customer response and a seamless increase in sales
Since the start of our work with cxpartners we have become user-centric design fans. We're convinced.
Ellen Brasse – Head of Marketing & Sales, coop@home

The challenge: tackling complexity

Online grocery shopping is notoriously difficult for supermarkets to get right. How do you take a store with over 20,000 products and make it easy for users to find the 40 or so they need every week? How do you make sure a customer buys the right size of a product? Most online supermarkets fail. Customers find the experience stressful and unsatisfying.

Coop is one of the largest Swiss retailers, with a network of 100’s of Coop Supermarkets. coop@home is their online grocery store. Their old website suffered from a cluttered design, confusing navigation and cumbersome searches. It was making shopping hard.

Coop had researched their competitors and came up with a long list of features they thought they needed for their new site. But the cost of building and maintaining those features adds up. Plus, the clutter of extra features is distracting and overwhelming for customers.

But which features were most important? What would provide the best customer experience? And what would enable them to scale?

We wanted to provide value to Coop and to create something simple, and delightful for their customers.

The solution: start with the customer

We began by understanding how customers shopped in Switzerland. We watched them in Coop’s stores and online. We knew if we did this, we could work out which features would add the most value.

We realised that many of the features that make online supermarkets feel complex are really failed solutions to some basic problems. Instead of copying competitors, what really mattered to their customers was doing three things brilliantly:

  1. Make it easy to find the correct items
  2. Make shopping quick
  3. Make it easy to add items to their basket

1. Finding the correct items

With so many products in store, coop@home’s navigation had over time become overwhelming. This is a common problem. Features such as ‘favourite items’ are supposed to fix this, but they just give the user another task. We looked deeper.

Most online supermarkets list items by popularity or price. But to shoppers, this looks like a random jumble of products (no one looks for the twelfth most expensive cheese, and everyone expects to find a large packet of spaghetti next to a small one from the same brand).

So we worked with customers to perfect the categorisation of items and to put the right information about those products in front of them. We had to ensure this would work in three languages. As with all our work, we tested, refined and tested again.

2. Making shopping quick

When people use an online grocery shop, they typically add around 40 items in quick succession. Our job was to make this process as quick as possible.

Our research into how people wrote shopping lists gave us an insight into how to do this. We found that the words people wrote down as reminders were rarely product names. For example, people write ‘pasta’ on their list, but they don’t actually mean ‘pasta’, they want ’spaghetti’, or ‘fusilli’ or ‘penne’.

We took this idea and built it into search and browse. Now, when you search for ‘pasta’, your results include quick links to specific pasta types.

Making it easy to add items

Even details like buy buttons are complex for online supermarkets. You need to be able to add more than one item, know how much you’ve bought, and the buttons need to work well on your laptop, tablet or mobile phone. Plus there needs to be an explanation of ‘business logic’ like stock limits.

The humble ‘buy’ button can end up being a complex barrier.

People mostly only ever buy one of a particular product. Our new buy button was optimised for this behaviour. A single button that you press once to add an item to the basket.

However, sometimes people do add more than one item. Frequently that’s done using dropdowns or +/- interactions that are inefficient, inaccessible and don’t work well on touchscreen devices.

Our ‘add to basket’ button supports touch, mouse and keyboard input making it easy for all users regardless of device. Additionally, it elegantly handles issues like hitting stock limits and other business logic.

What happened next

With a radical overhaul of navigation, functionality and visual design, we expected some pushback from customers and an initial dip in sales, even though we’d tested our designs thoroughly. In fact, customers took to the design seamlessly.

Testing early meant we got valuable user feedback without over-investing in detailed design. It meant we could experiment, knowing the prototypes could be easily changed.

The future

For coop@home, the user-centred approach was new. But they discovered that it helped align teams across the business and gain consensus, even for radical changes. It’s a change that we’re now helping coop@home to adopt across other retail categories from furniture to beauty care.

Though change is particularly hard in the online grocery area, our customers have responded very favourably.
Ellen Brasse – Head of Marketing & Sales at coop@home
Daniel Harris

Want to find out more about user experience work in the retail sector?

Contact Daniel Harris, Experience Strategy Director: