UX / UI Case Study : Redesign of a grocery shopping website

For this project I team up with Aurélia et Manon to evaluate the customer satisfaction when it comes to ordering groceries online. First we will make a statement of the Monoprix’s customer’s habits regarding shopping online to identify what are their expectations and frustrations to come up with a solution.

We first did some research to apprehend the market and the brand strategy. Then we read customer reviews about Monoprix and its online shopping service to spot out the main complications.

Interviews

Meanwhile, we interviewed 6 people who are used to order groceries online to ask them open-ended questions about their habits (How often? Why online shopping? How long ordering lasts? How do you prepare for online shopping? Which delivery method? etc.). At the end we showed the Monoprix’s website and asked them to simulate an order to notice the possible difficulties and get to know what the do like / dislike about the interface.

On sticky notes we wrote down the pain points collected from interviews.
We then created an “Affinity Diagram” where we sorted them out into clusters : Browsing, Delivery, Purchase, Display, Marketing. Then we used the “How Might We” technique that consists of rephrasing each problem starting “How Might We” before ideation.
After that we voted for the most relevant problems to work on.

Persona

Thanks to the insight we gathered we were able to build up a persona for Monoprix with her demographics, quotes, needs, frustrations and interests.

User Journey Map

To visualize the information we built a map of the customer journey on which appear a timeline, the navigation steps, the emotions the user feels at each step, the channels and features used. We finally highlighted the pain points.

Problem Statement

“Sarah the dynamic young mother, needs a way to know the availability of a product before payment because otherwise she will feel frustrated not having been noticed before during cart filling, she feels stuck not being offered alternatives.

We will know that we reached our goal if the cart abort rate drops, if shopping process time and the customer’s satisfaction increases.”

On Sketch we built mid-fidelity wireframes that we exported to InVision to link the screens and create interactions.

Here are the steps of our new journey :

• The customer Logs in on the Monoprix’s website
• He’s asked to select a delivery method and a time slot
• All items are displayed and a Call-to-Action “You might also like…” appears below unavailable products
• Customer replace the missing product with one of the suggestions

Now the customer is aware of product availability and can manage it.

Usability test

After this prototype we conducted 5 tests. A test consists of an introduction where the tester is told the context then we, UX designers, observe how the tester browse and accomplish the path. We ask them to think out loud and we take notes. Then, in a second part we redo this path together screen by screen and we ask them about their feelings and what works well / doesn’t work for them.
During the usability tests we have been noticed of two main issues where some testers struggled :

• the pop-up of suggested product is not clear because there is no confirmation button so we don’t know if the new item is added to the cart when “+” is clicked
• there is no explanation about why is it mandatory to pick a time slot first before grocery selection

Obviously, for the short term, the next step would be trying to find a solution for what has been spotted out during the usability tests.
For instance, adding a disclaimer about the purpose of selecting the time slot first and creating a “validate” button when the customers replace an item seem to be a good start for us.

Thank you for reading !