Essie Virtual Try-On
CLIENT
L'Oreal
AGENCY
AnalogFolk
ROLE
Research, Strategy, and UX
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.
PROBLEM
Online Shoppers Struggle to Visualize Nail Colors Accurately
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
What We Found
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.
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.
Entry
The VTO experience should be accessible from various touch points.
Navigation & Filters
The experience should be both impactful and intuitive. Navigation must feel effortless, guiding users smoothly as they filter and discover exactly what they need.
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
Multiple Paths to Try-On: From Discovery to Purchase
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.
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.
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.
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
Edit State Flow
Multi-Mani Drag and Drop Flow
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.
Edit State
Multi-Mani Drag and Drop Flow
DESIGN
UI Screens
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.
