Collaborative Grocery List App

Designing a collaborative grocery shopping experience that makes shared tasks visible, coordinated, and effortless.

Role

UX Designer

Role

I designed a collaborative grocery list experience focused on making shared shopping easier to coordinate in real time. Through user research, I explored how people currently divide grocery tasks, communicate while shopping, and keep track of what has already been purchased.

The research revealed a gap between simply sharing a list and actually coordinating around it. I focused the design on three core interactions: real-time updates, claiming items, and collaborative completion. These interactions make it clear what has changed, who is responsible for an item, and what has already been picked up.

I prototyped and usability-tested the experience, using the findings to refine how item ownership and completion are communicated. The final concept transforms a basic checklist into a lightweight shared workspace that reduces unnecessary communication and helps everyone stay in sync.

The Problem

Grocery shopping is often a shared task, but grocery lists are typically designed for individual use. When multiple people contribute to the same list, it can be difficult to know what has changed, who is responsible for an item, and what has already been purchased.

This often leads to unnecessary back-and-forth communication, duplicate purchases, and uncertainty while shopping.

The Solution

I realized a solution was to rethink the grocery list as a shared experience, where people can easily see changes, coordinate responsibility, and stay up to date on progress without relying on separate messaging apps.

Research

To understand how people coordinate grocery shopping, I conducted lightweight user interviews with 5 people who regularly share grocery shopping with a partner, roommate, or family member. I also reviewed existing grocery-list apps to understand how they currently support shared shopping.

What I wanted to learn

How do people currently divide grocery shopping responsibilities?
How do they communicate when shopping together?
What happens when someone adds or purchases an item while another person is shopping?
What information do people need to feel confident about the shared list?

Key Findings

Shared lists don't feel collaborative

Participants could see the same list, but they didn't always know what other people were doing with it. When something changed, they often relied on text messages to clarify.

So what’s the UX challenge?

Ownership is unclear

Participants could see the same list, but they didn't always know what other people were doing with it. When something changed, they often relied on text messages to clarify.

People need visibility into progress

Participants could see the same list, but they didn't always know what other people were doing with it. When something changed, they often relied on text messages to clarify.

“How might we make a grocery list feel like a shared workspace without making it feel complicated?”

These findings revealed an opportunity to make collaboration more visible throughout the shopping experience. I identified three key interactions that could directly address the challenges users faced: real-time updates, claiming items, and collaborative completion.

Interaction Design

I translated the research findings into a simple interaction model that supports collaboration at each stage of the shopping process. Instead of treating the grocery list as a static checklist, I designed a flow where each item has a clear state from being added, to being claimed, to being completed. This creates a shared sense of progress without adding extra steps.

User Flow

Wireframes

Key Interactions

Real-Time Updates

When a collaborator adds or changes an item, the update appears on everyone’s list immediately. A lightweight visual cue helps users notice what changed without interrupting their shopping.

Claiming Items

Users can claim an item with a single tap when they decide to purchase it. The item then displays who is responsible for getting it.

Collaborative Completion

Once an item has been purchased, the shopper marks it as complete. Instead of simply removing the item, the completed state preserves who purchased it.

Prototype

The prototype focused on the primary collaborative flow rather than trying to design every possible feature.

Usability Testing

I tested the prototype with users who regularly share grocery shopping with someone else.

Participants were given realistic scenarios rather than being told exactly which buttons to use.

Tasks

Task 1:
"Your partner just added milk to the list, and you're going to buy it. Show me what you'd do."

Task 2:
"You've claimed the milk and picked it up. Show me how you'd update the list."

Task 3:
"You're looking at the list and see that someone else is getting bananas. What does that tell you?"

What I evaluated

Could users understand when the list had changed?
Did they understand the difference between claiming and completing?
Could they tell who was responsible for an item?
Did the completed state communicate enough information?
Did users understand that their actions were shared with the other person?

Key findings

Testing revealed that users understood the overall collaborative concept, but the distinction between claiming an item and completing an item needed to be clearer.

Some users initially interpreted checking an item as simply saying, "I want this," rather than "I purchased this."

This led to an important design refinement: the interface needed to explicitly communicate the two different states.

Iteration & Outcome

Based on testing, the interaction was refined to make the item's lifecycle more explicit:

Before

□ Milk

Claimed

□ Milk
Maya is getting this

Completed

✓ Milk
Picked up by Maya

This made the progression easier to understand:

Needed → Someone's getting it → Picked up

The final experience turns the grocery list from a static checklist into a lightweight collaborative workspace.

The key takeaway was that collaboration doesn't require a separate chat experience or a large number of features. By making changes, ownership, and progress visible within the list itself, the product can eliminate much of the unnecessary coordination that happens around grocery shopping.