Ray-Ban and Sunglass Hut e-Commerce

Virtual Try-On for Mobile Web

Introduction

In June 2016, I joined the Luxottica Innovation Lab as a product designer as part of a 4-person cross-functional team (2 developers, 1 PM, 1 product designer). Our first task was to bring Luxottica’s proprietary virtual try-on (VTO) software to ray-ban.com’s mobile site. We would eventually bring the mobile VTO experience to Sunglass Hut’s mobile site with several improvements (shown near the end of this case study, or click here).

Our team partnered with Pivotal Labs for 4 months in order to give our team a running start on launching VTO on Ray-Ban’s mobile site.

The Challenge

Purchasing eyewear online is a stressful and difficult experience for shoppers. Many eyewear websites, including Ray-Ban and Sunglass Hut, do not provide images of people wearing sunglasses. Without being able to physically try on a pair to judge style and fit, a customer is less likely to purchase a pair online.

The team was tasked to provide a virtual try-on experience that was intuitive and enabled shoppers to quickly try on sunglasses with the primary goal of improving conversion rates on Ray-Ban's mobile website.

My Role

I was in charge of all design-related activities including:

Ideation and Competitive Analysis
I researched our competitors, analyzed what they did well, and conveyed the competitive advantages our product would provide to our audience. I communicated closely with the developers to understand what was possible from a technical perspective.

Product Strategy and Planning
I collaborated closely with the PM pair to define UX features and priorities and advocated for our users. I evaluated our product backlog frequently to ensure features were both feasible and the right thing for our users.

User Research
Throughout the process, I ran guerilla interviews in the wilds of SF downtown to understand whether our product was solving a user need and conducted multiple usability studies with recruited participants to evaluate our prototypes and gather actionable feedback.

UX and Visual Design
I created sketches and whiteboarded ideas before creating mockups in Sketch and prototypes in InVision to communicate ideas with the team. Designs were shared with developers using Zeplin. I also communicated closely with the head of Ray-Ban design to understand their priorities and brand design guidelines.

Art Direction
Due to our research insights, I created a visual onboarding experience that required the use of some model photography and video. I created a script detailing deliverables to a studio to provide still and video assets.

Crafting the Virtual Try-On Mobile Experience

Some Background Info

An iOS Ray-Ban VTO app already existed in the App Store for several years but was getting very little traffic. The virtual try-on codebase was obtained as part of Luxottica’s acquisition of glasses.com and had been untouched for over 3 years. Our team was formed to bring VTO to Luxottica’s e-commerce brands as a web app.

Competitive Analysis

At the start of the project, I researched as many competitors as I could to understand how virtual try-on technology was being used and learn what they were doing well and what pain points customers had with existing VTO experiences.

Ray-Ban iOS Virtual Try-On
The existing app was no longer being supported so it lacked updated models. The onboarding was excessively wordy and some quick research showed that nobody had the patience to read it and some participants made strong assumptions about the complexity of getting started.

The app had the benefit of having access to the native camera APIs, which allowed overlays and visual cues to help with onboarding that iOS restricted in mobile browsers. It used a series of questions or a QR code for scaling glasses to a user’s face.

Ditto
Ditto was already offering a web-based 3D virtual try-on experience. They had a great, concise onboarding experience but required a credit card to scale glasses to a user’s face, which was a major security and privacy concern for users.

Warby Parker
A popular, rising brand in the eyewear space with a positive brand image. During our research, we heard participants mention Warby Parker's virtual try-on several times, but it was no longer available on their site. Through Google, we found it was a 2D, superimposed try-on or people were confusing it with their home try-on where you could have up to 5 physical pairs shipped to your home.

Traditional 2D Try-On
Multiple eyewear e-tailers offered the traditional, superimposed 2D glasses try-on that many people have seen, which required users to upload a photo of themselves and scale the glasses using zoom in/out buttons. The glasses had subpar visual quality and were regarded as a poor user experience. Since this is what most online shoppers had seen and expected when hearing "virtual try-on", the onboarding flow was designed to specifically illustrate that Luxottica’s VTO was *not* a 2D experience.

Breaking existing experiences into a step-by-step process helped me propose some options for our MVP to start discussions and understand technical feasibility.

Understanding Stakeholder Constraints

Understanding our stakeholders’ priorities and the capabilities of our existing virtual try-on code was essential to designing around the strengths and masking the weaknesses of our product. Our stakeholders were primarily interested in the conversion uplift that VTO could bring to their mobile e-commerce site. We would eventually move on to consider other metrics with Sunglass Hut, including return rate, number of product browsed, and add to cart rate.

