Grocero
Grocero is a collaborative grocery management app designed for shared households. It helps users track groceries from purchase to usage, reduce food waste, and prevent redundant buying.
Tools Used
Figma / Figjam / Google Docs / Teams
Role & Timeline
Product Designer & Researcher
January 2025 - May 2025
Methods
User Research / User Journey Mapping / Competitive Analysis / Design Audit / Visual design / Prototyping / Testing
Problem Statement
Shared living situations often lead to food waste due to poor communication, forgotten leftovers, redundant purchases, and untracked expiry dates. Most existing solutions are either individual-based, overcomplicated, or fragmented across multiple apps.
“In the U.S., around 43% of total food waste occurs at the household (consumer) level, amounting to approximately 76 billion pounds ”
A large share of this wasted food, still edible is often discarded due to reasons like improper storage, misjudged portions, or confusion over expiration dates
The key questions driving this project were:
Understanding the Context and Values
The following assumptions and values helped shape my research focus. These were later revisited and challenged through user research.
Intended User
Time-constrained individuals who want an automated solution to manage food freshness
Cost-conscious users looking to reduce grocery expenses by minimizing waste
Assumptions About Users
Automation will encourage users to use food before it expires
User Values
Users want a balance between automation and active engagement, where tools assist them but do not entirely replace their role
Users are motivated to save money by avoiding unnecessary grocery purchases
Politics Embedded in the Design Problem Space
This approach assumes that reducing food waste is primarily the responsibility of individuals rather than being addressed through systemic changes
Users manage their own food inventory rather than relying on external businesses or government programs to minimize waste
Competitive Analysis
Criteria
Mealime
NoWaste
Core Focus
Meal planning + grocery list generation
Inventory tracking + expiration alerts
Inventory Tracking
Focuses only on planned recipes
Manual entry of groceries + expiry dates
Expiration Date Management
Not Supported
Expiration alerts + reminders
Barcode Scanning
N/A
For adding items manually
Primary interaction method
Auto-generated from meals
Manual grocery list
Meal Planning
Central feature
N/A
Automation & Smart Suggestions
Meal suggestions based on preferences
Manual input required
User Engagement Design
Clean UX with personalized filters
Functional but could be gamified
Household Waste Prevention
Indirectly, by buying only needed ingredients
Directly, through expiry tracking
Strengths
Streamlined planning & grocery alignment
Strong data structure for home stock
Weaknesses
No post-purchase tracking or expiry data
Tedious input, low engagement
Generative User Research & Insights
To better understand my design problem, I put together some research tools and talked to real users to get a clearer picture of their needs and everyday experiences.
Interview Script & Observational Prompts
I created a semi-structured interview script consisting of 8–10 open-ended questions designed to uncover user experiences, behaviors, and pain points without leading them toward specific solutions. I kept the focus on real-world problems, gradually progressing from broad to specific topics, and included prompts to explore deeper responses. In parallel, I designed 3–5 observational prompts to guide public behavior analysis, specifying what user actions to look for, the context in which they occur, and how I’d document them through detailed field notes.
Click to read the Questions and Observation scripts
User Interviews
Using my interview script, I conducted three 30–40 minute generative interviews with participants who matched my intended user base. These were recorded using my phone and transcribed. I prioritized building rapport, asking open-ended questions, and probing for stories or examples that reveal user context, behaviors, and unmet needs.
Persona Development
Drawing from interview transcripts, key quotes, and prior competitive research, I created fictional personas that represent patterns I observed. Each persona includes a name, age, gender, photo, background, relevant skills, usage context, obstacles, motivations, questions they would ask of the system, and two direct quotes from participants.
I ensured the personas reflect a balance of real user insights and fictional synthesis, while highlighting user goals, frustrations, and external influences. I also wrote a short narrative for each persona to help situate their daily life and explain how and why they’d use the system.
View Personas
User Scenarios and Storyboarding
I created a set of scenarios based on my personas to show how users would interact with the system to reach their goals. These scenarios helped me think through the user journey and will guide design decisions moving forward.
I also designed 2 storyboards that visually show how users move through the system in real-life contexts. Each storyboard highlights key actions, transitions, and environments like shared kitchens or on-the-go grocery updates to explore how the design fits into users daily routines and spaces.
While making these, I focused on where the interaction happens, what users are trying to do, and what devices they’re using. This helped me better understand how the system will actually work in context.
Storyboard - 1
Storyboard - 2
*Images were generated by ChatGPT using the provided shot list as a prompt.
View Storyboard Shot Lists
User Flows
For this part of the project, I started by quickly brainstorming all the tasks and interactions users might have with my platform. From that list, I picked three key processes to focus on and created detailed user flows for each.
Each flow includes clear start and end points, step-by-step paths, and notes on inputs, outputs, and decisions along the way. While mapping the flows, I paid attention to things like functional triggers, possible errors, and how users might navigate through different paths depending on their choices.
Adding Groceries
Claim an Item to Buy
Usability Testing
User Feedback
Mid - High Fidelity Prototyping
For my high-fidelity prototype, I built on the insights from my paper prototype to create a polished, interactive digital version.
I conducted three rounds of remote moderated usability testing on the mid-fidelity prototype of our food tracking app, focusing on core flows: adding groceries, navigating shared groups, and claiming items. Each session was around 15–20 minutes long and followed a think-aloud protocol.
The tests were conducted via Zoom using screen share and Figma prototypes. I asked participants to complete tasks:
Add groceries using receipt scanning
Navigate between shared groups
Claim an item to buy
View what’s expiring soon
After each session, I reviewed what worked, what didn’t, and what seemed to confuse people. Then I made changes to the prototype before testing with the next person.
User Feedback
User Insight
Issue Identified
Design Changes
"Group names should be easier to find"
Group names lacked visibility
Bolded group names and moved them beside Home tab
"Claim hand icon isn’t obviously tappable"
Ambiguous tap targets
Increased padding + added hover/tap tooltip (“Tap to claim”)
"I liked the colors but couldn’t tell if that was the bought or expiry date"
Unclear form labeling in manual modal
Added clearer form labels and headers
"Icons all look the same in size"
No visual hierarchy between action icons
Standardized icon sizing: claim (24px), delete (20px), move (22px)
"Urgent items don’t stand out enough"
Poor visual priority for expiring/low-stock items
Added urgency indicators and color shifts for near-expiring items
"Nutritional info doesn’t show how much it refers to"
Lacks quantity/serving size details
Added serving size labels under nutritional info
"Too much text in item cards"
Information overload
Reduced density by trimming non-essential details and emphasizing hierarchy
Common Issues Across all Users
Final Prototype
Click around this interactive prototype !!
Design Description
Easy Grocery Input
Barcode Scan - Scan items instantly.
Receipt Upload - Auto-fill from shopping receipts.
Manual Entry - Add items yourself if needed.
Smart Categorization
Items are automatically sorted (e.g., Dairy, Produce, Frozen).
Custom categories can be added.
Weekly Freshness Check-ins
Quick 1–5 rating for perishable item condition.
Improves expiration estimates and alert accuracy.
Expiry & Quantity Prioritization
Items close to expiry are shown first.
Inventory cards display quantity and urgency.
Quick actions: Claim, Move, or Delete.
Shared Inventory
Multiple users can manage a single grocery list.
Claims are synced in real-time to avoid duplication.
Main Flow Navigation
Group Bar – Switch between different user groups.
Category Filter – Filter items by type.
Item cards show name, quantity, expiry, and actions.
Easy Claim System
When a user decides to buy or restock an item, they can tap the “Claim” button next to that item. This action immediately marks the item as “claimed” and notifies all group members in real-time, preventing duplicate purchases.
Live Activity Feed
See who added, claimed, or removed items.
Helps with coordination and accountability.
Design Screens
Design Philosophy & Impact
Design Approach
My main goal with this project was to keep things simple and clear. I wanted users to spend as little time as possible figuring things out, while still getting everything they needed from the app.
Values That Shaped the Design
Throughout the project, I focused on three key ideas:
Reducing food waste by helping people stay on top of what they already have
Encouraging teamwork in shared households
Giving users control over how much they want to interact with the system
