Grocery Vision

A glimpse into the future of grocery shopping

Role

Team leader
UX / XR designer
Spatial prototyping

Date

September 2024

Context

Stockholm XR hack 2024
🏆 Winner of the Runner-up Award in the Utility & Design category (Sponsored by Meta)

📄 In Short

Problem Statement: Meta has heavily invested in R&D for the Metaverse and devices like the Meta Quest 3. They sponsored this hackathon to accelerate app development for their devices. As a participant, I needed to come up with a compelling idea and assemble a team to compete in the hackathon.

Challenge: How might we use augmented reality to help users gain better control over grocery shopping and enhance their experience?

Methods: User flow, wireframing, prototyping.

The resulting design won the Runner-up Award in the Utility & Design category, despite the current impracticality of wearing a bulky headset in a supermarket. The jury appreciated the proof of concept and believed this type of application will become relevant in the near future, when such devices are as compact as normal glasses.

❓ Problem Statement

Millions of people with food allergies face stressful and time-consuming grocery visits, carefully reading labels or scanning barcodes with apps to ensure products are safe. This process often results in frustration and leads to buying the same products repeatedly.

How might we use augmented reality to:

Provide real-time, personalized product safety information?
Reduce the stress and time spent checking labels?
Make grocery shopping safer and more convenient for users with allergies?

👁️ Approach

The starting point was analyzing existing phone apps, asking:

How can we improve the user experience with an augmented reality headset?
How can we add value that justifies wearing a specialized device?

I opted for a solution requiring minimal interaction, displaying only essential information next to the product. The dashboard is positioned out of the direct view but easily accessible with a glance downward. The detailed product information is triggered solely when the user picks up an item. Finally, the cart's digital twin updates automatically to streamline the checkout process.

⏯️ Timeline

Before Hackathon:
Design

Researched existing phone apps
Spatial design
Wireframing
Prototyping in space (shapes XR)
Prototyping in Figma
Presented the idea and assembled a team

During Hackathon:
Adapt and Refine

Led the project and coordinated with developers
Video script and production
Presentation and live demo to the jury
Awarded Runner-up in the Utility & Design category

🛒 Spatial Design

I began by drafting key functions we could develop within the 48-hour hackathon:

A dashboard that remains easily accessible.
Indicators above products showing compatibility with the user's allergies.
A surface that appears only when the user picks up a product.

✏️ Wireframe

Dashboard Positioning: Placed by the cart handle for easy reach; ensure visibility isn’t blocked.
Overlay Toggle: Simple click toggle, positioned for quick hand access with a large enough button.
Allergen Settings: Accessible allergen settings with clear, intuitive icons and toggles.

🥽 Prototyping in space

I used Shapes XR on Quest 3to prototype interactions and iterate on the design. By focusing on ergonomics, safety, and ease of use, I refined the design through multiple iterations:

Overlay Visibility: I redesigned the shelf overlay to maintain clear product visibility, ensuring users could still view products without obstruction.
Dashboard Shape: The dashboard was reshaped from a rectangle to a trapezoid to minimize blind spots, improving user safety and reducing the risk of accidents.
Content Organization: The dashboard content was simplified into two main lists—the shopping list and the shopping cart—for easy navigation and a smoother checkout process.