UI/UX Project  |  GlassesUSA

AR try-on

Project Overview

The purpose of the project is to improve the existing try-on experience on the site. In the previous interface, the user had to upload a picture of himself and mark the location of the eyes with X's. The result was not satisfactory.

Problem and Consequences

When started working on the feature I was looking for ways to impove it and to provide more value to our customers.

I've identified the main issue: the concern of potential customers who are interested in online shopping of glasses, not knowing how the glasses would look in real life.

The opportuinity I've identified is that during the covid outbreak, many people switched to online shopping of glasses (due to a concern to go to a physical store to try on unsterile glasses and closures that were imposed).

Market Research

As part of my research, I've studied over 25 VR/AR apps and websites: apps for furniture shopping that allow the customer to virtually place the product in their living room, virtually try on jewleries, hair colors, make up products and more.

Top issues that came up from the research:
Its crucial to provide the customer with the sense of how the glasses would look like in real life.

To increase the conversion rate its important to provide the customer with a similar experience to shopping in a physical store: allowing him to consider and to consult with a friend or family member which glasses suit him best.

User Study

To understand our customers better and to investigate how our current feature is being used I've used the 'full story' app. I've also consulted the NNGroup and Baymard institute literature to find out how can the feature be improved.
I've found most of the customers to be 45-55 years of age, typically with a high lens and multifocal prescription.

Top issues that came up from the research:
Most of the users aren't technically oriented.

Most users will use the feauture from the desktop, and since they have a high prescription they would struggle to see how the glasses fit.

Its important to allow the users to browse through similar products to increase their confidence in making the best choise for themselves.

User Flow

After reviewing and considering the results of my user and market research I have come up with the following user flow.

Prototype - allowing camera access

I prototyped my design to offer a tangible and interactive representation of the intended product. By using a prototype, I aimed to validate the design concept, gather valuable user feedback, and identify potential improvements or refinements early in the process.

Prototype - refusing camera access

In addition, I created a prototype that shows the user flow when the user prevents access to the camera, providing a visual representation of the process.

Mockups

Allowing camera access: when camera access is allowed the user can virtually try on the requested glasses. Additionally, he can perform the following actions:
Record a video with the glasses on (can be useful for users with a high prescription).

Save a picture with the glasses on (for later offline use or sharing with a friend/family)

Refusing camera access: as part of designing the feature, I also had to provide a solution for users who refuse to grant access to their cameras. In this case the user can upload a photo from the computer, from Facebook or choose a human model (from a given selection) that is close to him in appearance, for reference.

More projects