Sunglass Hut Retail

VIRTUAL TRY-ON KIOSK

A retail store kiosk that enables customers to discover styles quickly and easily

Mockups of the kiosk splash screen, main catalog page, and product details page.
(Click to view larger)

What started out as a proof-of-concept for a Ray-Ban Virtual Try-On kiosk evolved into an 8-foot physical kiosk installation at a Sunglass Hut located in Union Square San Francisco that caught the eye of the General Manager of Sunglass Hut.

THE CHALLENGE

The average customer won't try on more than 5 pairs of sunglasses.

The tedium of physically trying on multiple pairs of sunglasses to find the right one was a major reason customers do not make a purchase in store. Through research and interviewing Sunglass Hut associates, I learned that this pain point affected both customers and sales associates and negatively impacted the shopping experience. Customers were likely to get frustrated and give up or run out of time to shop around if they didn't find "the one" quickly.

I was the sole designer for the kiosk experience. I was in charge of the full design process, including setting the design vision, conducting the user research, and the UI design. I worked on a cross-functional team that included one PM and two developers.

Our team partnered with the Brand Experience Innovation team at Sunglass Hut and with a hardware design agency to create the physical kiosk enclosure.

As of May 2018, I continue to be the main point of contact with the Sunglass Hut store manager for all kiosk-related issues.

RESEARCH
I partnered with a research agency and conducted independent research to understand the challenges of the retail experience, identify customer and stakeholder pain points, and synthesize insights into useful and delightful features.

PRODUCT STRATEGY & SCOPE
I worked closely with a product manager to identify challenges and opportunities, champion customer goals while balancing business goals, and validated assumptions to inform the product roadmap.

CHATBOT & MOTION DESIGN
I created a chatbot UI & script to guide retail shoppers and provide recommendations & product knowledge education.
I designed animations in Principle to prototype with users and stakeholders and to understand feasibility with developers.

UI DESIGN, HANDOFF & EXECUTION
I worked together with 2 developers to understand technical restrictions, handoff designs via Zeplin, and provide relevant input and feedback. I worked with the product manager to QA and approve delivered stories.

TECH SUPPORT
I was the primary contact if the Sunglass Hut store had any issues with the kiosk regarding anything ranging from a misaligned webcam to it not turning on. An great user experience includes customer support!

INTRODUCING

Enabling discovery of new styles and opportunities to engage customers

Multiple iterations of kiosk designs for both the UI and physical kiosk were created and tested based on interviews, frequent check-ins with retail stakeholders, and observations of customer behavior.

Since research insights revealed that time was a major factor in why customers left before finding a style they wanted to purchase, the user experience prioritized browsing and discovering as many styles of sunglasses as quickly as possible.

Mockups of the kiosk catalog filters: brand, shape, and color filters.
(Click to view larger)

RESULTS

Customers tried on over twice as many pairs of sunglasses

The Sunglass Hut Regional Manager saw a 200% improvement in purchase conversion of customers who engaged with the kiosk. At its peak, he reported over a 500% conversion improvement compared to customers who did not use the kiosk. Customers were trying on an average of 11 pairs of sunglasses on the kiosk, over double the number of physical pairs customers would try on.

In addition, the Union Square San Francisco store manager and store associates reported the following qualitative improvements in the shopping experience:

• Increased customer time in store
• Associates had multiple additional "ins" when starting a conversation with a customer, at various stages of the shopping experience
• Companions of shoppers stay engaged playing with the kiosk rather than getting impatient, keeping the main customer in the store, where they may otherwise leave without a purchase
  
• Customers were significantly more willing to try styles outside of their comfort zone
  
• Customers were discovering styles that they neither chanced upon while shopping nor an associate recommended
  

CONTEXT

Dealing with Ambiguity
Our group was asked by the CEO of Luxottica to create a fast proof-of-concept to showcase the potential of Luxottica's Virtual Try-On technology as an in-store shopping experience. The team was given 2 weeks to define the concept, build a completely new interface, determine the hardware used, allow our developers to code it, and package it for our director to bring to Milan for a demo. I was given 2 days to create a new UI design that would be able to do the following:

• Allow a shopper to create a Virtual Model using our Virtual Try-On technology
  
• Provide a way to shop all of Ray-Ban's supported VTO sunglass UPCs
  
• Create any additional features that may be useful to an in-store shopping experience

