Ironhack use case: Online Grocery Shopping and the Psychology of Choice

A UX case study on how a little nudge to help choose relevant products goes a long way to keep online customers satisfied and see them come back.

Along with two brilliant fellow UX designers, Estelle Djazayeri and Justine Rey, I have embarked on a 10-day Design Thinking project to improve the user experience of a grocery shopping website.

The Company

CoursesU is the online grocery shopping website of Les Magasins U, a French retailers’ cooperative operating in France and its offshore territories.

In 2019, Les Magasins U represented 10,8% of the grocery shopping industry in France. With a turnover of EUR 20 billion in 2019, Les Magasins U has become the 4th retail group in France.

Its online grocery shopping accounted for EUR 615 million of the group’s revenue last year. Les Magasins U has high ambition for their online grocery shopping service: they have invested EUR 140 to transform and modernize their IT and logistics management. Their goal is to innovate and optimize grocery shopping in their customers’ day to day life and make it more practical to meet their expectations better.

This is the homepage of the CoursesU website.

The Challenge

Even though it’s faster to grocery shop online than it is to do it in a traditional physical store, online shoppers often waste time navigating the sections of the website in search of a product. And it all too often happens when the precious item they covet is no longer available.

Estelle, Justine, and I have decided to flex our UX brain and work on a solution to cater to the need of CoursesU customers should they face stock issues when shopping.

Today is an exciting time to assess what works and what does not work for online shopping websites, and especially grocery shopping websites. The French retail industry has seen quite a surge in the demand and use of their online services for delivery or curbside pickup since the beginning of the COVID-19 pandemic. The day after President Macron announced social distancing recommendations and talked all things lockdown in March, all French online grocery shopping websites read outage messages because the unusually high number of visits made their websites crash.

So, now is just as good a time as any to ensure that customers who have been converted to online shopping during the pandemic will continue to shop online. And hopefully, they will keep their business in the store they have started to use during this troubled time.

CousesU redesigned its online grocery shopping website in 2018. But how well does it fare with new customers who now pay more attention to pain points in their online shopping experience?

Our Process

Our Design Thinking process: activities and deliverables.

Justine, Estelle, and I have chosen to rely on the Design Thinking principles to guarantee our problem reframing would serve our users’ intentions well. Our 10-day design project culminated with a presentation to UX designer peers to introduce one prototyped feature that would tackle the issue of unavailable products on CoursesU.

Empathize

We started with four days of research to:

• learn about online grocery shopping habits and do’s and don’ts in UX,
• interview customers of online grocery shopping,
• deliver a persona and an empathy map.

Define

Thanks to our research, it took us roughly one day to reframe the problem.

Ideate

We spent one day to develop ideas and eventually choose one to solve our newly defined problem.

Prototype

We had a one-day wireframing session in Sketch. We went for Marvel to create an interactive prototype.

Test

We carried out 6 usability tests in one morning, and in the afternoon, we worked on our presentation to include a recap, our findings, our process, and how we think we might continue the project.

If you’re good at Maths, you might have noticed that two days are not accounted for in my recap. And you are right. We slowed things down during the weekend, as any designers must do: we only worked on the visual aspect of our deliverables and enjoyed some well-deserved self-care time.

Our Research

First, we created a shared Google doc to have a dashboard that we would use for our research phase: it helped us centralize some data and served as a planner for our user research.

Our Dashboard opened on the Secondary Research tab.

Secondary research

Coming from different backgrounds, Estelle, Justine, and I knew little about the grocery shopping industry. And even if we did so, it still might have been extremely wise to kick things off with thorough secondary research on the subject. So we did.

Here are a few of our secondary research findings.

We found out that:

• Grocery shopping is still primarily done by women in France. This information convinced us to focus on women during our user research.
• Online grocery shopping websites must cater to their customers through a personalized experience, with personalized suggestions based on their previous visits. The Nielsen Norman Group cites three recommendations regarding replacement and substitution products, especially during the COVID-19 pandemic: in the end, customers should have the choice of the replacement and substitution they get.

Courses U rapid analysis

Here are some of our findings after looking at the CoursesU website.

A quick walk through the CoursesU website allowed us to see what works and what could use a little improvement. It was essential to know this before our user interviews during which we would conduct tests as well to learn about our participants’ habits.

