Case Study — How to Improve Online Grocery Shopping with CoursesU

Estelle D
8 min readSep 6, 2020
Photo by sydney Rae on Unsplash

France is one the biggest user of online grocery shopping platform with 23% of the population using online grocery shopping services in priority over the classical grocery shopping services (source: HoppsGroup). And the Covid19 definitely made that figure bigger.

You might think that with all these users, online grocery shopping is a quick and easy experience, that the platforms are super efficient and have amazing relevant features. Well, think again.

That’s why I decided to work on an improvement of an online grocery shopping platform. So that at some point, it can become all described above. Or at least, take that path. And because at some point you have to choose one, I worked CourseU, Super U’s platform.

Pre-Determined Goal

Our goal was to try to find and understand the most urgent pain points users of CoursesU have to face every time they do their groceries. And hence offer them a better and easier online shopping experience.

Setting the Scope

I’ve been saying “I” since the beginning of this story but let’s be honest, the task was slightly too big so that “I” would’ve been able to work alone on this project. I worked with two other amazing UX/UI designers : Justine and Cyril.

We decided to work on the same tasks all together as we have very different background and sensitivity. Therefore we’d be paying attention to different things during the users interviews or focusing on different aspects of the project.

The plan was simple : get to know better the users through interviews and secondary research, build a good persona to relate to their experience, understand their user journey through the website to bring out the best design opportunities so we could state on the problem and prototype the right design to solve it.

Research and Results

First things first, we started with some secondary research. We wanted to have some hints of who our users were and what the online grocery shopping market looked like before digging into the interviews and preparing the interview guide. We found an interesting but pretty depressing fact : 36% of men never ever do the groceries (source: Crédoc).

That’s how we decided to interview women only. They were 6, aged between 23 and 68 years old, living in urban areas and using either the drive or the delivery services, on different platforms. We wanted to know their habits, their use of the platform, their motivations, their goals and, of course, their frustrations.

We got a lot of information on many different subjects. We built an affinity diagram to try to see a bit clearer about it and figured out what was the valuable and actionable subjects by dot voting.

4 themes clearly stood out (among a few others) :

  • The stock level : The women we interviewed were pretty annoyed about the missing product problems. They were never noticed soon enough, they pointed the lack of transparency and possible solutions.
  • Time / practical : These women do their groceries on line to gain time, because they don’t want to waste their energy queuing in a supermarket. They are on a mission. Online shopping must be quickly done and efficiently executed. If it’s not, they get really frustrated
  • The browser / searching : The search engine on most of the platform is not really powerful. They found workarounds but at the end of the day, it should only give you relevant results and that is not always the case.
  • The list feature : Once again, these women’s mission is to gain time and the list feature is highly appreciated on that regard.

So we had our true mission : Enable CoursesU users to buy relevant replacement product based on their purchase preferences when a product is missing.

Didn’t know how exactly do it yet but at least we had a point to look forward to. The next step of our journey would tell us.

Discoveries

After meeting all those very different women, a persona started to stand out. It was based on a very powerful quote one of the interviewee said :

“I hate when they don’t have a product and I need to go to the actual store when it’s exactly what I wanted to avoid!”

So let’s meet with Marie, our busy woman who knows what she wants :

Our persona

Another key point to start defining the problem was when we built the User Journey, putting ourselves in Marie’s shoes.

Marie’s journey

There’s clearly a point when everything goes wrong and this point unfortunately arrives pretty soon on the journey. The missing product is a real bummer. The only good thing is, it comes early in the process, when you’re adding a saved products list in your cart. She still needs a way to work around to find a replacement product. But if it wasn’t annoying enough, the suggestion the platform makes is absolutely not relevant! We did the test ourselves, the replacement product suggested on the (missing) olives detailed page was….leaks. How not to be angry?

It might annoy Marie, it was actually a great opportunity for us and pointed out the problem even more clearly.

Reframing the problem

We went to the core of the problem :

Marie, the busy woman who knows what she wants needs a way to instantly choose a relevant replacement product in case of product unavailability because she doesn’t want to go to the store.

Prototyping

To start solving that problem, we had a crazy 8s session. Well, better call it a crazy 72s! After some argumentation, we came up with the idea of using the already existing pop up window letting the users know if a product was missing when they were adding a list to their cart. The frustrating thing with that (good) pop up window is that it doesn’t give you any other choice but to exit the window and go back to your list; there’s only a “I got it” button.

All we needed to do was to actually make a better suggestion straight ahead and if the suggestion was not good enough, give our Marie the possibility to see more results. As she is a woman who knows what she wants and is in a hurry, we even added some filters to the result page.

We built our User Flow to prepare the needed screens of our prototype and make sure it was a smooth path. All that put together and voila !!!

Usability Testing

It was time to test our idea and proceed to some usability tests. We asked 6 different women in the same age range as our Marie, to try to navigate around the screens.

Here is the scenario we came up with :

“You are a busy woman who knows what she wants and you are in a hurry. You like finding ways to optimize your time. That’s why you do your groceries online. You’re a CoursesU platform’s client, you use it once a week. You are used to navigate through it and have already created saved lists that you use every time you order on the website.

Today you need to do your groceries quickly, just before going to a meeting. You are on the home page, already logged in and have chosen your withdraw point.”

Photo by Scott Graham on Unsplash

We received very valuable insights after the test :

  • All of them liked being notified that a product was missing: “ Oh nice! I like that it’s on its own and ahead, before the check out.
  • All of them noticed there was no exit option on the pop up window: “How do I decline? I’m stuck, there’s no exit”.
  • 5 out of 6 wouldn’t use the filters feature: “I don’t get why they are here at all ! Aren’t the results supposed to be already filtered for me?” but definitely use the “Sort by” option.
  • 4 out 6 liked the “See more suggestions” button: “I like being asked what I want!
  • 4 out of 6 found there was not enough information about the replacement product so they weren’t sure it was suitable”I don’t know if it’s the right capacity, the price is the same but is it the same weight?
  • Half of them didn’t understand if the list had been added to the cart or not: “I wasn’t expecting to be told about replacement product before the amount appeared in the cart. I thought I did something wrong.
  • Half of them thought it was a bit too much of effort to click “See more suggestion”, they wish they had more suggested product on the pop up, in a carousel for example: “I’d rather have more products directly so I don’t have to click on something else.”

Next steps

All good things coming to an end, we left our project at this point. If we were to iterate our prototype and make some changes, here’s what we’d do:

  • Give an exit to the pop up window so our users have the option to search themselves or to drop the missing item
  • Indicate that the products on the lists have been successfully added to the cart before the pop up window shows up.
  • Put more details about the replacement product like the volume or the main ingredients

We’d also dig a bit deeper into theses 2 questions:

  • Should we put more than one suggestion on the pop up window? If so, how?
  • Should we keep the filters on the result page, are they really useful?

Afterthought

Being part of a team is the most interesting, intellectually nourishing, mind-lifting thing for me as a designer. It’s amazing to see how 3 very different persons with very different background can work towards the exact same goal and collaborate so easily.

Thank you for reading. I know it’s not perfect so please leave comments, I’d love some feedback!

Cheers :)

--

--

Estelle D

UX/UI designer beginner, content strategist and manager, wanderluster > www.allez-salut.com (FR only)