Face Mapping: an AI-powered skin diagnostic tool that helps customers find the right products for their needs
Overview
As the Lead Experience Designer at Dermalogica, I spearheaded the design of Face Mapping, an AI-powered skin diagnostic tool that helps customers find the right products for their needs. This innovative solution exceeded expectations, boosting conversion rates by 75%, increasing Average Order Value (AOV) by 25%, and raising customer satisfaction from 82% to 94%. Face Mapping was honoured with an Honourable Mention in Fast Company’s Innovation by Design awards and has since inspired similar technologies across the eCommerce industry.
Company: Dermalogica
Sector: B2C e-commerce software
Role: Product and experience design
Year: Lead designer from 2018 - 2023
Problem Discovery
Through extensive user research, including interviews, surveys, and data analysis, I identified three critical pain points in our e-commerce experience:
-
The uniformity of product packaging made it difficult for customers to navigate our offerings effectively.
-
Users expressed dissatisfaction with live chat agents who lacked the expertise to provide tailored recommendations for their unique skin concerns, leading to frustration during their shopping experience.
-
Customers expressed frustration with various aspects of our end-to-end experience. They felt that the emails and advertisements they received were unrelated to their needs, and that our platform lacked the ability to track their skin journey. This disconnect and lack of personalisation left them feeling unsupported and disengaged from the brand.
Problem Definition
Dermalogica’s extensive product line, coupled with uniform packaging and overwhelming choices, created a barrier for customers trying to find the right products. The lack of personalized online support further compounded the issue, preventing customers from receiving the tailored guidance they would typically get during an in-store consultation with a Dermalogica skin expert.
Objective
Design an online experience that mirrors the personalized guidance of an in-person consultation with a Dermalogica skin expert. The experience should accurately understand each customer’s unique skincare needs, recommend the most suitable products, and provide continuous support throughout their skincare journey.
Solution discovery
I led a workshop with Engineering leads to define the technical requirements for facial image capture and analysis, a crucial component in replicating the personalized experience of an in-person consultation. Instead of developing our own machine learning algorithm, we partnered with Skin.io, a digital cancer screening company, which assisted in mapping eight key skin concerns to facial images. In parallel to this, I collaborated with our Data team and Dermalogica Skin Experts to map Dermalogica products to these eight skin concerns, creating our initial product matrix and logic.
Design Challenges
Once the team aligned on technical and data requirements, I tackled several key design challenges:
-
To address concerns about sharing face photos, I designed an onboarding process that clearly explained the face mapping procedure and its privacy measures. Additionally, I created an optional quiz for users who were uneasy, allowing them to receive personalized recommendations without using face data.
-
As a global brand, Dermalogica required all designs to be translated into 30+ languages. I also ensured that cultural nuances and diversity were thoughtfully integrated into the design to resonate with a diverse, international audience.
-
Face Mapping is an embeddable piece of custom software that is "added to" existing e-commerce experiences. This meant that I had to design and experience that seamlessly integrated into any website it was embedded on, and carefully consider various design factors to ensure a smooth and cohesive user experience.
Prototyping and Testing
I developed several medium-to-high fidelity designs and used Intellimize for real-world usability tests. This tool enabled our team to launch and compare two design variations through A/B testing, observing interactions and gathering sentiment from groups of 30-50 users. The tests focused on optimizing the user flow, refining visuals and the overall experience—ensuring overlays were intuitive rather than gimmicky—and identifying which results pages drove better conversion rates.
Final Designs
The prototype below illustrates how Face Mapping transformed the Dermalogica shopping experience. This 7-click process may seem simple, but the data it gathers personalizes all future digital touchpoints, including email and ads. The designs evoke calm and professionalism, with a Skin Expert guiding users throughout. Images are analyzed, concerns diagnosed, and a personalized regimen is prescribed. The experience adapts based on user needs, offering simpler options for novices to avoid overwhelm. Users can chat live with Skin Experts, and all information is saved for tracking progress and referencing past results
Impact and results
The Face Mapping tool exceeded expectations, boosting conversion rates by 75%, increasing Average Order Value by 25%, and raising customer satisfaction from 82% to 94%. We facilitate over 2 million unique face maps each year. These metrics highlight the significant impact of our design on both the customer experience and the business.
Industry Recognition
Our work on Face Mapping was honored with an Honourable Mention in Fast Company’s Innovation by Design awards, and has since inspired similar technologies across the eCommerce industry, setting a new standard for personalized online shopping experiences