Grocery Grabber is a mobile app that allows users to complete all their grocery-related tasks through one product. This includes list making, recipe storing, shopping, delivery, and even budgeting.
Role
UX Researcher & Designer
Timeframe
March 2023 - June 2023
While there are several grocery related apps that allow people to create lists, save recipes, and order groceries, there isn’t one that does it all.
Problem
We set out to create a “one-stop shop” product that would allow our users to conduct all their grocery-related tasks on one platform.
Goal
As smartphone users living in the 21st century, we experience a cognitive overload of apps and digital products. Grocery Grabber will improve the user experience by compiling all relevant tasks and data into one organized app.
Impact
Design Process
Competitive Analysis
Contextual Inquiry
Affinity map
User persona
UX vision
Lo-Fi wireflows
Mid-Fi wireframes
Hi-Fi UI design
Final Prototype
Research
I conducted a competitive analysis between the websites of two grocery chains- Whole Foods and Safeway.
This provided me with initial insight into some of the successful and unsuccessful areas of the grocery experience.
Competitive Analysis
Contextual Inquiry
After the competitive analysis, I conducted a contextual inquiry to get a more in-depth, personal view of the grocery shopping experience. This method allowed me to be a fly on the wall and witness the experience.
In-Store Findings
Chooses store based on proximity and prices
Uses self checkout because it is more efficient
Uses instacart when she doesn’t feel like going to the store
Struggles to differentiate between items when online shopping
Online Findings
Analysis
After collecting some initial research, I collaborated with one of my peers to compile our collected data into an affinity map. Using an affinity map gave us a better understanding of the grocery shopping experience and how that experience may vary for different users.
Affinity Map
Findings
The affinity map showed us differing user behavior during the list making process, the process of choosing between in-store and online shopping, and the shopping process.
“User 1 keeps a running list in her phone and adds to it the day of her shop. User 2 makes his list the day of his shop using a checklist app on his phone.”
The data collected from the research phase and organized during the analysis phase informed the user persona I created, Grace The Grocery Girl. Creating Grace allowed me to clearly define one of my product’s targeted users.
User Persona
Ideation
UX Vision
After creating a persona, I conducted a UX vision exercise with 2 participants to start considering solutions to user pain points.
During this session, I presented my participants with hypothetical scenarios and asked them to start brainstorming solutions.
This was a fun and creative way that allowed potential users to offer up ideas and features that they would like.
“Grace always gets coupons on her grocery receipts, but she never keeps her receipts because she hates the clutter.”
Key Ideas:
App to scan coupons to keep digitally
scans receipts too to track spending
Connects to grocery list app and suggests frequently purchased items
“Grace finds it annoying that, every week when she picks her meals, she has to type every ingredient from the recipes into her shopping list.”
Key Ideas:
Checklist app to scan recipes and transfer ingredients to the checklist
Has a repository for saved recipes that have previously been scanned
can adjust quantity of list item when user changes the number of portions
The findings from the UX vision informed my development of a low-fidelity wireflow. This process allowed me to envision potential features and screens. This flow shows the user’s process of adding a recipe to their shopping list.
Low-Fidelity Wireflows
1.
2.
6.
5.
3.
4.
1. The user selects “shopping list” button.
2. The user selects “add recipe ingredients” button.
3. The user selects “your recipes” to add one of their saved recipes.
4. The user selects their chosen recipe and confirms by selecting the “add ingredients” button.
5. The ingredients are shown on the users shopping list.
6. The user has a saved coupon for one of their list items. They select “apply coupon.”
Design
After meeting with stakeholders, I created mid-fidelity wireframes that showed some of the interface components and refined features and screens. They remained mid-fidelity because I was still focusing more on the user experience and the function of the app.
Mid-Fidelity Wireframes
Home Screen
Shopping List Screen
Shopping Cart Screen
The next iteration was creating high-fidelity screens for the app. All the decisions regarding features had been determined, so developing the interface and aesthetic was next.
High-Fidelity Interface Design