Lessons learned from implementing VTO on Ray-Ban's mobile/desktop sites and researching customer shopping behavior were leveraged whenever possible. Given the short time frame and since this would be an internal demo, no additional research was done to understand retail customer needs at this stage. I worked with our PM with the understanding that, if the project continued, we would allocate time for research and iterate the design as needed.

Hardware and Design Decisions
We decided to reuse the desktop VTO javascript component, meaning the kiosk interface needed to function within the Chrome browser. I recommended that we use a touchscreen 1080p monitor in vertical-orientation to take advantage of VTO's default portrait-orientation output to it's fullest (non-cropped). I suggested an Intel Compute Stick, both for its portability and as a budget-friendly option. An Intel NUC was chosen by the team as a more powerful option (the hardware cost ended up being less than 6% of the total cost of the kiosk).

An ideation session with the team director and PM to quickly brainstorm features and understand the scope of the project and what would be possible within the short timeframe.

Splash Screen and VTO Onboarding/Capture screens

(Click to Zoom In)

Main Catalog

Product Details

Favorites List

Shopping List

Share Your Image

E-Mail Favorites List

The Ray-Ban demo was a success and the demo was shipped to Oakley HQ's lobby, which served as a testbed for many of Oakley's projects. Luxottica Innovation Labs attended a summit held at Oakley HQ to present Virtual Try-On insights to Luxottica's brands.

Partnering with Sunglass Hut

Through meeting the Sunglass Hut Brand Experience Innovation (BEI) team at the summit, a partnership was formed to create an in-store kiosk to trial for 3 months at the Sunglass Hut located in Union Square in San Francisco. Fortunately the store was located a block away from our office, which enabled us to check in frequently and remain aligned with the store manager and associates, as well as observe customers using the kiosk in the context of their shopping experience.

DEEP DIVE INTO RETAIL

As a first step in collaborating with the Brand Experience Innovation team, my PM and I drafted up a pre-brief that listed our must-haves and nice-to-haves from both a user experience and technical perspecive. A few of these items included:

• Focus on the user experience. It is our north star because it points the way to success.
• Store employees must be proud of it, find it useful, not feel threatened by it.
• Customers must find it useful, easy, realistic and enjoyable.
• Technical performance: fast, no crashes, reliable internet, no downtime.

Establishing Connections:
The first thing I did knowing we'd be testing in the store was to introduce myself, meet the store manager and all of the associates, and take photos of the store, power outlets, and discuss potential areas for the kiosk. Being aware that they may perceive a shopping tool as a way to eliminate need for sales associates, I positioned our experiment as a social tool for them to engage with their shoppers. I wanted to understand how to build a multipurpose tool that would achieve a healthy medium between self-sufficient shoppers and an additional "in" for sales associates to engage with their customers.

Designing for Retail:
Up to this point, we had focused on optimizing VTO for an e-commerce shopping experience. This was an opportunity to start fresh and learn if and how an in-person shopping experience at a brick-and-mortar Sunglass Hut would differ from e-commerce. The BEI team took the lead in coordinating a 2-day trial with our demo kiosk setup: a basic monitor and PC on a metal pedestel that we borrowed from Oakley. We collaborated with a research agency to help us recruit and interview participants and all teams involved contributed to drafting up the research script and topics.

The UI was reskinned with taglines and branding to reflect a Sunglass Hut experience, focused on Ray-Ban products.

The onboarding screens were updated with Sunglass Hut branding and SGH's signature dot pattern, adapted from their website. The Sunglass Hut logo was added and button colors and fonts were updated to match Sunglass Hut's e-commerce website.

Day 1
We set up the kiosk and a poster provided by BEI to attract customers.

Hypothesis:
Location in direct view from front entrance and near the cashwrap would get customers' attention and maximize traffic.

Key Observations & Learnings:

• Loss Prevention: store employees keep a constant eye on the products to prevent theft, which happens frequently. The large sign and tall monitor blocked their view of the front door and the Channel display (the L-shaped setup in front of kiosk in the floorplan) holding their most expensive ($1200) sunglasses, creating additional stress to staff.
• Location: customers assumed that this was an associate tool that they weren't supposed to touch.
  
• Camera Shy: there is a certain degree of discomfort with a webcam. The user flow took them from the splash screen "tap to get started" directly to a live camera feed and I witnessed someone duck and run away from it.
• Height Adjustment: the webcam was a pain to adjust for varying heights and required 2 hands. Customers weren't sure they were allowed to touch the webcam, even when encouraged to interact with the kiosk setup.