• The CoursesU shopping list feature is handy. Customers can create as many lists as they want with different names. They can update them as they shop. It takes minimal effort to shop with them, and you can turn any order in a shopping list as well.
• The overall look and feel of the CoursesU website is clean and helps read product cards easily. Cards feature essential information that serves as differentiators for customers. As we are working on providing a way to help customers make decisions quickly, this is good news.
• The CoursesU website does not provide returning customers with useful and relevant suggestions of a replacement should a product of their shopping list is unavailable. Recommendations are solely based on the content of the cart or based on past orders. While it is nice to have such suggestions right before checking out, it’s not as useful as it should be when you want to avoid searching for replacements.
• While product cards provide useful information that helps avoid opening the product page, one crucial piece of information is missing on the CoursesU website: the expiry date. This article relates the nasty surprises some online shoppers had when they received products gone bad. Who would not be frustrated?

With all this in mind, we proceeded with six user interviews. We took turns doing the interviews and taking notes. We recorded all interviews to review what the participants said. It was a great way to find quotes and refresh our memories after back to back interviews.

Our Interviews and Usability Testing

Here are some of our findings from the user interviews.

Based on our secondary research, we decided to have a panel of participants with women only. 6 participants agreed to discuss with us on Zoom, Skype, and Google Meet. They all lived in urban areas, were either living alone or with their family or partner. Their age ranged from 20+ to 60+. And of course, most importantly, they were all customers of online grocery shopping websites.

None of them were customers on CoursesU, which helped us focus on their habits only. We prepared a short scenario for a test. It would help us see things they pay attention to when shopping online, the features they used, and understand why. For that reason, we asked them to search for the ingredients needed for a pastry recipe.

• All 6 participants voiced their concerns about stock issues (“Choice is important”) and navigation issues on the website they use (“It’s hard to navigate it the different sections of the website and know where we are”).
• All 6 participants use shopping lists to gain time, rely mostly on delivery because they don’t want to carry heavy items themselves. And they all want to have more choices and more control over replacements or substitutions.
• All 6 participants said they cared about the quality of the products. Some had stories of receiving damaged fresh products. Some described the replacement or substitution as being of lesser quality than the usual products they buy.

So now what?

That moment we said “Aha”!

Almost every problem we put up on our Affinity diagram on Mural directly revolves or could be tied to stock issues or choice issues:

• when a product is unavailable
• when there is no recommendation for a replacement
• when a substitution is delivered with no notice
• when the replacement or substitution is of lesser quality
• when a product is missing and is not even replaced
• when a product becomes available while shopping, before checking out
• “I miss walking in the alleys of the store. It’s not the same thing online to find products.”
• etc.

There was a pattern. Online grocery shopping websites do not manage replacements well.

Finding a replacement is taking a toll on the overall user experience of online grocery shopping…

… Because online grocery shopping websites make no recommendation to simplify things for customers.

… Because the online stores do not provide as much guidance as a brick and mortar store do in real life, where it’s nice and easy to walk up and down the alleys.

… Because the burden of the cognitive overload on shopping websites can lead to cart abandonment, and it’s precisely what online shoppers and retailers want to avoid.

Customers want choices but they want little choices too.

This is the paradox of the psychology choice. An experiment was run to see if people were more inclined to choose and buy when they have more choices of a product. It turns out, they don’t. More people act and choose when they face a selection with fewer choices.

This could help us find a way to provide better recommendations on the CoursesU website and ensure customer end up buying a replacement.

Our Problem Framing

Our persona

The very first deliverable we worked on was our persona. It was not difficult to see “her” come to life with the insight from the interviews and the tests.

So please meet Marie, the busy woman who knows what she wants.

She is on the lookout for things that can simplify her everyday life. She lives in an urban area, knows her way around on a mobile phone or a computer.

She has decided to use online grocery shopping websites:

• because she’d rather spend her time not doing the groceries
• because she does not have much time to do the groceries in physical stores
• because she does not want to carry heavy items.

Mary, the busy woman, who does her groceries online.

« I hate it 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 »

The user journey of Marie

We used our research insight to illustrate Marie’s journey when she uses her shopping lists on the CoursesU website to make an order.

The user journey of Marie when using her shopping list shows two design opportunities.

• Here, we can see that her user experience takes a plunge first when she is not given any replacement choice if a product from her shopping list is unavailable.
• It then really plummets when she has to find a replacement all by herself, and she only sees irrelevant replacement recommendations that have nothing to do with the product she wants to buy in the first place. In our analysis of the CousesU website, when trying to find a replacement for a pot of olives, we were given the choice to purchase leeks and cucumbers.

