Grosho

Rethinking the grocery shopping experience to allow shoppers to to reduce time spent in-person shopping.

OVERVIEW

Role: Product Designer

Platform: Mobile App

Duration: 5 months

Tools: Figma, Google Forms, Adobe Illustrator

As college students with packed schedules, we oftentimes spend too much unnecessary time on tasks that don’t require it. I wanted to dive deeper into the frustrations of in-person grocery shopping and ultimately create a solution to optimize our time in grocery stores.

The Challenge

How might we create a more efficient in-person grocery shopping experience for college students?

The SOLUTION

Flow 1: List Creation

App Introduction
// Shows users their grocery list page with empty state informing how to create new list

New List
// Option to name list or keep autogenerated name (My List #x)
// Option to select store location
// Users add grocery list categories

Flow 2: Add Items

Browse Items
// Leads user to store’s catalogue
// Preview displays price, whether item is on sale, whether item is likely to be out of stock

Add Items
// Edit amount
// Prompts users to select category when adding item to list
// Users are able to move items within list after adding

User Research

I began by conducting user research to better understand the pain points that college students experience when grocery shopping. I aimed to first get a large breadth of insight by sending out a survey to 40+ people. From this, I created an affinity map with the responses to pinpoint the main issues.

Pain point 1:

45% reported their top needed improvement was better access to finding the items they wanted

Pain point 2:

34% reported dissatisfaction with knowing if the particular item they’re looking for is in stock or not before they arrive to the store.

User Problem

Shopper Sam – 20 years old, UC Berkeley student

design

Needs:

To spend less time in the grocery store, considering the commute time by bus already takes so long

To plan his grocery list in a more organized way so he can be more efficient when looking for items

Frustrations:

Feels like he circles through the entire store and the same aisles multiple times

Feels like he needs to set aside the entire morning to grocery shop

College students want to optimize their time spent in grocery stores, but are hindered by items they’re seeking not being in stock and difficulty locating certain items.

I conducted 5 interviews to better understand these pain points and to receive more in-depth insight. From the insight, I defined a user persona to create a more targeted focus for the audience of the product and to keep in mind for future design decisions and a user journey map to outline the experience someone like Shopper Sam might have when grocery shopping.

product concept

User Problem 1:

Shoppers want to locate items more easily

Proposed Solution 1:

Shopping list that categorizes items by product type + store map directory that gives users optimal route

User Problem 2:

Shoppers want to know if an item is in stock or not before they arrive to the store

Proposed Solution 2:

Centralized shopping list that allows users to select the store/location and check if the product they want is in stock

Concept Feedback

Though this is only a personal project, I wanted to talk to developers to get their insight as well as conduct secondary research on the app idea to gauge the feasibility of it–in particular, the store map directory, since the idea felt a bit far-fetched to have an accurate directory of that caliber available for major grocery stores.

💬

“It's not feasible to have database of tens of thousands grocery stores’ item placements unless it’s made to be store specific. There could be some sort of crowd-sourcing gamification system, but even then retailers want customers to walk past the impulse displays. They want us consumers to have to walk around and read vague signs instead of having an exact map.”

Based on this, I decided that the next most feasible option that still improves the pain point of locating items would be to group items that are likely to be found in the same aisle so you don’t just skip past certain items and have to walk back and forth (as seen in journey map). Though it doesn’t exactly help with locating specific items, it creates an initial game plan for users, and regardless, there are already existing aisle indicators that are there to help customers locate items.

This app would go past existing features in grocery stores to make the shopping experience more efficient. Customers scan the aisle markers and see on their grocery list that they have items in that category and they can go and grab all their items and then scan the next aisle sign and the process repeats.

Initial Sketches

After finalizing the product concept, I kicked off the design phase by creating the user flow to initialize the foundation and direction of the app.

I then created low-fidelity wireframes of the screens established in the user flow chart, playing around with the organization of the groups of items.

Mid-Fidelity Mockups

UX Improvement 1: Empty states give clearer guidance for creating new lists than the original “+.”

“I wasn’t really sure where the “+” was going to take me.”

Initial Design: I used a '+' button to let users add lists/items/favorites. While functional, it felt impersonal and disconnected, with the button appearing out of place and not contributing much to the user experience. The design lacked warmth and felt unfriendly, offering no context or support for users.

Final Design: To improve this, I explored alternatives and came across the idea of using empty states. In the final design, I replaced the '+' button with an empty state that provides clear messaging when no lists/items/favorites are present. This not only guides users through the process but also creates a more inviting, friendly experience that feels cohesive and aligned with the app’s overall design.

UX Improvement 2: Replacing horizontal scrolling with vertical scrolling for viewing shopping list items under a category.

“Scrolling sideways slows me down with finding the item I want to check off.”

Initial Design: Users had to scroll horizontally to see items within a category. While it worked, it required more effort to swipe through items, slowing down the shopping experience. It was more focused on displaying the categories than the items.

Final Design: The layout was updated to use vertical scrolling instead. This allows users to see all their items at once in a more intuitive, efficient way, aligning with their desire for convenience and speed when managing their shopping lists. It now is more focused on allowing users to see the specific grocery items they're looking for or looking to check off.

Usability Testing

UX Improvement 3: Centralizing list and category editing onto one dedicated page.

“It was confusing to edit things right on the list.”

Initial Design: Edits to the list and its categories were made directly on the displayed list interface, which cluttered the user experience and made it harder to manage lists efficiently.

Final Design: The editing process was moved to a centralized page, where users can make all changes in one place. This streamlined the experience, reducing confusion and making it easier for users to edit lists and categories without disrupting the main interface.

Final Design

What's next?

Some features I’d like to explore in the future:

  1. Allowing users to create folders for different lists.

  2. Adding custom notes to items.

Key Takeaways

  1. Empathy and User-Centered Research
    One of the biggest takeaways from this experience was the importance of putting users first. It’s easy to assume I know what people will like or dislike, but without real user research, those assumptions can be faulty. By taking the time to understand users’ actual needs and frustrations, I was able to design more thoughtfully and empathetically. This project really reinforced for me that the best designs come from truly understanding who you’re designing for.

  2. The Importance of Continuous Feedback and Iteration
    Throughout this project, I’ve learned how important it is to get feedback often and to keep iterating on designs. By constantly revisiting and refining my work, I was able to improve the product and ensure it truly served the users. This process of iteration really helped me see that design is never "finished"—there’s always room for improvement, especially with fresh insights from others.

  3. Design Beyond Visual Appeal
    This was my first comprehensive product design, and initially, I found myself prioritizing what looked visually pleasing. But as I went through the process, I realized that good design isn’t just about aesthetics—it's about functionality and usability. I had to remind myself that I’m not designing for me, I’m designing for the users. This mindset shift was key to creating something that genuinely worked for them, rather than something that just looked good.