Stakeholder constraints included:

• CTA would be placed on individual product pages (PDP), but not at higher-level pages
  
• CTA could not cover or obstruct anything on the PDP, since they were conservative about possible negative impact on conversion
• Since this was planned to initially launch in the U.S. but release globally, the Ray-Ban e-comm team set a 3mbps mobile bandwidth requirement
  
• No stock photography models could be used, as it violated Ray-Ban brand guidelines

By understanding our stakeholders’ concerns at the beginning and staying in constant communication, we made sure we proposed solutions that remained strongly in tune with the brand image.

User Research

Ray-ban had already known that a way to see glasses on a human face (any face) was one of the most requested features. Our team held brainstorming sessions to come up with risky assumptions that we wanted to validate. We conducted guerilla user interviews in downtown San Francisco, talking to tourists to get a variety of opinions outside the typical tech-centric SF resident. The PM/design pairs tested several major hypotheses including:

• Willingness to use VTO: “Do people need to see VTO output before wanting to try it?”
  
• Onboarding: “Can customers properly capture VTO video by viewing visual instructions?”
  
• Value Proposition: “Would people take a video of their face to see sunglasses on themselves?”
  
• Share feature: “Are customers are willing to share their VTO output with others?”

For each experiment, we set a “pass” criteria to help us keep focus on our goals. We followed a “pivot or persevere” framework when evaluating which ideas worked.

Surprise!
We had assumed a share feature would be really popular (we hypothesized 8/10 would want to share), but we learned that the desire to share was not as strong as we thought. We ended up leaving share functionality out of our first release as a result.

Understanding VTO's Strengths, Value Proposition & Technical Constraints

Taking the time to understand both VTO's strengths and technical constraints was key to helping us design a VTO experience that focused on delighting our users.

Strengths included:

• Proprietary, photorealistic renderings of the products: this was a significant wow factor for users
  
• 3D-rendered eyewear automatically positioned onto a user's face, no adjustment necessary
• Glasses that were scaled realistically to a user’s face
  
• Being able to rotate your face to view glasses from multiple angles
  
• Being able to try on sunglasses/eyeglasses for one of the most recognizable brands

Some major technical constraints we faced included:

• Rendering times took over a minute, which required a creative user flow to hide
  
• Two scaling questions were required to provide an accurate sense of scale of the glasses
  
• iOS does not allow camera overlays or defaulting to the front-facing camera in browsers

VTO'S Value Proposition

I conducted guerilla user interviews and on-site usability studies throughout our project. One of the biggest insights was that VTO’s most impactful moment was after a participant saw their face with a realistically rendered pair of sunglasses on them. Despite seeing someone else’s face with sunglasses on them (we used the existing iOS app with our faces as a demo), participants consistently reacted much more strongly once they saw their own face.

The biggest delightful “WOW!” moment was when a participant discovered they could rotate their virtual face to view at multiple angles. Both of these insights strongly influenced how I proposed to design the user flow, prioritizing a fast onboarding that got them as quickly as possible to seeing virtual glasses on themselves.

Organizational Challenges

A few weeks into our project, while we were heavily focused on research, our primary stakeholder cut our deadline and time working with Pivotal from Dec 2016 to Sept 2016. We were told to copy over the existing Ray-Ban VTO iOS app experience and no further research should be done. Despite this new mandate, we knew that a full native app experience was not possible in mobile Safari. Since the experience would be downloaded as a Javascript component, filesize was another major issue (the iOS app was 175MB, the JS component is under 1MB).

With this significant change in our roadmap, we prioritized creating a strong core experience, with the assumption that my team could continue iterating post-launch. I continued to carve out time for research, conducting quick guerilla research around the office or outside with tourists to quickly validate some of our design iterations.

Low-Fidelity User Flow

The onboarding flow consisted of several steps:

• View introduction to VTO (value proposition)
  
• View onboarding instructions (how to record a proper video)
  
• Uploading video
  
  • Error: Video Too Long
    
  • Error: Processing Error
    
  • Error: Upload Failed
    
• Answering 2 questions to determine glasses scale
  
  • Scaling 3D assets to face and downloading assets to device (backend processing)
    
• Save to account

A low fidelity mockup of the onboarding flow, including mobile browser camera limitations and ideas for how users would rotate their face

Call-to-Action Design

Based on data provided by Ray-Ban via Clicktale for their Product Detail Pages (PDPs), we knew that users rarely tapped on any options below the fold. Our research participants also showed this behavior - their primary goal on a product page was to view the product and select colors. We decided the CTA needed to be above the fold as well, but we had limited space to add a CTA that was discoverable and also quickly conveyed the correct value proposition. Ray-Ban was also very conservative in where we were allowed to place a CTA.

