Frames App

Exploring how to make buying glasses a more enjoyable process.

 

Frames App Visual Design

The Problem

Many factors go into choosing glasses frames such as budget, face shape, frame size, etc. Finding the perfect pair can be time consuming and leave customers unsatisfied. Shopping in store can leave one with a limited selection and buying frames online can be risky. Some online brands offer options to virtually try on glasses using your picture. However, this requires users to go to multiple websites to try glasses on from different brands. Virtual try-on can also be inaccurate.

Trying out different sites virtual-try on. 

Trying out different sites virtual-try on. 

My Idea

An app that allows users to virtually try on glasses from different brands using a 3D rendering of their head.

Would this be useful?

I interviewed 5 participants that wear prescription glasses.

 

100%

thought it was a useful idea

 

however only 

40%

thought it would benefit them.

 

The remaining 3 participants only bought frames once a year or less for budget reasons. They also expressed that they would not feel comfortable shopping online as the risk of frames not being a good fit was too high.

Re-Thinking my Target Audience

I reached out to 2 more participants, rather than give up the idea. Since they buy glasses and sunglasses more often, they expressed they would be inclined to use the app.

 

NYC fashion blogger who loves to buy sunglasses

 

stylish woman who has glasses for every outfit

 

Understanding User Mental Models

Using feedback from all 7 participants I began to understand how my app should work. Here are their some of the needs participants wanted addressed:

  • Ability to try on different colors
  • Accurate face rendering and ability to see side angles 
  • Ability to save frames to reference later or compare
  • Ability to share with friends 
  • Sorting frames by style, as many have go to shapes they like

User Flow based on participant feedback

Ideation and Testing - Round 1

After doing some quick feature map sketches, I started to develop interactive wireframes. 

Wireframes and userflow

Utilizing usertesting.com I sent the wireframes off to be tested by people like my target audience. 

  • 3 people
  • Ages 25-55
  • Average web expertise
  • $40,000-150,00
  • Purchase glasses or sunglasses at least twice a year

USER TESTING FINDINGs - Round 1

  • 1 of 3 were not sure what the circles meant. 
  • 1 of 3 didn’t understand the 3D rendering would be of themselves.
  • 2 of 3 thought "browse frames" would lead them to a page where they could see all frames with filter options

 

 

How likely are you to recommend this site to a friend or colleague?  8.6

(0=Not at all likely, and 10=Very Likely)

"Everything functioned more or less how I expected it to and that is always a good sign."

-cjarvis1123

"It'd be really cool if I could upload a picture, and have it recommend great frames for me just based on my picture."

-cjarvis1123

"It's a cool concept and would be useful if I was buying sunglasses or an extra pair of glasses. I like how you can choose 'favorites' and use filters."

-eorlando

"I am not quite sure what the circles mean. Maybe it's a code for the material that it's made of."

-eorlando 

"I really like being able to browse all frames in one place."

-upstateSC

"I would like a side view or, ideally, 360 degree view of how the selected frames would look."

-upstateSC

Designing the Solution

Based on the insights from usertesting.com I revised my wireframes and began work on the visual design. I then sent these off for another round of testing.

Before wireframes, after wireframes and visual design.

Before wireframes, after wireframes and visual design.

Testing - Round 2

I reached out to 2 more users on usertesting.com. 

How likely are you to recommend this site to a friend or colleague? 8.8*

*All 5 users

"I really loved how easy it was to try on the frames - just one click."

-darkbulb

"I would make it so that the 3D rendering also suggested to me what my face shape is."

-kham777

"I liked that it helps you pick out glasses to fit your face shape and it gives you many brands to choose from."

-kham777

"The final version of the home page showed the favorited frames with a big heart over it. That felt a bit distracting."

-darkbulb

Impact

What I Learned

Know your target audience and be sure that is who you are interviewing. Rather than give up on my idea after people told me they would not use it, I realized that I was not talking to the right audience. I gave it another try to see if there was a market for my proposed solution.  

Always remember to do a preliminary run of your test script, and then test it again. I had a few problems with setting up the interactivity of my wireframes and getting it working in usertesting.com. Therefore, a couple participants got confused and had to deviate from the script.

 

WHAT OTHERS SAY ABOUT ME

“Talisha is an intelligent and thoughtful UX Designer with an amazing ability to ask the right questions. Talisha is a skilled researcher, always looking for the best solution. When you combine her ability to probe deeply into a problem with her resolve to find the best solution for her users you have a UX Designer that will challenge the status quo and effect positive change. It has been a pleasure having her in my class and I know she will make a big impact wherever she works.”

— jASON PRUNTY, prOFESSOR & pRODUCT DESIGNER