“Shared Shopping: Enhancing Collaboration in Grocery Lists- Zepto”

Design an intuitive and user-friendly experience to implement a shared shopping list feature within the Zepto

Rajani K
8 min readDec 10, 2023

A Sprint based Product design Project completed within 16 days

The Weekend Grocery Scramble: A Problem We All Know

Imagine this: It’s Friday night, and the house is buzzing with activity. The kids are bouncing off the walls, dinner plans are looming, and the fridge is looking a little…bare. You (or someone you know, like Sirsha, a busy working parent) scramble to create a grocery list, only to realize your partner has completely different ideas for meals. Text messages fly back and forth, forgotten items lead to mid-week delivery top-ups, and the dream of a relaxing weekend fades.

This is a familiar scenario for many families. But what if there was a better way?

Let me introduce Sirsha, a working parent, who juggles a demanding schedule and household responsibilities. how traditional grocery shopping will be and what problems she is facing.

This case study explores the challenges of traditional grocery shopping, particularly for busy families planning weekend meals. I will delve into the story of Sirsha and Satya, a couple facing this very struggle. i will then showcase a solution — a shared shopping list feature within a grocery delivery app — designed to streamline the planning process, foster communication, and ultimately, bring back that sense of weekend calm.

Short on time? Watch the 3-minutes project overview video below.

Let’s Go ……..

About Zepto

Zepto, a startup based in Mumbai, offers a 10 minute grocery delivery service. Worked with 86 dark store owners in 13 different areas in 2021, generating over a million deliveries.

Problem statement

Design an intuitive and user-friendly experience to implement a shared shopping list feature within the grocery delivery product. This feature aims to enable users to create, manage, and collaborate on shopping lists with their family and friends. The goal is to streamline the planning and shopping process while fostering real-time communication and coordination.

Core Users

  • Families (parents, roommates, couples)
  • Friends or housemates who share grocery-shopping responsibilities

Impacted Business Metrics

Improved Customer Retention: A user-friendly shared shopping list feature can increase user satisfaction and loyalty to Zepto’s grocery delivery service.

Average Order Value: Collaborative lists may lead to a broader range of items being added, potentially increasing the average order value.

User problems it’s Solving

  • inefficient Planning: Difficulty coordinating grocery needs and creating a unified shopping list among multiple people.
  • Missed Items: Forgotten items or discrepancies between what family members think needs to be purchased.
  • Duplication of Efforts: Redundant list-making across different devices or platforms.
  • Miscommunication: Difficulty communicating changes or clarifications about grocery needs in real time.
  • Unnecessary Trips: Extra trips to the store because of missing or forgotten items.

let me walk you through the refined approach I’ve developed to streamline and enhance the overall grocery shopping process.

Some Assumptions Made

  1. Users find traditional paper-based or shared document shopping lists inconvenient to access, update, and maintain collaboratively.
  2. Users find creating and editing shopping lists with traditional methods (paper, shared documents) to be time-consuming and inefficient.
  3. Users, especially those in shared living situations, prefer a collaborative approach to decision-making when it comes to planning and executing grocery shopping trips.
  4. Users feel that long lines at the checkout counters can be frustrating, particularly during busy times, leading to an overall negative shopping experience.
  5. Users planning events or gatherings with diverse needs struggle to maintain a centralized communication and organization platform for tasks and items.

Research

I started research which includes secondary research and competitive Analysis

In Secondary Research, i went through various articles to understand consumer behaviors for shopping, how engaging or how familiar with the collaborative shopping feature

Secondary Research insights

Few Insights from Secondary Research

  1. Convenience is king: For 76% of shoppers, convenience is their top priority.
  2. Easy Access to All Devices: The cross-device experience is also expected to include checkouts with personal details already completed on whichever device customers finalize their buying journey
  3. Coordinating group purchases presents a significant friction point for users. The lack of a centralized platform leads to communication breakdowns, missed discounts, and overall inefficiency.
  4. With shared carts users avoid duplicate purchases and save money.

I conducted comprehensive research on direct competitor apps like Walmart, Amazon, to gather valuable insights.

Insights from Amazon

Insights from Walmart