Taylor, the store manager, demoing the realism of VTO vs. the physical pairs. She has been a key supporter of the kiosk project from day 1.

The area that was blocked from store employees' view. Theft is a common occurance and loss prevention is a major concern.

After the 1st day, we all sat down and synthesized our observations and generated insights to enable my team to build the next iteration of the kiosk. BEI began coordination with an agency to build a physical enclosure.

Day 2
Hypothesis:
Placing the kiosk to the front entrance would be more discoverable and gain more interest from passersby.

Key Observations & Insights:

• Crazy Styles: Customers were more likely to try a variety of styles that they would not consider physically trying on, occasionally reacting positively to styles outside of their comfort zone.
• Scroll Fatigue: the kiosk had lots of products and most users would browse a few scrolls' worth of products
  
• Customer Journey: the kiosk was more noticeable, but customers just entering wanted to browse the physical assortment first and weren't interested in using Virtual Try-On as the first step
  
• Lighting: glare and changing light conditions near the entrance caused their Virtual Model to be backlit, resulting in dark/silhouetted faces that weren't flattering, decreasing perception of the kiosk's usefulness
  
• Splash Screen: participants said it was boring and that it would not attract them
• Power Source: no outlet nearby, cable management was an issue, rubber cord cover was used for safety
  

Day 3
Based on what we've learned so far, I convinced the team and the SGH store to allow me to run another day of tests at a third location: up against a column, facing the fashion section, located near the cashwrap, and conveniently next to a power outlet (no cord management, tripping hazards). The BEI team and research agency had only planned for a 2-day trial so I ran the study on my own this day, with help from associates working with customers to understand how the kiosk helped both sides.

Hypothesis:
Placing the kiosk out of the way, but still in a discoverable location, would not block associates' view of the store, the kiosk would be positioned at a more relevant moment in a customer's shopping journey (after browsing physical products), and facing the fashion aisle would provide consistent lighting throughout the day for the webcam.

Observations & Insights:
This seemed to be the optimal location for the store, despite not being as noticeable from the entrance (the side of the monitor was visible, not the front).

After 3 days, it became clear that this tool was more effective as an associate-introduced, customer-driven tool, rather than as a self-sufficient customer shopping experience. This key insight defined the product strategy, future iterations of the design, and the dimensions of the physical kiosk enclosure.

KIOSK DESIGN

My PM and I flew to Portland to meet BEI and the enclosure design agency to preview their work. I enjoyed being able to leverage my DIY and photography experience: sharing ideas about the building the frame, mounting the LEDs for optimal lighting, routing cables, heat management, and discussing the diffusion panels to soften the light surrounding the frame. The enclosure was built according to the width of the column from the day 3 trial and the monitor was enclosed but tiltable to account for customers of different heights.

Yup that's my hand.

Several changes were made based on our research above and shifting to use the Sunglass Hut online catalog. Since we were rapidly iterating on features, the designs shown below are a culmination of insights over several months.

• Splash Screen: updated visual design and added animation to better attract shoppers, since participants felt the original splash screen was visually dull and didn't explain Virtual Try-On.
  
• Instructions: added to improve the onboarding experience. Provided a step between "Get Started" and seeing your face in the webcam feed to avoid surprising shoppers.
  
• Webcam Feed: the video feed was made larger for a better view of a user's face.
• Main Catalog Product Grid: now full width and given more space between product images.
  
• Filters: Since the number of products grew significantly with Sunglass Hut's catalog and included multiple brands, discoverability and scrolling fatigue became a concern. The categories on the left of the catalog were changed into filters that sat above the product grid.
  
• Modals: The product details, sharing and favorites features were now shown as modals, since customers were confused how to get back to the product grid in v1.
• Bye-Bye Shopping List: removed since the kiosk was not tied to checkout and it set the wrong expectations.

Splash Screen Animation
(Prototyped in Principle)

Instructions for VTO Capture

Larger Capture Webcam Feed

Layout for Main Catalog

Catalog with Active Filters

Product Details Modal

Filter by Brand

Filter by Frame Shape

Filter by Frame/Lens Color

Favorites Modal

Text Your Image Modal

Email Your Image Modal
Prototype Animation (Done in Principle)

The newly designed kiosk was installed for a 2 month trial period and a full day of research was planned early August. Along the way, I checked in 2-4 days a week with the Sunglass Hut staff (luckily only a block away!) and developed a wonderful working relationship with them. By making a personal connection with the staff, they were more willing to share what worked well, what didn't, and any ideas they had for how the process could be better. My team continued to iteratively add features and fixes based on my research.