I mocked up designs and tested several phrases for the CTA including “Virtual Try-On”, “Virtually Try These On”, and “Try Them On” in order to understand what a user would expect. We learned that whenever the word “virtual” was used, the variety of expectations varied greatly, due to the varying technical experience of the participant. VR was also gaining popularity and contributed to expectations that went beyond the capabilities of our virtual try-on product.

Ultimately “Try Them On” was the simplest, shortest phrase that participants understood to imply a virtual try-on experience. Expectations ranged from a 2D try-on, a 3D try-on and seeing models wearing glasses, but participants consistently associated “Try Them On” with seeing glasses on a human face, with the majority assuming it would be on their own face.

Ray-Ban highly preferred the plain text CTA at first to avoid affecting their product pages, but after launch and seeing how significant the conversion uplift was (their analytics were reporting over 500% increase in conversion), they began testing multiple CTA options that I designed, and even added one of their own where the model's face CTA directly overlapped some product images in the image carousel. This was something I wasn't allowed to even consider prior to VTO's successful launch. The success of VTO opened the conversation with stakeholders about how VTO could be marketed. This also led to a VTO social media campaign by their marketing division on Instagram and Twitter during the summer of 2017.

Some of the CTA iterations that we presented to Ray-Ban, avoiding overlap of the main product image as well as limited space on the PDP

Onboarding Design

iOS Limitations
Ray-Ban’s metrics showed over 90% of their mobile traffic came from iOS and Android devices so we primarily focused on those OSes. While designing the experience for mobile web, one challenge was that iOS would be our lowest common experience. iOS requires a user to invoke the camera before a user can record a video. Another challenge is that the camera defaults to the rear-facing camera when invoked, so a user needs to understand that they need to switch to the front-facing camera for our experience to work properly.

Onboarding Instructions - “Nobody reads”
Throughout our research and design process, we noticed that most participants were expecting an app-style experience, despite using a mobile web browser. We also learned that nearly everyone was skipping the instructions and failing to capture a correct video sequence, leading to confusion and frustration.

I recognized that a quick but memorable onboarding was a major key to providing a great user experience. We toyed with the idea of using fun and delightful illustrations for onboarding, but that did not feel on-brand with the existing Ray-Ban site. We ultimately decided to use a model for the onboarding instructions to provide a visual onboarding experience that required very little reading. Since Ray-Ban had initially told us the use of models was not allowed, we were in constant communication with Ray-Ban’s head of UX, who approved the use of a Ray-Ban approved model for the onboarding flow.

Visual Onboarding and Filesize Reduction
We tested a variety of onboarding instruction designs and short video tutorials yielded the most consistent results from our participants. I wrote a script detailing videos and still photography we needed and Ray-Ban contracted a studio and model to provide the deliverables.

We knew we wanted to use videos, but high quality videos would not stream smoothly with the 3mbps bandwidth requirement set by Ray-Ban’s e-commerce team. iOS also did not autoplay videos, and videos could not play concurrently in Safari. I considered animated GIFs, video formats such as VP9 and HEVC, as well as did research on new formats like WebP and FLIF to save on filesize. Unfortunately, the biggest issue with balancing visual quality vs. filesize was the lack of support for advanced formats across browsers.

From our competitive analysis, we knew that other companies were using a filmstrip approach, stacking images photobooth-style and playing through them with Javascript to create animations. I created the filmstrips in Photoshop by extracting key frames from the videos and played around with quality settings to achieve the best filesize with acceptable visual quality.

Copywriting - “How Large Is Your Face?”

With a single-perspective front-facing camera, the algorithm to scale the 3D glasses to a user’s face required additional input. The most accurate method for scaling requires an object of known size, and the only universal object that is manufactured to precise dimensions is a credit card (this is what Ditto used). My intuition told me that asking for users to upload a photo of themselves holding a credit card to their forehead would be both a major privacy concern as well as an awkward experience and this was validated with research participants.

The other method, which the iOS VTO app used, was to ask a user the size of their face and their gender to estimate their pupillary distance (PD). We knew these questions could potentially be uncomfortable and at worst offensive so we spent a great deal of time creating phrases that would provide the correct answers and testing how users felt about being asked those questions.

As these questions were also intended to mask some backend processing, we had some fun coming up with and testing some phrases Jeopardy-style with the answer being [Small | Average | Large]:

• “What is your hat size?”
  