After analyzing research and competitors’ insight i created journey mapping to understand pain points of users

Journey Mapping

Pain points observed :

  1. Users face challenges while collaborating with family
  2. family members might not adopt to collaborative feature
  3. Handling Duplicate items is hectic
  4. Budget constraints
  5. Overwhelming item display — Lack of smart suggestions
  6. Users might be frustrated if the app struggles to recognize specific items or preferences accurately.
  7. Users could face communication gaps within the shared list, leading to misunderstandings.

Lets Ideate the feature

Wireframing

Wireframes

UI and Component Architecture

Typography

Icon components

color styles

Components

Final Solution

Before going to the final Solution I did 2 more iterations

UI Iterations

After finishing the design prototype, I tested it with users to see if it met project goals. I gave them tasks to do and watched how they did them, paying attention to what they were trying to achieve and how they behaved.

Here are the insights from my peers and users

  1. users might tend to feel share list as share to something users
  2. share button in cart page is not prominent
  3. Icons are inconsistent
  4. users might confuse with settings button in the list page
  5. The delete option might be prominent
  6. no proper instruction on what to do next while creating list

Some key decisions I took along the way which significantly reshaped the final solution.

1. Optimizing Visibility: Placement and Naming of the List Feature”

Initially, I considered placing the new list feature prominently in the first fold of the home page, using it as a carousel banner, and adding it as a navigation item at the bottom. However, during peer reviews and usability testing, concerns arose about the name “Share List,” as it suggested instant sharing, potentially causing confusion among users.

In the second iteration, I addressed this by renaming it to “GroList” to better reflect its purpose. Additionally, I introduced an icon in the search bar at the top for enhanced visibility and accessibility. This change aimed to create a clearer association with grocery lists and improve overall user comprehension.

2. How to help users while creating a shopping list for the first time

I went through multiple Iterations of the create shopping list screen to finalize the one that would give the best user experience.

Below is an overview of the iterations

create List

In the initial iteration, I assumed users would find it easy to create a shopping list. However, during usability testing, I observed that users were looking for additional information and were curious to learn about new features. In subsequent iterations, I focused on providing clearer information and guidance to enhance the overall user experience, ensuring that users could easily understand and utilize the new features.

3. Adding items to list

Add Items to the list

  1. Strategic Call to Action: Initially, I planned to incorporate a CTA button labeled ‘Add item.’ However, after realizing the potential for additional clicks, I took inspiration from successful competitors such as Flipkart and Walmart. Understanding the user preference for efficiency, I opted for a text box approach. This allows users to seamlessly add items by typing, promoting a more immediate and user-friendly interaction.”

2 . Optimizing User Interaction: Share List and View List Placement: While testing the feature with my peers, it became clear that users were facing confusion on the screen, and struggling to figure out the necessary actions. The initial set of icons proved to be perplexing, especially for those unfamiliar with the feature To tackle this issue, I went through several iterations to reposition the icons and opted for those that conveyed actions more intuitively. Utilizing the “Attention Insights” Figma AI plugin proved beneficial in understanding the focal points for users. This iterative approach aimed to improve user understanding and create a more seamless experience within the feature.

below is the overview of the heatmap generated by ai

heatmap by ai

Here is Final Solution

Home page

Prototype

Prototype links :http://tinyurl.com/43bjjjf3

Prototype

Future Scope

However, looking to the future, there are several ideas and opportunities that pop up in my mind to enhance the onboarding process further

  1. “I aim to integrate a built-in chat feature that facilitates seamless communication among users, empowering them to collaborate and reach informed decisions effortlessly.
  2. Introduce a public profile feature, granting universal access for users to view their lists while imposing restrictions to ensure that only invited individuals have the privilege to edit the shopping list.

Key Learnings

  1. Time management: learned to know manage time efficiently to achieve each milestone
  2. Taking advantage of AI: “attention insights” ai really helped me while making screens for touchpoints and feedback for UI

Thanks for reading this case study! Feel free to drop any comments!
You can reach me at LinkedIn or rajanidevi.gonalla@gmail.com

#Studentforlife #UXMCommunity #UX #UXdesign #Productdesign

--

--