top of page

Virtual Grocery

Frame 55.png

Project overview

This is a two-week project. This project aims to create an interaction design project based on recent problems I encountered. The challenge is to create a final deliverable prototype with A-Frame and Glitch. The Item Checker is An AR/ VR program technology that helps supermarkets inspect online orders.


Improving online grocery workers' work experience and increasing online grocery order accuracy for customers.


How often do you get the wrong item when ordering groceries online? Leaving bad reviews might not help, soVirtual grocery is here to minimize incorrect online grocery orders. 

Untitled_Artwork 4 1.png

Incorrect items

Ineffective order inspection

Long Process time

Design Process

Group 13884.png

How can we bring better purchase experiences for customers and a comfier workplace for grocery staff with VR?

Faster order preparation, faster delivery

Less order problem, less stress, more time


Instacart: Market Analysis

  • Many sales and item choices

  • Most of the sales match with the physical store sales

  • service fee is needed

  • most of the prices match the physical store prices

  • Different brand choices

The existing competitor I focused on was Instacart. Instacart partners with bigger groceries like Walmart and Real Canadian Superstore. The app highlights the advantages of different stores.

Dive into reviews to better understand customer needs and possible areas for improvements within Instacart.

"Buying what I actually want'

Interviews: Market Analysis

System Mapping: Brainstorming Activity

With interview outcomes and online reviews from competitors, I created a system map of customer and stakeholder interactions.  This brainstorming activity was to analyze and figure out the root problems within online orders. With this activity, we ​went through existing online reviews.  

Problems mainly exist in the order sorting and delivery area

  • Inaccurate orders

  • delayed delivery

  • product damage

  • incorrect items


Joey & Leanne: User & buyer persona

At the beginning stage of our research, I struggled to confine to a target persona for the service as I tried to take all the online review personas as our target audience for this project. The previous service flow chart shows that the main problem occurs when staff are preparing orders. 

Group 13895.png

Customer Journey Map

Service Blueprint

Minimizing order preparation time with VR scanning shortens customer wait time and grocery staff workload when checking for online grocery orders. 


Wireframe: Building Solution

Building from scratch without experience with VR tools, we started the screen layout with UI wireframe structure while keeping the VR features in mind.

User Testing: filtering solution

A script testing was prepared for all four wireframes were given to 4 different users. Out of the 4, this was the one that had the best user flow.

Add on:

DraftXR: Prototype & Testing

AdobeXD & DraftXR

For the med-fidelity prototype, we decided to build on a similar site that requires no coding as we were under time restrictions.

Testing Outcome

 “Navigation buttons are more attractive to aim at the right side rather than the left.”

“Since the employee can be busy making the orders, it’s best to decrease questions asked during the using process, so less time spend on reading and clicking through yes and no.”


Aframe & Glitch: Mid-fidelity prototyping

Aframe & Glitch

Group 13924.png

With trials to add a "Scan Order" Image, I got inspired to make a chunky button instead.

For the final prototype, we proceeded with the challenge of using "Glitch," HTML, javascript, and 3D assets to build VR mockups.

The files that aren't compatible at any reason, it's never worth putting extra time to make things work

Designing a VR experience requires careful consideration of the user experience.  about how users will interact with your environment and how to make the experience seamless and enjoyable.

Lessons Learned...



I learned the significance of analyzing user interaction and the system of an existing application and created an inspired service design with a med-fidelity VR prototype. By creating a VR experience,  I learned the unique features of VR to tell stories in new and innovative ways. Despite having produced a basic demonstration of my scenario in a brief timeframe of two weeks, I am eager to create a final working app and VR prototype with consistent visual design and polished mockups.

bottom of page