GLASSES.COM VIRTUAL TRY-ON
Virtually try on glasses and sunglasses
before you purchase.
before you purchase.
CLIENT / Glasses.com
MY ROLE / UX Design, UI Design
Utilizing 3Dfit technology, the Glasses.com Virtual try-on app allows you to try on hundreds of pairs of glasses and sunglasses to see what the frames look like from various angles. It's an innovative and engaging way to attract online shoppers while making it a fun process.
PROJECT GOALS
01_
Create an onboarding process that that gives clear step-by-step instructions on how to create an avatar optimized for the virtual try-on process
02_
Design a browsing process that's both familiar to the user and something new to this technology
03_
Design a checkout process that allows for easy editing, the ability to add more products to your cart, and provides clear information on what the user can expect after checkout is complete.
ONBOARDING
The first step, which takes less than 2 minutes, is to hold up your iPad (or iPad mini) so that the front-facing camera scans your face as you turn slowly from side-to-side. You're encouraged to hold the tablet up to a bathroom mirror to stabilize the video recording (it works).
Once this is done, you then asked to flip the iPad around towards your mirror and line up a QR code inside an onscreen box by angling the tablet. This aligns your face and confirms where your two eyes are on your face.
BROWSING / BROWSING DETAIL
Now you're ready to try on some glasses. You'll select what kind of glasses you want, the style and shape, and within a second or two you'll see a virtual pair resting on your captured face. You can then use your fingertip to move your face in a given direction and the glasses stay situated on your nose and over your ears.
SHOPPING CART
The shopping cart is what you would expect from an ecommerce application, with the ability to edit your selections as well as continue to add more items to try on before you finally decide to check out. Once your order has been placed you're then directed to a Thank You page where you have the ability to add your glasses prescription.
CHALLENGES
In the end there were 47 different wireframe revisions across the board, three different design approaches and dozens of features that were added after the whole team thought it was locked down. Every single pixel was explored and every line of code refined multiple times. We routinely started over which meant creating new roadmaps and sprint deadlines. We had to learn to be flexible.
RESULTS
The app was featured in Communication Arts Interactive Annual. Marc Saltzman, Special for USA Today, wrote a featured article about the app in their technology section. The 2013 TED conference invited Glasses.com to present the technology on their main stage. Version 1.0 was featured in the Apple App Store and Edmund McCormack (iAd Sales, Apple, Inc.) reported that Glasses.com for iPad was their most successful retailer app download campaign in iAd history, both in terms of downloads and cost per click.
