Maybelline Virtual Try On – Alessandra Recine

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 were curious to see if there was as way to implement this technology within their eyeliner product lines for Maybelline New York.

PROBLEM

Eyeliner is challenging for the consumer

Many people often don’t know how to apply it or how to select which type of eyeliner to use for a desired look (i.e. cat eye, smokey). They also don’t know how to determine what eye shape they have and what techniques to use accordingly.

SOLUTION

Create an interactive and educational tool

This help users learn about different eyeliner types and application quickly and with ease. It should be a hassle-free and seamless experience that will inform the consumer, leading them to add eyeliner products to cart.

AUDIT & RESEARCH FINDINGS

We looked across various e-commerce sites in the beauty industry and took note how eyeliner education is very brief and not interactive. Within current virtual try on experiences, augmented reality isn’t being used to educate consumers. We also saw how even though personalization is missing, some brands are enabling users to browse products and content determined by their physical attributes, lifestyle, etc.

A lineup of different mobile screens showing different eyeliner pages from different brands

WHAT WE FOUND

Eyeliner Education is Bland

What’s mostly available is text-only instructions on how to use eyeliner. While some brands may additionally use video and images, these learning experiences aren’t very dynamic or interactive.

Eye Shape & Personalization Filtering

Personalization is lacking when it comes to beauty education. We can lean into this by helping users understand that eyeliner looks can be personalized, what that means in relation to their own eye shape attributes, and how to navigate with this information.

Shoppability

After learning and trying on the product, it should be quick and easy for the user to add item to cart. While the focus of the eyeliner tool is learning, the ability to quickly transact should be easily available.

Education Should Live in the PDP

PDP’s (Product Display Pages) carry the majority of existing eyeliner education and user purchase intent is highest on product pages — we will need to create a PDP version of the that finds the right balance between education, try on, and shopping.

Advanced Technology

There are both AR and hardware products in the marketplace that create immersive and virtual opportunities to learn in an interactive way that can be applied to an engaging eyeliner try-on tool experience.

WIREFRAMES: DIRECTION ONE

This experience is both educational and interactive, with simple UI that guides the user through the looks.
Navigating through the experience is accomplished via swiping gestures.
User’s eye shape is immediately detected by the tool, removing one less “ask” of the user
There is one tutorial per look, and the order of tutorials is prioritized by eye shape.
Overlay “stencils” appear on the user’s eye with instructions for application, step-by-step.
While shopping is not the main focus, the ability to view the item and make a purchase is easily accessible.

WIREFRAMES: DIRECTION TWO

This direction is split into two different journeys. One path is intended for users who are unfamiliar with eyeliner (“newbies”) and the other is for those who are more experienced (“gurus”).
There is one tutorial for each eye shape, for every look.
By catering the tutorial towards the user’s skillset, we’re able to offer a personalized learning experience.
The “newbie” path features an accompanying video clip with each step for visual guidance, while “guru” only has text instructions. Both paths include the augmented reality eye “stencil” users can trace.
While eye shape isn’t the main determining factor in this direction, the tool does identify the user’s eye shape and provides information and insight. Also the techniques described in the tutorial of the look the user selects is geared towards their eye shape.