Project
Grocery List Feature
Role
UX Designer
Timeline
2024 – 3 months
ABOUT
This project focused on enhancing a grocery list feature within an ecommerce app. The goal was to improve product searchability, boost sales, and enhance user engagement. Through usability testing, I gathered insights and established a usability benchmark for the feature. My goal for this project was to develop a research plan, recruit participants, design user flows, moderate testing sessions, and analyze key insights.
Research Plan
I started this project by creating a project overview doc, identifying a project goal, and creating a research plan.
Project Goal
Gain a baseline understanding of how users interact with a grocery list feature on an ecommerce app
Research Method
Moderate a usability test to evaluate the effectiveness of the grocery list feature
Measure task completion time, number of successes, and errors
Evaluate overall user satisfaction
Recruitment
Posted a form to various online groups with a small reward for participating
Sent a follow-up with details of what to expect and schedule a time
Amount of participants limited due to a lack of responses
Participants
Recruited 5 participants to do usability testing
Wide range of acceptance criteria due to the universal nature of the app
Participants had varying levels of experience in ordering groceries and using apps
Design and Build Prototypes
I then sketched out ideas to visualize concepts and built out user flows for each task. Once the flows were refined, I created prototypes for participants to click through each task.
CONTEXT
Imagine you just logged into an app where you can order groceries for delivery or pickup. You’ve navigated over to the grocery list and want to add items you need for the upcoming week.
Flow 1 – Add an item to your grocery list
There are multiple ways to complete this task, a user can add an item directly through search or select from a group of recommended items.
Flow 2 – Edit the name and quantity of an item on your list
The user clicks the edit icon in the dropdown to modify an item on the list. This action opens an overlay where they can adjust the item's name, size, and quantity.
Flow 3 – Find an item on your grocery list and add it to cart
The user can browse products from their grocery list by choosing a recommended item from the dropdown or searching related products.
Running the Usability Test
I ran the usability test on participants using the following method.
Preparing for the test
Wrote a detailed script ahead of time to guide the session
Performed a dry run with volunteer to ensure the script was clear
Ensured that all prototype tasks were working correctly
Running the test
Greeted participant and gave an overview of what to expect
Requested consent to record video, screen, and voice
Asked pre-test questions to understand participants' background
Guided participant through tasks in the app prototype
Asked post-test questions to gather impressions and suggestions
Analyzing results
Reviewed the recorded videos to observe user interactions
Measured task completion time, number of successes, and errors
Evaluated overall user satisfaction
Gathering Insights
I gathered insights using answers from a survey, pre-and-post-test questions, and video recordings. I measured task completion time, number of successes, and errors to determine effectiveness of design. Here are some key insights from watching the recordings and compiling data.
Survey results
Key USABILITY Findings
Here are some insights from watching the recordings and compiling data, this gave an understanding of how users interact with the app feature.
🔷 Flow 1 – Add an item to your grocery list
Users found this task to be easy and straight-forward, the majority of participants used the type field rather than selecting a recommended item.
🔷 Flow 2 – Edit the name and quantity of an item on your list
The majority of users completes this task, however some expected the checkbox to be the source of action rather than the dropdown.
🔷 Flow 3 – Find an item from your grocery list and add it to cart
All users completed this task, the majority added the item to cart by choosing a recommended product instead of searching.
Design Recommendations
Using the data, feedback, and insights from the recordings, I identified some test recommendations to improve the design.
Recommendation 01
Since some users found it difficult to find the edit button, add a label for each individual action at the bottom of the card.
Recommendation 02
Users expressed interest in having the ability to add an item directly to cart, having a button under product recommendations allows the user to skip the product page.
Recommendation 03
The purpose of the checkmark was unclear to some users, move selected items to a different section of the list and indicate when items are not in the cart.
Project Outcome
I was able to enhance my usability testing skills through this exercise. Next steps would include further testing, iteration, and implementation.