These days, online shopping and grocery delivery have made life much easier for grocery shoppers, especially for people with disabilities or busy schedules. However, these modes of shopping do not involve customers in the item selection process, specifically for fresh produce where people have different needs and preferences.

Through UX research and design, I introduced Co-Shopping, a shopping mode offering a real-time interactive shopping experience, giving customers full control over their purchases from the comfort of their homes. Customers can see and guide a store assistant via live video streaming while they pick items using the in-store app's AR navigation. Additionally, the Co-Shopping Family feature enables shoppers to video call family members in the store for item selection assistance.

Project Overview

Have you ever been dissatisfied with grocery delivery and wished you had more control over how your items were selected? I designed a new shopping mode called “Co-Shopping” to empower grocery shoppers to weigh in during the item selection process, to enhance user engagement and satisfaction.

Problem

Currently, online grocery delivery lacks the ability for users to inspect items, especially fresh produce, often resulting in selections that don’t match their preferences (e.g., overripe or underripe, small or large fruit). In contrast, in-store shopping can be inconvenient and time-consuming.

Grocery shoppers—especially busy individuals and people with disabilities—need a way to shop online with greater control over item selection, ensuring they can make informed choices without the challenges of traditional shopping.

Additionally, landfill waste is a major environmental issue right now. Urban Market aims to create a cultural impact on sustainability by promoting eco-conscious habits but needs a way to engage conscious customers effectively.

Business Objectives

Urban Market enhances grocery shopping by making it more accessible, interactive, and sustainable.

• Improve Accessibility – Empower people with disabilities and busy shoppers through real-time, interactive shopping.

• Boost Engagement – Strengthen connections between customers, store assistants, and farmers.

• Promote Sustainability – Reduce food waste through the Compost Program and support local produce.

• Increase Loyalty – Increase retention with Membership perks, including discounts and premium services.

• Revenue Growth – Boost sales through personalized shopping experiences and innovative technology while reducing returns.

• Leverage Innovation – Integrate AR, AI, and live video for a seamless shopping experience.

By aligning business goals with user needs, Urban Market creates a smarter, more inclusive grocery experience.

Goal

Our goal is to empower grocery shoppers, especially busy individuals, and people with disabilities, to have greater control over item selection by providing an online user-friendly platform that enables real-time communication with store assistants while gathering items and ensures product quality, making grocery shopping more convenient and efficient.

Moreover, Urban Market needs to promote its story and brand by emphasizing its sustainable and environmentally friendly vision.

Product

Urban Market is a high-end, fully responsive grocery shopping website designed for a hypothetical local grocery store with four branches in San Francisco. The website aims to improve accessibility and customer satisfaction with the following key features:

• Co-Shopping Mode: Shop online and schedule a live session with a store assistant via video streaming to guide them in real-time as they pick items.

• ChefBot: An AI assistant that helps with product recommendations, answers questions, and assists in populating your shopping list.

• Compost Program: A sustainability initiative that reduces landfill waste and methane emissions by allowing customers to drop off compostable waste at designated locations for store credit rewards.

• Community Page: Strengthens Urban Market’s story and vision by showcasing farmers and store assistants, with a focus on customer care and sustainability.

• Membership: Offers exclusive perks like extra discounts and free Co-Shopping assistance.

By integrating AR technology, live video, and real-time collaboration, I redefined online grocery shopping, making it more user-centered, accessible, and interactive.

Design Process

Empathize with user

Define user needs

Ideate solutions

Design and prototype solutions

Test solutions
and iterate as needed

Empathize

User Research

To validate the problem, I conducted 10 user interviews with grocery shoppers in San Francisco who had experience with both online grocery delivery and in-store shopping. Participants had previously used grocery store delivery services or third-party apps like Instacart. The research aimed to analyze shopping behaviors, pinpoint challenges, and identify opportunities to enhance the overall online grocery shopping experience.

I designed key questions to identify common pain points in end-to-end online grocery shopping experiences. Here is a sample of questions I asked during interviews:

• Have you ever faced challenges while shopping for groceries online? Can you describe them?

• Have you received a grocery item that didn’t meet your expectations (e.g., freshness, quality, incorrect item)? If so, how did you handle it?

• Would you be open to having groceries delivered directly to your fridge? Why or why not?

• ...

Define

Insights and Key Findings

I used Affinity Diagramming to categorize the data collected from participants and identified common themes and trends to synthesize the insights. Here are key findings from my Affinity Diagram:

• 90% of users reported experiencing dissatisfaction with delivered items.

• 70% of users wished they could communicate with the person picking their groceries in real time.

• 50% of users expressed interest in the “delivery to the fridge” feature.

• 30% of users emphasized the importance of sustainability, expressing a preference for companies that prioritize environmental responsibility.