• “How big is your skull?” (for obvious reasons, this one never made it past brainstorming)
  
• “What is the size of your face?”
• "How do you describe your face?"

Ultimately I ended up with the following questions:

• Gender: “What frame type do you normally use?” [Men’s | Women’s]
  
• Face Size: “What is your head size?” [Small | Average | Large]

Introducing Intentional Friction Points
The questions were spread across 2 screens for two reasons:

1. To help users focus on each question individually to eliminate the desire to backtrack. Users answered each question quickly and easily since the answers were straightforward and almost meant the question didn't need to be read in its entirely.
   
   
2. These questions mask backend processing. I also created a single page version that combined both questions and added a product image of the current product to test if processing times could be improved.

Testing and Validation
Since asking about a person's head size is atypical and potentially offensive, I continued to include questions that tested users’ comfort levels with these questions. We had three major, surprising discoveries:

1. Participants that had a small or large head expressed gratitude and excitement that someone finally asked what their head size was! We heard lots of stories about how difficult it was to shop for eyewear for these users. Future analytics showed a split of 15%/70%/15% for small/average/large head sizes.
   
   
2. Despite not being 100% accurate, asking for frame type (men’s or women’s) rather than gender was received well by all participants. Participants that did not identify, or were empathetic to those that did not identify, with the gender they were born with were delighted that I considered this question thoughtfully.
   
   
3. We observed that the majority of people fall into the standard head category and yet were the most confused by the head size question. We hypothesized that this was simply because they encountered less problems with apparel or eyewear. Nearly all of these participants selected “Average” and did not hesitate for more than 1-2 seconds.

Overcoming Technical Limitations - Masking Backend Processing

At the start of our project, the team decided to process VTO videos on the backend to utilize more powerful cloud servers, rather than on-device, so that we could minimize processing time and continue to collect data, including a future potential project to analyze face shapes to inform business decisions (steps were taken to protect a user’s personally identifiable information to comply with Luxottica’s international presence).

The processing was still taking far too long, over 45 seconds, and we knew that users would become impatient or begin to wonder if the process was “frozen” so we set out to mask the wait time as much as possible. We toyed with ideas of fun illustrations, sexy background image slideshows, or fun trivia (“Did you know Ray-Ban was founded in…” or “The Aviator was first introduced in…”) to occupy users while they waited, but none of these options were in line with Ray-Ban’s branding and stock photography using models violated brand guidelines. We also considered short survey questions that could occupy users and add to our analytical data, but decided against asking for more input than was necessary.

Ultimately we ended up spacing out the required user steps (answering 2 scaling questions) and also showing a preview of the user’s face as a guideline to ensure their face would not be cut off in the output (which would require them to redo the process, potentially causing frustration).

Post-launch, Ray-Ban requested a shorter user flow for onboarding, removing the scaling questions (everyone is defaulted to a standard male face) and preview step.

The full VTO onboarding flow starting from a Ray-Ban PDP, going through capture capture, scaling questions (later removed), a preview step (later removed), save to account and final PDP with VTO accessible via a toggle button.

Displaying VTO on Ray-Ban’s PDP

Once a user finished the onboarding process, they would be presented with their VTO output, which I coined a “Virtual Model”. The output of VTO is a portrait-orientation image, which would have pushed the lens color selector below the fold. Since browsing color options was the primary action that users did, I designed VTO to be displayed in square format. The developers were able to crop the face so that the eyes of all users would be at a certain height, meaning the main parts of their face and the sunglasses would never be cut off.

This provides a consistent shopping experience for shoppers using VTO.

Rotating Your Virtual Model

During testing, we saw over and over that the biggest “a-ha” delightful moment for participants was seeing their own face rotate. This was a huge moment that solidified VTO’s impact and I created a CTA that took up a significant amount of space to ensure that the maximum number of users would notice it. I saw that participants quickly learned this behavior, due to the high impact of seeing their face rotate, so the CTA fades away and does not appear until a new page is loaded. Analytics showed over 85% of users rotated their Virtual Model’s face.

Shipping It - The Ray-Ban U.S. Release

We released our Virtual Try-On product to Ray-Ban’s mobile site in October 2016. Ray-Ban’s analytics team reported an astronomical uptick in conversion rates, along the lines of a 500% increase. We eventually figured out they were comparing VTO’s conversion rates to overall site conversion, which included all traffic (including bounced traffic and unsupported UPCs).

When we eventually worked with Sunglass Hut to implement VTO on their site, we monitored and compared metrics only across supported models, which was far more accurate measure of VTO’s effect on conversion rates. We still saw a significant 70% increase in mobile conversion for users that created a Virtual Model (as low as 30%, depending on season and whether a supported UPC was advertised on the homepage).

