Online Grocery UX Design

Metro

Student project at Juno College

  • UX/UI design
  • UX research

This was a student project undertaken as part of the UX Design fundamentals course at Juno College. The task was to analyze, critique and redesign a UX flow for an online grocery delivery platform; I chose Metro Online Grocery.

Mobile phones displaying different screens from the Metro grocery delivery app
View Final Prototype

Research Objective

The goal of my research was to discover the needs and preferences of people in the Greater Toronto Area who use online grocery delivery services. I wanted to find out:

  • What problems are they trying to solve by choosing online grocery?
  • What problems do they encounter when using these services?

Methodology

I conducted one-on-one interviews over Zoom with 3 participants, all young professionals in the GTA with previous experience using at least one online grocery service. I also observed each participant as they used the Metro Online Grocery website. Participants were asked to complete a series of tasks, including searching for and adding items to their cart, editing their selections, and proceeding through checkout.

Screens from the original Metro website:

Original search results screen
Original product page
Original cart screen

I used affinity and empathy mapping to synthesize the data from my interviews. I also conducted an accessibility audit and heuristic analysis of the Metro Online Grocery website as well as a competitive analysis of six of Metro’s direct competitors.

Affinity map based on user interviews

Insights

One of the key insights was that users were frustrated by an inability to communicate with the person who would ultimately be shopping for their grocery order. They were unable to give specific instructions and were often disappointed by inappropriate substitutions and missing items.

“They had also missed items or substituted items and that’s not usually great for when I’m trying to cook a specific meal.”

– Interview participant

Problem Statement

How can we deliver a way for online grocery customers to communicate specific preferences when placing their order so that it is more likely they will receive the exact items they want and will continue using Metro Online Grocery?

Ideation & Wireframes

I considered the kind of information that users wanted to provide to their shopper and how that communication could be enabled.

In my research, I found that users weren’t visiting product pages while shopping. They were more likely to quickly add items to their cart from the search results and category pages. Thus, I focused my solution on the shopping cart, as all users must visit this page before checkout.

The solution I developed included:

  • an accept/reject substitutions toggle for each item in the cart
  • a way to search for and select preferred replacement items
  • space to add notes for each item

Usability Testing with Low-fi Prototype

I built my low-fi prototype in Sketch and InVision and conducted one-on-one remote usability testing with six participants over Zoom. Each person was given four tasks to complete, which required:

  • accepting the best available substitution
  • rejecting all item substitutions
  • choosing a specific replacement item
  • adding notes to their order
First prototype, cart screen
First prototype, edit preferences screen
First prototype, select a replacement item screen

Key problems that I identified during usability testing included:

  1. Users hesitated when leaving the “Preferences” screen; it wasn’t clear if their selections and notes would be saved.
  2. Users had trouble selecting a preferred replacement item; they didn’t know they had to tap the [+] button to make a selection.
  3. Users found the minimum order requirements unclear; they wanted to know exactly how much more they needed to add to their cart to begin checkout.

Hi-Fi Prototype

I addressed the above findings from my usability testing by:

  1. Adding “Cancel” and “Save” buttons to the “Preferences” screen.
  2. Changing the icon on the button used to select replacement items.
  3. Adding a dollar value to the progress bar to indicate how much more was needed to meet minimum order requirements. I also set the colour of the progress bar to change from red to green once minimum order requirements are met.
Final prototype, cart screen
Final prototype, edit preferences screen
Final prototype, select a replacement item screen

Summary

My solution allows customers to communicate their preferences specific to each item in their cart. They can offer detailed instructions and choose a specific replacement item in case a product is out of stock.

The success of this solution is highly dependent on the shoppers who fulfill customers’ orders; however, if shoppers follow the instructions provided, orders should have fewer missing items and customers should be more satisfied with the items they receive.

View Final Prototype

The final prototype can be used to complete the following tasks:

  • accept/reject substitutions at cart level
  • accept/reject substitutions for the Honeycrisp apple
  • search for and select Golden Delicious as the preferred replacement for the Honeycrisp apple
  • add notes to the Honeycrisp apple
PREVIOUS
NEXT