Nath’s Groceries
A grocery app and cross-platform website that helps users find products in-store with live stock updates
My role UX/UI designer
Project duration 3 months
Tools Figma, pen & paper, zoom
Shop smarter, not longer.
EMPATHIZE
EMPATHIZE
User survey
I surveyed 10 grocery shoppers to understand their frustrations in-store, uncovering patterns around time, stress, and difficulty finding products.
71% of participants walked around the store until they found their specific item
57% of participants spend more time than they want to during their typical grocery trip
43% of participants spend 10+ minutes searching for products in-store
86% of participants feel grocery trips are stressful or time-consuming
User Interview
3 user interviews were conducted to explore challenges and pain points related to in-store grocery shopping
Key questions I asked my interviewees:
Do you use any apps or websites to help with grocery shopping? Which ones?
Have you ever had trouble finding a product in the store?
What are the most frustrating parts of grocery shopping?
How long does a typical grocery trip take?
"I don't like wasting time in-store, I want to grab what I need & get out, when I can't find where something is, it throws of my trip"
-interviewee 1
"Sometimes, I don't know if an item is out of stock or if it got moved to a different aisle, it's confusing"
- interviewee 2
"If I had a way to quickly find what I need, it would take a lot of the pressure off"
- interviewee 3
PERSONA
USER JOURNEY MAP
DEFINE
DEFINE
PROBLEM STATEMENT
GOAL STATEMENT
Veronica is a busy teacher who needs an app that lists the exact aisle a product os located at because she is unable to locate items quickly and often feels lost and spends too much time at the store.
Our app will let users locate products in-store which will affect shoppers who feel lost or spend extra time searching by providing aisle numbers and stock availability. We will measure effectiveness by positive user feedback.
IDEATE
IDEATE
HMW
How might we help users easily locate specific items in-store?
How might we reduce the time it takes for users to find what they need?
How might we prevent users from feeling overwhelmed when they can’t find an item?
How might we reduce confusion when a product is temporarily out of stock or has moved?
USER TASK FLOW
PROTOTYPE
PROTOTYPE
Created rapid home-page sketches using the Crazy 8s method and then translated those into digital wireframes for the app.
Usability Testing
〰️
Usability Testing 〰️
Replaced the selection button with clear radio buttons for easier location choice
Swapped out Change Shopping Mode button for a back arrow
Added a Confirm button for location verification
Added a similar items carousel at the bottom of the product details page
Replaced the hamburger menu with a savings tab in the navigation bar
Added labels under each icon in the navigation bar
TEST
TEST
Usability Testing
〰️
Usability Testing 〰️
Changed the View Store Map button to bright orange for better visibility
Added pricing to the similar items carousel
Changed button label from Sign Up for Notifications to Get Restock Alerts for clarity
Mobile Website
〰️
Mobile Website 〰️
Developed paper wireframes for the homepage to explore layout and design concepts
Created low-fidelity prototypes of the homepage for visual and structural clarity
Ensured the mobile website design aligned with the app’s user experience for consistency
Desktop Website
〰️
Desktop Website 〰️
Created wireframes for the desktop site to match the app’s look and feel
Built low-fidelity prototypes to test layout and navigation ideas
Developed high-fidelity prototypes to polish visuals and improve usability
Made sure the desktop experience felt consistent with the mobile app