In July 2016 I got an email from Viu, a German/Swiss start-up who sell handmade eyewear in Germany, Austria and Switzerland to come up with a concept for their Virtual Try On site. I'm a big fan of VIU's minimal design brand and I was happy to challenge myself to create something which I would use as well.
After trying out the feature I faced with multiple problems and whey too much to describe all of them, but I would like to point out some main points which ruined the whole user experience.
Viu applied a Like/Don't like solution which is pretty similar if you use Tinder. It's a widely beloved pattern, although its probably not the best choose for this project. Finding the right frame is time consuming and you have to get lucky to find it.
Let me explain why it's not working with another sample (just in case you really don't need glasses). You probably visited a restaurant or ordered a pizza online for example. How do you choose? You browse the menu first and pick some you consider to order right? Here instead, imagine that the waiter is bringing you random meals and asking you: do you like it or not? How long would it take to find the right meal which you would eat? A lot of time right? And after x rounds you just gonna walk away. This is what exactly what is happening here. You cannot browse or go through a list to select one just click the shit out of your mouse and if you skip one you might like, there is no going back.
I know that using new technology patterns on a website is cool (parallel scrolling, cards etc) but this is not how people choose frames at all.
Based on the Occam's razor principle the navigation and the whole experience should be the same when a client turns up in beautifully designed VIU shop.
If you take a look at that beautifully designed store, what do you see? There are glasses and mirrors right? We just need to transform these benchmarks to digital.
Let the user see the result
Another problem of this feature that it's useless for people who cannot see. I'm wearing glasses mostly all the time and what I really miss as an experience on these Virtual Try On sites is a zoom function. Why? Because if I take my glasses of I see things blurry. It's not a problem for people who have perfect eyesight or wearing contacts all the time. For me for example it's time consuming to go to the bathroom and change the glasses to lenses. Why don't we help the user with a zoom in/out function to not to have troubles with this. Hence, you take your glasses off and you adjust the zoom which scales the preview up and down based on your sight. Let me show you.
This is gonna be funny. Thanks to VIU, I was able to try some of their frames at home. Why not? So I'm going to give this short presentation by using their products. By the way, Bravo guys if you are reading this.
The result if your diopter is less than +/- 1 or you wear contacts
This is how the whole feature works in theory and how users' expect what they'll see.
In reality the result is pretty far from the ideal one. My diopter is around -4.0 so I couldn't see the result clearly. I tried to put my face closer to the screen but then my face didn't fit into the scanner area and the 3D object just vanished.
I doubt that we can touch the source code of the face scanner (but it would be great for an automated, less painful, and more accurate solution), so lets work with what we have. What we could do is adding a slider, which based on it's position can resize the container up/down.
If you have Short-sightedness (Myopia) you zoom in
If you have Long-sightedness (Hyperopia) you zoom out
I know that these features can "brake" the beauty of the app but if your goal is to make users satisfied, then giving them the best experience is the least you can do.
Lead the user
Another problem I found was the "Ask your friends" function which has two options: asking your friends or Viu by sending an email (seriously?) about your choice.
First of all: asking the retailer gives no trust. Why? Because their goal is to reach a higher profit, thats how business works right? Therefore if I'd choose a frame which cost 200.00 euros and doesn't fit to the shape of my face or my style, the retailer will say "yeah sure it's perfect" anyway. Asking your girlfriend/mom whoever is also not an option. It should be your decision not someone else's. What if they know nothing about design/style or which shape fits for you. Not the mention that this communication uses email which is pretty oldschool. If I could send my picture via WhatsApp or Facebook Messenger, Snapchat etc., it would be okay, but email forgettable. God knows when the recipient will get it and going to reply.
Ask ourselves, do we really need this feature? How many people use it per day? The user has the right to try the frames at home and can take selfies which can be sent via a preferred chat app.
If we want to help the user the select the best choice, I would simply add a filter/search option where user can find glasses for the shape of her/his face.
Epics & Design stories
I collected the features which I would love to have as a user (maxed out completely I guess). Collecting these features helped me a lot to figure out the proper user flow and navigation.
View all products
- Filter by gender
- Filter by categories
- Filter by viewed
- Filter by favourites
- Filter by cart
- Select colour
- Add to favourites
- Add to cart/basket
- Add to "Try at Home" (frames only)
- Remove from favourites
- Add to cart/basket
- Add to "Try at Home"
- Remove from basket
- Add to "Try at Home"
Try at home
- Remove product
- Order products
- See all tried products
- Select specific product
- Reset history
- Toggle mirror size
- Mirror Zoom in/out
- Set smart filter
- Select face shape
- Reset filter
Based on the design stories I created the wireframes which I tested in inVision and refined until I found the best navigation system.
Viu has a really clean black and white brand what I really like. Viu uses an Adobe Typekit typeface which has a web option only so I couldn't use it in my design but for presentation purposes Proxima Nova works fine.
Even though how simple a feature seems on the surface, it can be pretty challenging and complex if you dig yourself in it. I really liked to work on this project and I hope I can challenge myself later as well because there are many-many things to improve on the site.
I hope you liked it, see you soon!