Virtual Grocery
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.
Objectives
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.
Incorrect items
Ineffective order inspection
Long Process time
Design Process
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.
Describe your image
Describe your image
Describe your image
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
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...
Final...
Reflection