Metro Online Grocery logo
Metro Online Grocery logo

Online Grocery UX Design

Juno College


UX research
UX/UI design

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 user experience flow for an online grocery delivery platform. I chose Metro Online Grocery and my research led me to focus on how users are able to specify substitutes for unavailable items in their order.

Three screens of an online grocery app showing a search results page for butter, a product page for butter, and a shopping cart
Screens from the original Metro website

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 users trying to solve by choosing online grocery services?


What problems do they encounter when using these services?



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 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.

Affinity & Empathy Mapping

I used empathy mapping (what users say, do, think, and feel) and affinity mapping (shown below) to synthesize the data from my user interviews.

Heuristic Analysis

I evaluated the Metro Online Grocery website against Jakob Nielson’s 10 Usability Heuristics for User Interface Design and identified basic web accessibility issues.

Competitive Analysis

I analyzed six of Metro’s competitors, comparing aspects of their online grocery services including minimum order amount, fees, delivery window selection, product information, item substitution, pricing, and loyalty programs.

Colour coordinated sticky notes with quotes from interview participants organized into 13 categories
Affinity map with notes from user interviews


From my research, one of my 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

Six rough sketches with different ways of communicating item preferences when placing a grocery order
I considered the kind of information that users wanted to provide to their shopper and how that communication could be enabled. I used quick sketches to brainstorm potential solutions.

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 in the cart

Hand-drawn sketches of wireframes for product cards with annotations in red

Usability Testing with Lo-Fi Prototype

Three screens showing a shopping cart, an item preferences page, and replacement item search results page with placeholder text and images

I built my lo-fi prototype with 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 for an item
  • rejecting all item substitutions
  • choosing a specific replacement item
  • adding notes to their order

Key problems identified during usability testing

Item preferences screen with a left arrow highlighted in the top left corner


Users hesitated when leaving the item “Preferences” screen; it wasn’t clear if their selections and notes would be saved.

Search results screen with a black button highlighted next to a product. The button has a white plus sign on it.


Users had trouble selecting a preferred replacement item from the search results screen; they didn’t know they had to tap the [+] button to make a selection.

Shopping cart screen with a progress bar highlighted. There is no text equivalent for the amount shown in the progress bar.


Users found the minimum order requirements unclear; they wanted to know exactly how much more they needed to add to their cart before they could begin checkout.

Hi-Fi Prototype

Three screens showing a shopping cart, an item preferences page for a honeycrisp apple, and replacement item search results page with several types of apples

The final high fidelity prototype could 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

In this iteration of the prototype, I addressed the findings from my usability testing by:

Item preferences screen with cancel and save buttons highlighted in the top two corners


Adding “Cancel” and “Save” buttons to the item “Preferences” screen.

Search results screen for apples with a black button highlighted next to a product. The button has two circular arrows pointing to two squares.


Changing the icon on the button used to select replacement items.
Shopping cart screen with a progress bar highlighted. The remaining dollar amount required to reach the minimum order threshold is indicated.


Adding a dollar value to the progress bar in the shopping cart to indicate how much more was needed to meet minimum order requirements.


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.