The Ray-Ban team eventually localized the VTO experience I created to nearly all of their international sites, but I was minimally involved - mainly double-checking the screens to ensure longer translations would not cause any issues. The VTO experience in all forms (mobile and desktop, across Ray-Ban/Sunglass Hut/Oakley websites) has been used by nearly 5 million people, viewing themselves wearing sunglasses and eyeglasses 29 million times.

Sunglass Hut Partnership - New Metrics for VTO

Introducing Virtual Try-On to Ray-Ban’s mobile site was considered a huge success, and my team partnered with Sunglass Hut next to bring VTO to their mobile site. I took this opportunity to improve upon the Ray-Ban VTO experience by:

• Considering how VTO could affect other metrics beyond conversion rates, including return rates and number of UPCs per visit
  
• Creating “on Model” VTO, a solution to help shoppers see sunglasses on a male/female model (eliminating the need for separate per-UPC model photography a la Warby Parker) and also provide a stronger value proposition for shoppers to create their own
  
• Collecting more fine-grain data to help understand shopping behavior and enable predictive recommendations in the future

Due to Sunglass Hut’s existing PDP design, our stakeholders were concerned about introducing VTO directly onto their PDP. I redesigned the user’s Virtual Model as an overlay, which also had the added benefit of including more relevant product information that we noticed users commonly looked for (below-the-fold info) during our research.

Despite Ray-Ban utlimately removing the scaling questions, Sunglass Hut requested to keep them in order to more accurately scale glasses (their analytics showed their main audience was mostly female) as well as collect more data on their users for potential future projects to recommend frames.

Sunglass Hut onModel VTO

The biggest addition to Sunglass Hut’s VTO experience was that we created “onModel” VTO, using the existing Ray-Ban female model, and an additional Oakley-approved male model, as we were preparing to work with Oakley as well. I was in charge of selecting the male model, setting the art direction, and creating a script of still and video deliverables needed (lighting, angles, model actions, and file formats), including flying onsite to work with Moonbeam Studios on the shoot which was a ton of fun! We created this feature since we noticed in our research that there were a significant amount of participants that were privacy-conscious or unwilling to create their own without seeing an example first.

We released onModel as a third segment for testing, and Sunglass Hut reported a 70% increase in users entering the VTO funnel. We also saw more shoppers clicking the “Try Them On” CTA located below the onModel preview and hypothesized that users needed to like a specific pair before wanting to try them on (as they scrolled down further on the page to get more information). Conversion was not affected much if a user viewed/interacted with the models but did not create their own, which was consistent with the research insights that users responded significantly only when seeing a pair of sunglasses on their own face.

Screenshots below showing female and male models on the PDP. Since Sunglass Hut had more female visitors, we prioritized them as default.

Reflection

Stakeholder Management
Being an extreme agile team within a heavily waterfall-style organization was a significant challenge. We operated on a daily and weekly basis, constantly shifting priorities to remain focused on the most valuable user stories, while the organization operated on a quarterly schedule, solidifying their expectations often before we even approached the problem space. Dealing with a 9 hour time difference was also difficult for the team, since feedback was usually delayed.

One of the biggest lessons I learned is that keeping open communication with our stakeholders and understanding their priorities and concerns was paramount to earning trust and the freedom to create great products. We eventually learned to win allies by aligning our goals, educating stakeholders about our methodologies, championing a great user experience in the form of business needs and metrics, and proposing designs that considered business requirements.

Agile Methodologies
A huge takeaway from working with Pivotal Labs was their extreme Agile approach to problem solving, which had a huge impact on how our team continued to work once our partnership with Pivotal ended. By being agile, we also cut down on risks when our stakeholders changed deadlines or shifted priorities. We became a highly regarded team within Luxottica that always delivered on-time and exceeded stakeholder expectations.

Personal Growth - Wearing Many Hats
Being the only designer on a newly formed team was a great experience. I was able to utilize my past experience as an engineer and a photographer to take a holistic approach to finding solutions to design challenges, such as crafting the art direction for our model photography and researching new image file formats and video codecs to find a balanced approach to minimizing VTO’s filesize.

Collaborating closely on a daily basis with the PM and developers was key to minimizing risks, understanding the feasibility of my solutions, and identifying any unforeseen corner cases. Despite stakeholders suggesting that research was not needed, I have no doubt that pushing my team to continue user research allowed us to create the best product for our audience within the business and technical constraints.