Some of the learnings I shared with my team:

• Usability/Discoverability: nearly every feature was discoverable and shoppers rarely got stuck. Associates occasionally helped with the video capture process, and this provided an "in" to engage with the customer.
  
• Ergonomics: The tilting monitor mechanism was not ideal.
  • The default height catered to a 6 foot tall person, so nearly everyone had to tilt the monitor downward
  • At the lowest tilt angle, people 5'3" - 5'7" had trouble capturing their video. People taller than 6 feet (my entire team except myself...) had to squat a bit, and anyone shorter than 5' 7" had to be on their toes. Anyone shorter than 5'3" (including a few of the store staff) were physically incapable of capturing their video. The tilt also shifted the perspective, resulting is distorted faces with larger foreheads.
    
  • In the interim, with approval from the store manager, I purchased 3M Command hooks and a lightweight but sturdy stepladder to allow more people to use the kiosk.
• Updated Splash Screen: the splash screen was significantly better in attracting shoppers and showcasing what VTO was.
• Instructions: added as a small friction step that helped set expectations for what to do once the customer saw the webcam feed.
• Filter Menus and Active Filter Bar: understood, useful and discoverable. Some people had trouble understanding how to close the filter menus, despite easily opening them.
  
• Text/E-Mail Sharing: Through analytics, we saw that the social features (text/e-mail) were rarely used, and the features were kept, but deprioritized.

3M Command hooks are easy to remove, so staff could remove them if it posed a hazard. The step ladder I chose was sturdy, but intended as a temporary solution.

KIOSK IMPROVEMENTS

Kiosk Enclosure v1.5

The tilting monitor height adjustment was a major issue: nobody shorter than 5'3" could use it, which represented a significant amount of foot traffic entering the store. In addition, many of the store associates couldn't demo the kiosk to showcase its usefulness for customers who weren't willing to try it on their own.

Our hardware partner came up with a solution: a track based system with a latch to adjust the height. A counterweight was planned so the weight of the monitor + metal shroud would be easily moved, but was not installed as part of the retrofit. The monitor was quite heavy without the counterweight, requiring associate assistance for safety.

Since we knew that nobody read the "Picture Perfect" transparent acrylic panel in the front, we requested to have it removed and replaced by front access to the hardware inside the kiosk enclosure. Prior to this, maintenance and troubleshooting required me to move the kiosk off the column, and dismantle the back panel (a metal sheet held on by 8 screws) which was time consuming and disruptive to business.

We pushed to have the retrofit done several days prior to our second round of research.

EXPERIMENTAL FEATURES

Conversation UI Animation
(Animation Prototyped in Principle)

Click to view larger

The prototype had 4 main steps: introduction to build rapport, provide or skip a recommendation, education about frame shapes, and conclusion.

Testing - Round 2

The BEI team returned for another round of testing and brought the same researcher back to facilitate. We focused on understanding the kiosk's role in the Sunglass Hut shopping experience, and allocated time to run through usability testing and understanding the usefulness of features my team had built, including the chatbot. I recommended that we start participants at the store entrance, rather than at the kiosk, to provide a holistic view of the shopping experience. We had the Sunglass Hut regional manager (Brian) and store manager (Taylor) help introduce participants to the kiosk if they hadn't discovered or interacted with it on their own.

Key Observations & Learnings:

• Iterative Design: Since I was constantly checking in with the store and the team was constantly fixing bugs and adding/refining/prioritizing useful features, there were no major surprises during our testing - mainly reinforcements of things we already knew.
  
• Conversational UI Design/Usability: most participants were comfortable with the UI and selected responses quickly, even the less tech-savvy ones. Most participants did not read the conversation fully, only enough to know how to respond. When frames were recommended, there was some confusion due to the opt-out design — users ended up deselecting frames they thought they were selecting. Ending the chat and transitioning to the main product catalog was also confusing and would require some additional rounds of iteration and testing of the script, design, and CTAs.
• Recommendation Engine: participants felt that there were too many frame shapes recommended. It was unclear that the their recommendations led to catalog filters being pre-set to narrow their selection.
  
• Share Features: majority of participants preferred text over e-mail, and there was a 70/30 split on texting to a friend/family member vs. to themself. There was concern about providing their info and being spammed.

