The Problem

Luxottica acquired Glasses.com and wanted to bring virtual try-on to all their brands.

Luxottica is the world's largest eyewear company and owns Lenscrafters, Sunglass Hut, and many other retail outlets. Their best-known brands are Ray-Ban, Persol, and Oakley.

The trouble was the existing intake system had been built for a single app, Glasses.com, and there was no way to track where frames were in the creation process. This often caused frames to end up in limbo. They had been created, but couldn't be viewed within their app.

What is virtual try-on?

Virtual try-on uses the camera on your smartphone or tablet, to record a video of your head turn. Once processed, the technology uses augmented reality to show how you’d look when wearing eyewear from multiple angles.

Project Goals

Support multiple brands.

As they rolled out Virtual Try-On to other brands, they wanted the system to be scalable and support multiple brands across their apps and websites.

Prevent frames from getting lost.

Allow users to view where frames were in the pipeline.

Speed delivery time.

Reduce frame creation time to 21 days. At the time their intake time was 2-3 months.

The Team

Our project team consisted of 3 people. None of us were part of Binocular when the original system had been built so we had a lot to learn about the process.

Discovery

I needed to understand how the existing process worked from end to end. I set up interviews with four different groups from each stage in the pipeline.

Binocular's CTO and Mirar were local and were interviewed at our office. Glasses.com and Mimic were remote and were interviewed them by phone.

Mirar offered the most insight into the process as they interacted with someone at each stage in the pipeline.

Takeaways

The “system” wasn’t really a system.

The original system was built to handle the Glasses.com app with less than 200 frames. The "system" was actually a manual process of sharing spreadsheets via email, uploading files to Dropbox and running several shell scripts on a web server.

User Groups

The system had 4 distinct user groups.

Requester (Glasses.com)

Share a spreadsheet containing UPCs and product names. Ship eyewear to Mimic and Mirar.

Scanner (Mimic)

Receive eyewear and create untextured 3D models of the frames using a laser scanner.

Painter (Mirar)

Receive eyewear from Glasses.com. Texture and paint the models from Mimic.

Publisher (Glasses.com or other Luxottica brands)

Validate data and publish frames to virtual try-on apps.

Design

Sketches & Wireframes

Once I have a few general ideas sketched out, I'll start writing out the structure of a project in a text file.

Once finished, I'll use that to build a user flow.

User Flow: Painter

To make it easy for a user to focus on their assigned task, I designed the new system to only display relevant data for their user group.

Here's the Painter user flow.

Inventory & Reporting

In early designs, a grid of previews of the different frames was displayed. In practice, the previews weren't actually helpful for viewing large sets of data.

In its final form, it was reduced to a sortable table that could be filtered.

Painter: Review Model

Early designs included the full set of product data just like Publisher. After reviewing the designs with Mirar, they pointed out that the most important piece for them was the product photo and render.

The final design was reduced to the product photo, render, and relevant product info. Clicking and dragging left to right on the rendered face would turn the head to ensure the frames looked correct from all angles.

Here's what a Painter would see when reviewing and rejecting a frame.

Publisher: Review Model

Publishers needed to view all data for each frame to ensure it existed and would display correctly in the app.

Early designs displayed multiple renders and product photos, but after speaking with Mimic and Glasses.com we found they weren't necessary for the frame approval process.

Implementation

I worked with the developer to ensure everything looked and functioned as designed. Thanks to styling tools such as Sass it made it easy for me to make design adjustments without needing to hassle the developer.

An unexpected bonus was the developer adding the ability to have a visual version history for each pair of frames. This helped Mirar track down some problematic issues with certain rendering methods.

Outcome

Luxottica and Mirar were excited about the rollout and the ability to support multiple brands and apps with a robust API. It made their jobs much easier.

Thanks to the new inventory management system it was easy to find all frames that had been lost in limbo and publish them to their respective apps.

For some frames, they were even able to decrease the creation time from the goal of 21 days to 14.