These data-driven findings guided the design toward addressing these pain points and enhancing the overall shopping experience.

Personas

Using the insights from user research and affinity diagram, I defined distinct relatable user personas that guide design decisions.

Based on insights from user research and Persona's problem statements, I identified key challenges in the grocery shopping experience. These "How Might We" questions helped guide the design process, focusing on addressing these pain points and enhancing the overall user experience.

• How might we make online grocery shopping more interactive and accessible for users with disabilities?

• How might we give customers more control over product selection when shopping remotely?

• How might we create a seamless and stress-free grocery shopping experience for busy individuals?

• How might we enhance trust and transparency in online grocery shopping?

• How might we provide a seamless delivery service that ensures groceries are stored correctly in the fridge and meet the customer's preferences?

• How might we build a sense of community by connecting customers with farmers and store assistants?

Goal Statement

Our responsive grocery shopping website should let users shop online with more confidence and control, which will affect users who prefer online grocery shopping but want more influence over item selection. I introduced an online grocery shopping mode named, Co-Shopping, which allows users to have a live session with a store assistant while their items are being picked, ensuring users receive their exact preferred items and substitutions.

I can measure the design effectiveness by tracking user engagement with the Co-Shopping mode, analyzing completion rates for Co-Shopping sessions, and gathering user feedback on satisfaction and confidence in purchases.

Ideate

Competitive Audit

During the ideation phase for finding candidate solutions, I conducted a competitive audit to evaluate how existing grocery apps address similar challenges. By analyzing the features, user flows, and overall experiences of competitors like Erewhon, Target, Walmart, The Market, and Amazon Fresh, I identified gaps in the market and opportunities for differentiation. This analysis provided key insights into areas where my app could deliver unique values, guiding the development of innovative features and usability improvements.

Inspiring Screenshots from Competitive Audit:

Brainstorming & Cost Analysis

During the brainstorming phase, I explored a wide range of ideas to address the challenges identified in user research. Using "How Might We" questions, I generated multiple solutions aimed at improving grocery shopping convenience and accessibility.

To assess feasibility, I collaborated with an ML engineer to evaluate each concept based on its complexity and impact. We categorized ideas using the Impact vs. Effort matrix, prioritizing solutions that:

• Had the highest potential to improve key performance indicators (KPIs).

• Directly addressed user pain points.

• Balanced innovation with practical implementation.

This structured evaluation process led to the development of Co-Shopping, a feature designed to enhance the grocery shopping experience through real-time collaboration.

User Journey for Co-Shopping Experience with a Store Assistant

User Journey Map

I mapped out the flow of personas’ journeys, which helped to reveal the benefits of creating a co-shopping feature and delivering to the fridge service. For example, as Edgar needed a way to have control over product selection without physically going to the store, Edgar’s journey can be laid out as below.

Main Solution: Co-Shopping Mode

I designed a mode called “Co-Shopping” that enables real-time collaboration between a customer and a store assistant or between family members during the shopping process. This is how the co-shopping feature would be embedded among the online shopping modes offered by Urban Market.

1. Pick-up: Order online and collect at the store pick-up station.

2. Delivery: Order online and a store assistant gathers and delivers groceries to your address.

3. Shipping: Order online and non-perishables will be shipped to customers.

4. Co-Shopping: Order online, schedule a Co-Shopping time, virtually join the store assistant to gather your items in real-time, and then a store assistant delivers groceries to your address.

Two Co-Shopping Modes

• With a Store Assistant

  As the store assistant gathers your items using AR navigation in the grocery store app I previously designed, you can connect with them through the Co-Shopping feature and video call to guide item selection, such as checking fruit ripeness or selecting a substitution from the available options in the store. This feature is especially helpful for individuals with limited mobility or disabilities, allowing them to shop more independently and feel as if they are in the store. Once shopping is complete, they will deliver the items to your door—or directly to your fridge if you select the 'delivery to my fridge' option.

• With a Family Member

  Users can add trusted family members to their co-shopping Family. When a family member starts shopping at the store, the Co-Shopping features become active. So, family members at home can join the shopping in real-time and communicate with the shopper via chat or video call to guide the shopper. The stay-at-home family member can also edit and share the shopping list in real time, making it easy to add items or help choose the right one.

By integrating Co-Shopping, Urban Market redefines the grocery shopping experience, offering users greater convenience, accessibility, and personalization while overcoming the limitations of traditional online and in-store shopping. This feature is especially beneficial for people with disabilities or limited mobility, allowing them to virtually be in the store and supervise the selection of the items they need.

Design

User Flows

To put the Co-Shopping solution into action, I designed several user flows showing placing a co-shopping order and using the co-shopping process.

Placing a Co-Shopping order

Co-Shopping process