In it's current form that only recommended a frame shape, we realized the chatbot didn't have enough compelling content to fully engage and delight users. The feedback showed that it took away from the initial goal for the shopping experience — see sunglasses on yourself in under a minute and quickly discover the right styles for you — and wasn't the right fit for an associate-assisted experience. As the recommendation engine was still in its infancy, the PM and I planned to enhance the chatbot experience once the recommendation engine was further developed.

MAKING FRIENDS AND GAINING ALLIES

Sunglass Hut Expo

My PM and I hosted an "Expo Day", a half-day showcase inviting Sunglass Hut and Oakley regional and store managers to come learn about Virtual Try-On and how the kiosk augmented the experience at the San Francisco Union Square store. Brian and Taylor, the Sunglass Hut regional manager and Union Square store manager, were our champions — pulling together a list of relevant invitees, participating in a live demo, and hosting the 2nd half of the expo to discuss metrics and methods for how the kiosk benefitted the sales process.

UX goes beyond the product:
I coordinated the event and provided snacks, Blue Bottle coffee, and catered lunch for our audience. Appreciated attendees are happy attendees :)

"I would kill to have my customers try on that many pairs!"
- SGH Store Manager upon hearing kiosk users try on 11 pairs of sunglasses

OPPORTUNITIES AND LESSONS LEARNED

Making Connections

This project was an amazing opportunity to design a kiosk — both the digital experience and contributing to the enclosure design — and have it tested in a retail store for a full year. What started as a 3 month trial became a solid addition to the store and, as of April 2018, is still currently in the Union Square Sunglass Hut. I continue to provide weekly metrics to the regional manager to calculate the conversion rate of kiosk users, which is still holding strong at 200% the rate of customers who don't interact with the kiosk.

Meeting the dedicated Sunglass Hut retail employees and getting to know their pain points, the KPIs they're required to reach, and how they engage with customers helped me create a holistic solution to the shopping experience to delight customers while remaining useful to retail stakeholders.

I loved working with them, and still stop by to chat or bring them coffee or snacks as a thank you for collaborating and sharing their experiences with us.

Next Steps

Increasing Usage
We've seen significant gains to the conversion rate for kiosk users but kiosk users only accounted for approximately 10% of shoppers coming into a retail store. We planned to iterate on the splash screen, moving from an animation of sliding sunglasses to a more interactive splash screen, allowing shoppers to select current, trendy sunglasses to place on the model's face before trying it for themselves.

Measuring Conversion
We began measuring conversion rates starting late 2017 to collect solid data for senior stakeholders. Currently this is a manual process, with store associates tallying up customers who use the kiosk and make a purchase. Finding a way to track this digitally and tie it to our analytics would increase the accuracy and confidence in the data.

More Stores
Initially BEI planned for a 20-store pilot, but unfortunately a company-wide reorganization put that on the back burner, as budgets and priorities were shifted. The PM and I stayed in touch with the SGH regional manager and proposed a 2 store trial in the SF Bay Area, to understand the benefits of a VTO kiosk in other environments. Union Square was a tourist destination — how would the kiosk be received in a tech savvy area such as Stanford Shopping Mall in Palo Alto? Working with the regional manager to examine various store metrics, we hypothesized that the VTO kiosk would benefit a "neighborhood store" (mainly local shoppers) in a different way, by boosting sales of ship-to-home products not stocked in the stores.

Wall Mount
Sunglass Hut had various retail store designs that ranged from large flagship stores to small and narrow stores. For stores where a full standalone kiosk would not be possible, we began discussing a wall mount solution and drafted a project brief to obtain a quote for a more compact solution.

Kiosk Enclosure v2.0
The v1.5 retrofit was a huge improvement in ergonomics for shoppers but the lack of a counterweight made it cumbersome to adjust. We worked with the agency to implement a motorized lift, with up/down arrows that moved the monitor and webcam assembly effortlessly and quietly. We ordered a second kiosk built with the new lift, shipped it to Milan, and our director presented it to the CEO of Luxottica to gain more visibility for the project.

Ray-Ban Store in Milan
There was interest in putting the Milan kiosk in the flagship Ray-Ban store. I reskinned the latest Sunglass Hut designs to incorporate Ray-Ban branding. This project was taken on by the retail team in Milan.

Driving Traffic Into Stores
After the expo, we attracted the attention of the Sunglass Hut General Manager and he was interested in creating a concept for an interactive VTO digital display in a mall setting to drive traffic into Sunglass Hut stores.