Grocery/Recipe List to Cart Extension

Challenge

As someone who meal preps on a weekly basis, I find it time-consuming to manually add every item from my grocery and recipe list to my online Walmart cart. I already know what I need, but searching for each product and ensuring I have the right quantities (like kg or lbs) is a hassle.

Goal
Design a chrome extension that streamlines the process of adding groceries to the Walmart cart by allowing users to copy and paste their entire list, converting measurements into quantities. This chrome extension will save time and make the shopping process more efficient for weekly meal preparing.

Target Audience

Busy Professionals/Families: People with limited time to grocery shop, who want a fast, easy way to add items to their cart without manually searching for each product.
Active Lifestyle: Those who follow strict meal plans and need precise quantities (kg, oz, lbs) of ingredients to meet their dietary goals.
Desktop Users

Research & Discovery

To understand user needs and behaviors, I conducted a survey with 10 participants to gather insights on their grocery shopping habits and preferences. The survey focused on identifying pain points in transferring grocery lists to online shopping carts, while the interviews provided in-depth feedback on how users might interact with a feature that automates this process.

I’ve included slides with the key findings to illustrate the main themes and user needs identified through this research:

Design Solution

For the design and prototyping phase, the focus was on creating a simple, intuitive interface.

High-Fidelity Mockups:

Store Screen: Displays stores the user can select to shop from.
Home Screen: A clean input field for users to paste their grocery lists.
Product Matching Screen: Displays products matched to the list, with options to adjust quantities or switch brands.
Checkout Screen: A final page where users can select how they would like to checkout, in the extension or redirect to the checking out.

Here’s a look at the initial prototype that I tested with 5 participants:

User Testing

I interviewed 4 participants to test the Chrome extension prototype and got some great feedback on what worked and what needed tweaking. I synthesized the findings with an affinity map, categorizing and grouping feedback. The participants pointed out a few areas the chrome extension could improve in, like making the product selection process smoother by giving users the ability to select different varieties of a product, displaying pricing for each product and it’s variations. Additionally, participants wanted more guidance throughout the process, such as each screen having descriptions. Using their feedback, I made adjustments to make the chrome extension more user-friendly and aligned with what users actually need.

Affinity map to synthesize the user feedback (click on the image to view the Miro board).

Recipe List to Cart Chrome Extension Prototype

Here’s a look at the second iteration of the prototype based on the findings. Click on one of the screens to view the prototype:

Conclusion

Working on this Chrome extension design challenge was an incredibly fun and rewarding experience. It allowed me to explore creative solutions for simplifying the grocery shopping process while considering user needs and preferences.