For us, both moments represent design opportunities that must to fixed to improve the overall user experience of the website:

• a recommendation for Marie to rapidly find recommendations in line with her expectation
• better relevancy of replacement recommendations.

Our problem statement

The user journey map led Estelle, Justine, and me to believe that by addressing the first moment Marie’s user experience takes a plunge, we can improve her overall experience until she eventually checks out.

This why we decided to work on the improvement of the pop-up window that currently notifies the customers of the CoursesU website that some products from their shopping list are not available with no recommendation or action other than “OK, I understand”, which simply closes the pop-up window.

Pop up window with an “OK, I understand” button. And no other action.

Consequently, the three of us agreed on the following problem statement:

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 hates having to go to the physical store to complete her groceries when it’s exactly what she wanted to avoid.

We will know that we reached our goal if the time spent on the suggested product pages and the rate of dropped-off cart lower, and if the satisfaction rating on that specific point improves (the score is yet to be determined).

The solution

We chose to wirefrmae a new pop-up window that gives Marie a choice between:

• the proposal of one relevant recommendation of replacement
• accessing a selection of more relevant replacement offers.

Both choices are actionable with a dedicated button.

A wireframe of the new pop-up window, designed by Justine Rey in Sketch.

We debated whether we should give more recommendations in the pop-up windows or not. The Hicks Law that states:

The time it takes to make a decision increases with the number and complexity of choices.

Jon Yablonski further explains that we have to “Use progressive onboarding to minimize cognitive load for new users”.

So, we decided to display only one recommendation in the pop-up window. It will have to be tested with participants.

Now with our solution, Marie’s user journey should look somewhat like this.

I did some storyboard work here.

Our prototype

You can have a look at our prototype by watching the demo below. Estelle Djazayeri has done a terrific voice-over job, don’t you think?

Click to watch the demo of our prototyped recommendation feature in Marvel.

Or you can access it here and test it yourself.

Our workflow

We created a user flow to make sure we did not forget any step during Marie’s whole journey.

Justine designed the wireframes in Sketch, which I eventually assembled in Marvel to develop our prototype.

We then conducted six usability tests with six women who often use online shopping websites. We did two rounds of testing with two different scenarios:

• Scenario #1: the pop-up window provides the participant with a suitable replacement.
• Scenario “2: the pop-up window provides the participant with an irrelevant replacement.

This set up would allow us to see if:

• they spend time on the page with more replacements
• they add the relevant product right away without having a look at more choices
• if they understand and enjoy the new version of the pop-up.

The Conclusion

The outcomes

We had positive feedback on our design during the usability tests.

• All participants managed to finish their shopping using the newly designed pop-up window.
• 2/3 of the participants with Scenario #1 did not hesitate to add the recommended replacement in their cart without checking the other recommendations.
• Quote from a participant on the newly designed pop-up window: “Oh, nice.”

As for things that could still use a little improvement:

• User needs a way out on the pop-up window that allows them to opt-out of the two choices we give them.
• The alignment on the right of the “Add to your cart” button for a better UI readability.
• Some work on the micro-interaction that indicates products have successfully been added to the cart. Today, the cart is highlighted in green in the background as the pop-up window “Ok, I understand” appears. Some participants were not sure if the products from their shopping list that were available had properly been added to the cart. The website must give them a clearer indication.
• Some participants said they would have liked more recommendations in the pop-up window.

In the end

With more time on our hands for the prototype and wireframing work, we could have come up with a more solid prototype, but we were reasonably happy with the outcomes of the usability tests.

By recommending customers few choices, we give them more choices.

It gives them the little nudge they need to make a purchase: they don’t drop off before checking out because they dread browsing the website pages to find what they want, or what could replace what they wanted. The psychology of choice and the law of UX inspired by Hick worked as intended in our tests showed.

On a more personal note, I would say that my biggest takeaway, after this short project, is “Never forget to review your work with UX heuristics”: it could have helped us include a way out of the pop-up window and design better micro-interactions. We might have fared more in our tests and findings. Practice makes perfect, or at least, it helps you learn.

The possible design opportunities we could work on include:

• the number of recommendations on the pop-up window and the results page accessible through the pop-up window
• the assessment of the filters used on the results page
• the wording of the CTAs
• the amount of information provided in the product cards to help customers choose their replacement…

Because indeed, choice is key!

Sound off in the comments below. Or reach out on LinkedIn, Twitter (uxcyril), or Instagram (ux.cyril).