My Role
Solo Designer
Practices
UI Design
Tools
Figma
FigJam
V0
Date
JUL 2025
Project Overview
Most UK online supermarket platforms are built for solo users, yet grocery shopping is often a shared task in households. This project explores a feature to allow real-time, multi-user collaboration on shopping lists and carts — directly within an online supermarket interface.
Goal
Design a collaborative shopping feature that enables households to co-create lists, track updates in real-time, and complete checkout seamlessly.
Research and User Understanding
To understand the opportunity, I conducted desk research across grocery platforms and user behavior:
Key Insights:
73% of households share grocery responsibilities, but platforms only support single-user workflows.
Over 60% of online grocery orders are placed via mobile — making context-switching (e.g., to WhatsApp or Google Keep) cumbersome.
No major UK supermarket supports collaborative carts or real-time shared lists.
Users currently rely on external tools (Notes, WhatsApp, AnyList), which lack integration and cause friction or errors.
These findings highlight a clear product gap — and user frustration — with collaborative grocery planning.
Lo-Fi Exploration
Using FigJam, I mapped core user flows and sketched low-fidelity wireframes for key interactions:
Wireframe Concepts:
Shared List View: Item checkboxes, avatars showing who added each item, “Real-time sync active” badge.
Invite Modal: Add collaborators via email or link, set permissions (edit/view).
Shared Cart: Show who added what, with grouped subtotals and final checkout button.
This helped me prioritize features and screen transitions for the prototype.
High-Fidelity Design
Using Figma and V0.dev, I built out the following key screens:
Basket View
Displays real-time order totals and collection details
Includes promotional banners (e.g. free delivery thresholds)
Features a carousel of suggested items to increase basket value
Allows inline notes for shared context and communication
Sharing & Collaboration
Generates shareable links via SMS, email, or QR code
Enables role-based permissions (add, edit, remove items, update quantities)
Includes a deadline toggle to help users plan time-sensitive lists
Shared Cart
Groups items by contributor for transparency
Supports quantity editing with user tags and avatars
Reflects updates in real time across all contributors
Checkout & Payment
Clean and intuitive layout with clear order summary and subtotal breakdown
Includes promo code field for discounts
Supports standard payment methods including Visa, Mastercard, AmEx, and PayPal
Confirmation & Notifications
Displays pickup time, location, and order summary
Includes a “Notify Collaborators” section to inform group members post-purchase
