Essie Virtual Try On

CLIENT

L'Oreal  

AGENCY

AnalogFolk  

ROLE

Research, UX, & Strategy 

Virtual Try On (VTO) tools within the online e-commerce beauty and wellness space has become a growing user expectation over recent years. VTO enables the user to get a representation of what a product may look like on themselves before committing to a purchase. L’Oreal has already been incorporating this technology using ModiFace, a third-party augmented reality tool, into several of their retail sites already. They wanted to include this feature within the shopping experience for Essie, and to see if we could explore additional ways to enhance the VTO experience for the consumer. 

Essie is a nail brand for salon professionals and everyday consumers offering trend-setting colors with whimsical names. Generally while shopping for a nail color, users compare several shades to make a selection, often seeing how colors look against their skin tone. This is where a VTO experience could help an online shopper pick the right product with confidence. 


 

AUDIT & RESEARCH FINDINGS

  

For research, we looked at variety of try on experiences ranging from big retailers like Target, to direct competitors such as NYX Cosmetics. We assessed what features stood out and what could potentially be incorporated in our explorations. Our findings were sorted into five categories: Entry, Navigation & Filters, Mix & Compare, Shoppability, and Share/Save. 

 

screenshots of different mobile virtual try on experiences arranged in a row


Entry

  • The VTO experience should be accessible from various touch points.


Navigation & Filters 

  • Should be powerful and easily accessible

  • Navigational elements should be seamless, helping the user filter down to what they are looking for 


Mix & Compare 

  • Keeping in mind how users shop for nail polish, nuance and comparison amongst colors is important.
  • This becomes even more important if shopping for a nail look which requires multiple colors.

Shoppability 

  • Access to purchase or more information should be readily accessible during the virtual try on experience

Share/Save

  • Users should be able to shop products that were using in the VTO experience, save or share looks, and view different looks they have created.
  • Shareable assets should be unique and  incorporate elements of fun

 

ENTRY POINTS

  

The portion of the user journey we focused on the most involved launching the VTO tool, to trying on colors, sharing an image of a look created, and then finally leading the user to purchase a product that was sampled. There are two VTO interfaces created: The PDP (product display page) tool, where the user launches the try on experience to try on a singular product, with the option to view shades are are similar. The Full Tool can be launched from different points of essie’s site, allowing multiple product lines, colors, and looks to be viewed within the try on experience. 


userflow_v2

 

WIREFRAMES: Product Display Page (PDP)

 

Direction One: Immersive Takeover

The VTO experience is accessible from the PDP, right were the user can view the product. This solution allows color comparison amongst similar shades and the ability to purchase the product or view more information is always persistent. There are also options to view the shade on a variety of hand models of different skin tones and nail shapes. The “More Colors” option navigates to the Full Tool for further product exploration and the multi-mani feature. 


Immersive Direction PDP

 

Direction Two: Modiface Template 

The second option uses a designed template created by Modiface. In this direction, the color is auto applied to the hand and the nuanced, similar shade are shown altogether on the screen. While Modiface’s augmented reality technology was already being used by L’Oreal, we created this option if a lower level of developmental effort would be needed. The first direction uses a new UI and immerses the viewer into focusing on one color at a time. 


Modiface Template PDP

 

WIREFRAMES: Full Tool

 

The second version of the VTO tool created involved the broader depth of Essie’s complete line of nail products. Instead of just viewing one shade and comparing it alongside similar products, the Full Tool enables the user to try on various shades, finishes, and the ability to try on several colors on one hand (multi-mani). The user would access this page via the main site navigation, through a secondary CTA in the product page, or through a separate landing page.

 

       Direction One 

  • Seamless Navigation - functionality and filters help user quickly explore multiple shades and finishes
  • Strong Comparison - UI enables users to quickly find and compare nuanced colors and multi-mani mode helps user build a full, mixed look
  • Immersive Experience - space to view try-on live helps user focus and orientation 
  • Shoppability - quickly accessible, but not distracting away from shop CTAs
Direction One Annotations

Edit State Flow

 

Direction One Edit State

 

Multi-Mani Drag and Drop Flow

 

Direction One Multi Man

 

       Direction Two

  • Clear Navigation - fully exposesd filters add functionality that supports purchase drivers 
  • Strong Comparison - UI enables users to quickly find and compare nuanced colors and mutl-mani mode helps user build a full, mixed look.
  • Guided Experiecne - helps users understand recommended steps in filtering and choosing colors or allows them to play with multi-mani options. 
  • Shoppability - quickly accessible, but not distracting away from the purchase journey.


 

Direction Two Annotations

 

Edit State


Direction Two Edit State

 


Multi-Mani Drag and Drop Flow

 

Direction Two Multi Mani

 

FINAL DESIGN & UI


Ultimately, L’Oreal selected a combination direction one for the PDP virtual try on tool, and a direction two for the full tool. UI screens were executed by Claudeland Louis and Irene Kim.

 

fullmockup