Site Map

Moving forward with the design of the responsive website, I structured the website as shown below which helps organize content logically to ensure a more intuitive user navigation experience.

Wireframing

Next, I created wireframes to visualize the key screens users would encounter while completing core tasks. This step helped transform abstract concepts into tangible interfaces.

Low-Fidelity Prototype

After developing wireframes, I created low-fidelity prototypes to test the core interactions and user flow. The goal was to validate the overall structure and ensure users could navigate key tasks without confusion.

After each step, I conducted usability tests to identify areas of the prototype that were unclear or lacked intuitiveness. Based on the feedback, I iteratively refined the design to ensure a more seamless and user-friendly experience.

Design System

To maintain consistency across the pages, I developed a design system that standardized visual elements, components, and interaction patterns. This system ensured that both designers and developers could work efficiently while delivering a cohesive experience to users.

The design system included predefined typography styles, ensuring clear and readable content across all screens. I designed the logo and established a color palette that balanced accessibility with brand identity, while reusable UI components like buttons and cards helped streamline the design process.

Mockup Samples

After refining the low-fidelity prototypes and incorporating user feedback, I developed high-fidelity mockups to represent the final design. These mockups showcase the product’s visual style, typography, color palette, and CTA elements.

Home Page

My Shopping Lists

Fresh Produce

Profile

Store Map

Composting Program

Orders

Co-Shopping Order

Membership

Cart: Pick up

Cart: Shipping

Cart: Delivery

Cart: Co-Shopping

Checkout

Placed Order

Sign in

ChefBot

Community

Career

Co-Shopping with a family member

Your partner, John, is currently active in the store.

You can contact them or add items to their list under the Co-Shopping section on the website.

Co-Shopping with a co-shopper

Your store assistant, Co-Shopper, is currently active in the store gathering your items.

You can contact them or adjust your order under the Co-Shopping section on the website.

On mobile

On laptop

Managing the Co-Shopping family

You can add trusted people to your Co-Shopping family. You can share your shopping list with them and get a notification when they are active in the store.

High-Fidelity Prototype

After finalizing the visual design and structure, I designed and developed a high-fidelity prototype that closely resembles the final product. During the design process, I had the following goals in mind.

• Designed a clean, intuitive interface emphasizing accessibility & usability.

• Used contrast & typography for readability.

• Ensured seamless navigation between pages and shopping modes.

The following hi-fi prototypes show different user flows and key features of my design.

Placing a Co-Shopping order

Set a co-shopping order for tomorrow 10 am to 11 am.

On laptop

On mobile

Test and Iteration

I conducted 5 rounds of usability tests at each stage to identify areas that were unclear or lacked intuitiveness in the prototype. Based on users' feedback, I iteratively refined the design to enhance clarity, functionality, and overall user experience. This process ensured that the final solution was both user-centered and effective.

KPIs and product metrics

• User Engagement & Adoption:
  • Active users – Track DAU and MAU.
  • Feature adoption rate – Measure first-time usage of key features like Co-Shopping, AI Assistant, and Visual Search.
  • Retention rate – Percentage of repeated Co-Shopping users.

• Shopping Efficiency:
  • Cart completion rate – Track purchases completed from shopping sessions.
  • Time saved – Measure time reduction using AI-driven shopping lists and Co-Shopping.
  • Reduction in returns – Track decrease in return rates due to confirming items through Co-Shopping.
  • Shopping list creation – Track the use of AI Assistant for generating personalized shopping lists.
  • Visual search usage – Measure adoption rate and success of the visual search feature.

• Accessibility & Inclusivity:
  • Accessibility score – Track WCAG compliance.
  • Device usage – Monitor mobile and desktop traffic for responsiveness.
  • User feedback – Measure inclusivity through surveys and reviews.

• Revenue & Retention:
  • Average order value (AOV) – Track the average spend per transaction.
  • Purchase conversion rate – Measure the percentage of sessions leading to sales.
  • Customer lifetime value (CLV) – Track long-term value of retained customers.

• Customer Satisfaction & Support:
  • Net Promoter Score (NPS) – Measure user willingness to recommend.
  • Support inquiry rate – Track customer support requests and issues.
  • Customer satisfaction score (CSAT) – Measure satisfaction post-interaction with customer support.
  • Satisfaction during Co-Shopping – Measure user satisfaction levels during shared shopping experiences.

Final Thoughts

This case study highlights my ability to identify user pain points, conduct research, design solutions, and create responsive interfaces that enhance user experiences. My work on Urban Market demonstrates expertise in:

• User-centered design & research

• Prototyping & responsive design

• Innovative UX solutions (AI, AR, remote collaboration)

• Accessibility & inclusive design

I am excited to bring this level of innovation to future UX design roles!