The Garnier Shade Selector is not throwing shade, it's showing shades that make consumers look good
SUMMARY
Garnier was the first to make a permanent home hair color in 1960, before it was acquired by L'Oréal in the 1970s. Today, in the United States, Garnier makes four different brands of hair color and produces over 150 shades to choose from. That's a lot of color. Garnier was aware of the difficulty people have with finding the right color - "the" color that will look best on them. Today that problem is made even more complex now that colors like denim blue and hot pink are trending. To address this Garnier had created a tool on its website that would assist in the selection, however like many companies, Garnier frequently refreshed its collection and updating the tool became a challenge. The Garnier team at Publicis was at the ready, and set to work on a new tool that would leverage new technologies and methodologies to improve the consumer experience and provide the ability for Garnier to manage the inventory of shades within the tool.
MY PART
Product & Experience Design Leadership
Project Planning & Resourcing
Client Liaison
Business Requirements
Experience & Content Strategy
Usability Testing / UAT
CHALLENGE
Garnier's existing Shade Selector tool was widely searched and used by consumers, however it was outdated and it was not the only application of its kind. The challenge was: How do we create a tool that provides hair color recommendations that accurately consider the condition of the consumers' hair when making recommendations, and is easily updated as new products are introduced.
INSIGHTS
The key to the accuracy of the experience was the hair color science and the chemistry of products. We needed to understand how hair color works and how we could convert that into usable data that would ensure the results reflected by the tool would achieve the look the consumer expected.
Requirements
Hair shade recommendations will be based on hair color science and the data that drives it.
The steps required to generate a result should be simple and minimal regardless of the path.
The app should be easily updated as hair shades are added or eliminated.
SOLUTION
An innovative application delivering colorful science in six easy steps
Boosting consumer confidence
THE SCIENCE VISUALIZED
We worked hand-in-hand with the hair color specialists at L'Oreal. First, to understand the attributes that determine how hair color works on different hair types, and then to map a decision tree outlining the questions and responses that will drive the result set.
The matrix is based on hair color science. It is the logic that drives the backend of the application that delivers the recommended hair color that will work on the consumer.
The decision tree mapped the user paths and served as the roadmap for the user journey and development.
PERSONALIZED RECOMMENDATIONS, EDUCATION AND CONSULTATION
In a few simple questions the web-based application understands the current shade and condition of the consumers hair, the level of gray, and their desired shade. Based on those factors, the Shade Selector will recommend Hair Colors from the Nutrisse, Olia, and Color Sensation that would work best for the consumer. Tool tips and consultants provide clarification throughout the experience.
REFORMULATING HAIR COLOR WITH AUGMENTED REALITY
Finding the right shade was only the first step in the experience we created. We consulted and worked with L'Oreal's newly acquired AR/AI technology partner, Modiface, to create a photo-realistic web-based virtual hair color try-on. Instead of consumers imagining what a color will look like on them, the Virtual Try On takes the guess work out and will show how you'll actually look with the new color.Consumers can upload a photograph or use video capture to see themselves with a new look as they click through the recommended shades.
RESULTS
The redesign provided all the latest Hair Colors and ensured that consumers would get a recommendation that will work on their hair - creating greater confidence in the brand. The addition of the Virtual Try On elevated the experience and made it possible for people to try before they buy. The Shade Selector has since been integrated into some global sites and has been made into an in-store experience at some Walmart and Walgreens stores.
Try the Shade Selector here.
Project completed while employed as Creative Director, Experience with Publicis, New York.