top of page
Optical VTO
AR (Augmented Reality) based
iOS, Android, mWeb, dWeb
Virtually try on glasses to find your perfect match.
Launched Feb. 2024
About Walmart
Walmart is a Fortune 500 American corporation that owns and operates a vast number of super-centers across the US and around the world, alongside a large online presence as a retailer and marketplace.
About Optical VTO
The optical VTO is one of many features that take place in the product page. As part of the retail process funnel. This feature aim to provide to the customer with more input that will help them get to conclusion.
UX designer
Aaron Thurgood
Content design
Colin Mahan
UX director
Joe Grinbaum
UX reasercher
Somesh Rahul
Product
Shivang Patel
Dev team lead
Ofer Saban
Overview
Problem and solution
Customer problem
While shopping for frames or sunglass online, customers struggle to visualize how a frame will fit and look on them. It create a lack of confidence and high product returns.
Proposed solution
Try it on for optical offers our customers an realistic experience by replicating the in-store experience online and giving Walmart customers the confidence to purchase.
Overview
Market target
280M
Daily online shoppers
in the US in 2023
37M
Daily Walmart customers
12.4M
Yearly glasses bought
online
20% of global online customers
Yearly purchases in the US
Walmart daily market size
Overview
Industry competitor & similar product
Design
User research
(kano)
Feature Recommendations of competitors base on user reviews (Kano Analysis)
Must have
Minimum user expectation
Nice to have
User felt the need to have
Not a must
Delighter for user to discover
Leveraging technology to solve problems
Feature + Need = Benefit
Floating product card
Support LiveAR information
Users want to easily browse more items without exiting VTO
User are not overwhelmed and
can expend the card (if) needed
Expanding product card
Two levels of information
Users want to check for variation of the same product
User can slide from the VTO to other glasses without exiting the experience by swiping
Overlay animation for scanning
Display a vector mask during scan
Users want a fast seamless experience without waiting
User feel accuracy of the scanning and build trust while the glasses are downloaded
Smart image QR sharing
Embedded QR in shared images
Users want to share their photo with friends and easily get back
User’s get an image with all the data they need + a way to track in store if needed
Design
Layout & Wireframes
Design
Full User Flow
Design
Full flow
Try multiples virtual glasses
Easy slide right and left to more glasses
Pick and choose your color and size
click the drop down for more options
Save to list or add to cart
Click on the main CTA or Heart
Design
Entry Point
AR experiences across the Walmart app and site use the same style of entry point from the item page.
Simple floating pill on the main image with the text "Try them on" and an icon helps users understand this product can be virtually tried on.
Design
Scanning the user's face
The technology requires a 6-8 second scan of the user's face in order to place the glasses in the most realistic and accurate fit.
In an effort to keep users engaged we chose to add a visualization if the scan.
User stay focused on the animation and is not aware of the time.
Use feel the scan is very accurate and bring trust in the Virtual try on.
The 3D glasses are downloaded in the background.
Design
Building trust step by step
The process of creating the right mask took 2 approach. 1 a clear minimal vector mask base on skull.
versus 2 a second more free and fashion linear dot lines curved line around the face movements
The shape of the mask
A doted linear but slightly curved lines around the skull vector shape
Design
Scanning process
& messaging
Process behind the progress bar & message. User test show: Only 12% looked at the progress bar and message
After the detection success those are the mask creation steps:
- dots appear on face edges / eyes /nose / mouth edges
- dot connect around the face to create the base
- dots connect around the eyes and mouth
- dots connect between the section nose to eyes to mouth etc...
Design
Floating product card
Introducing a new component to the Walmart design system for AR and LIVE experiences.
80% optical card are without variants. Meanings more colors/textures/sizes.
20% optical card have a bottom extension for them to make additional changes
Design
Browsing for more glasses
The live VTO is a full screen experience with all the component need for the user to make the final decision, Add to cart.
Design
Save & Share
Take a picture with embedded data
Save an image directly from the VTO with all the details and QR to keep track of the item.
QR to track your item instore
Some user might have difficulty to trust the vto Glasses and wish to go in store to try it. with the QR we can track customer from the VTO.
After some extended research we concluded that sharing an image and not a link would benefit better the user. As Optical is part of the fashion industry. it become more of an approach to share direct visual to the user’s social media making their need of feedback the first priority.
Design
User image capture
In order to allow customers who wear glasses to see what they look like using our VTO feature we propose taking 3 photos of customers from different angles.
Multiple image VTO preview
User might want multiple angles to check fitting.
Keep images in user account
The scanning of multiple images happens once and will be working for all Glasses try on.
Favorites with customized image
Once customers’ photos are saved in their profile they can be used on the compared list and on the PDP. The user can now easily compare the visual with the info of the glasses all at once.
Design
Desktop
Omni-channel experience
Supported on all devices with camera
First Walmart desktop Live AR
Wide screen AR. Wider than all competitors analysis
Design
Choose your model
Since most glasses sold on the Walmart site are shot on a clean background it’s hard for customers to understand the proportions, allowing users to choose a model to view the product on, will help customers understand the products better.
Model VTO is a static AR experience.
The exit point is the PDP . Where the user gets the result of the selected glasses on a model.
Design
User testing
We have submitted 3 user testings. Prototype, unintended and realistic.
The reviews were very promising.
Scanning process
Process and intro messages
85%
Felt delighted
General vto card
Minimal product details
100%
Like it
Card sliding
Swipe between glasses
90%
Love it
Sharing feature:
Take a pic and share
80%
Would use
Design
Quotes from users
Post-Launch
Expected Business impact and stats
Overall user testing had great feedback. area where 60% and below result were the must to fix versus.
+3.4%
GMV uplift
-7%
Reduction in returns
“Totally would recommend to my friend and family”
opinion_guy
44
Male
$80,000 - $99,999
United States
“That’s crazy, It look so realistic”
solpol99
42
Male
$20,000 - $39,999
United States
“Never thought it would be possible. ן just want to try more and more”
Rebfig1
30
Female
$40,000 - $59,999
United States
Design
Style guide
Primary & accent colors
Walmart app Primary action color
#0071DC
#fffffff
Background Color
Drop down
General screen
Tab
#F8F8F8
#fffffff
#E3E4E5
Typography color
Primary
On dark
#2E2F32
#fffffff
Typography color warning
Warning
error
Success Text
Success BG
Warning Text
Warning BG
#662B0D
#9B1419
#2A8703
#EAF3E6
#FFE190
#FFF9E9
Detection & scan lines
Layout grid
#FFF200
#DE1C24
#fffffff
Typography
Shadow
bottom of page