Face Mapping
Face Mapping is a fully embeddable web-based skin diagnostic tool that leverages machine learning to pinpoint and treat skin concerns, offering a genuinely personalized e-commerce experience for Dermalogica customers.
The Challenge
Dermalogica has trained professional skin experts and guided customers on their journey to skin health since 1986. But what happens when our world becomes increasingly digital and distanced? How might we create a digital service that augments the value and personalization of our in-person services so that customers can make informed buying decisions online?
-
· Lead experience designer
· Product strategy
· Creative direction -
Our team has overseen the evolution of Face Mapping since 2018. This specific design sprint lasted 4 weeks.
The Solution: Digital Face Mapping
Face Mapping is a fully embeddable web-based skin diagnostic tool that leverages machine learning to pinpoint and treat skin concerns, offering a genuinely personalized e-commerce experience for Dermalogica customers. We partnered with Skin.IO, leaders in virtual skin cancer screening technology, to ensure Face Mapping is as accurate as it is novel and delightful to use.
Try it out for yourself!
Creative Direction + Design
I wanted the latest version of Face Mapping to feel clean, modern, and approachable. The Dermalogica skin expert is woven into every element, and the interface comprises white space, clean lines, and cool gray tones. Diversity and inclusion were equally important. We used real people with real skin concerns across our visual campaign to evoke a feeling of belonging and safety. Dermalogica has seen it all, after all.
We dynamically change model imagery based on user data.
Dermalogica gray is emphasized across the designs, as seen in this optional quiz flow that was created for users who didn’t consent to image capture.
Users are able to book a recommended treatment immediately.
All content is personalized based on the user’s top skin concerns, including product recommendations, key ingredients to look out for, and blog posts.
Notable Features
A single Face Mapping analysis can be completed in 7 clicks, but this product is mighty. It’s an experience that feels seamless and frictionless for consumers while powering entire data, media, and CRM strategies. The opportunities to leverage this data are endless, but so are the guardrails and considerations. Below are a handful of notable features and revisions we’ve made:
Translations + Cultural Nuances
Face Mapping is translated into 30+ languages for our global markets
-
I work on a global team whose work cascades across 80+ markets and subsidiaries. While the nature of this work is exciting, it does present real and complicated guardrails from a design perspective. We translate everything we do, so we can’t rely too heavily on text in our designs. Additionally, we must keep a continuous pulse on any cultural and technical nuances that might warrant changes in imagery, copy, and tone.
Modularized Codebase
We restructured the codebase to test design variations in real-time.
-
When Face Mapping averaged one million unique image submissions annually, we knew we had proven product viability. While reaching this milestone was rewarding, we recognized that there was still a lot of work to be done. After conducting a thorough retrospective, it was clear that we needed to clean and restructure the codebase.
While our developers removed legacy code, improved page load times, and reworked integrations, I created several designs for each page in the user flow. Now we can A/B test entire pages at the user level in real-time. Which 'results page' leads to higher conversions, a single product recommendation, or a complete six-step regimen?
These are the hypotheses we can create and test now.
Pointing to the Skin Expert
Face Mapping is a direct-to-consumer product, but we didn’t forget about our professional skin therapists and their business goals.
-
When Unilever acquired Dermalogica in 2008, the company's focus shifted to eCommerce and direct-to-consumer initiatives, including launching in Ulta and Sephora.
While this change was necessary, we have always remembered the professional skin expert. Everyone who completes Face Mapping will receive a service recommendation, driving our B2B2C business. Additionally, we designed a treatment booking system so users can book a treatment with a local skin expert directly in Face Mapping – it's like Open Table for skin treatments.
Embed v.s. Microsite
Face Mapping is an embeddable microsite that can be woven into every aspect of the consumer buying journey, including eCommerce.
-
We direct traffic from social media or advertising campaigns to a dedicated Face Mapping microsite and embed the widget in all Dermalogica eCommerce experiences. This duality presents a handful of exciting design considerations:
Navigation – you can't include horizontal navigation because that would compete with the main navigation of the host website.
Structure and spacing – important information exists within a narrow, central portion of the screen so that it responds cleanly across browser and device sizes.
Colors and contrast – you cannot use white as a background color, or it blends into the host site unsettlingly.
Performance
Face Mapping’s constant evolution has directly impacted business growth, conversion, and overall customer satisfaction. We are incredibly proud of these wins.
-
![]()
1 Million+ Unique Visitors Each Year
Over one million unique users turn to Face Mapping for clarity and guidance throughout their eCommerce journey.
-
![]()
75% Conversion, 25% AOV
Customers who complete Face Mapping convert about 75% higher and have an increased AOV of about 25%.
-
![]()
We Beat Traditional eComm
The mobile version of Face Mapping out-competes our traditional eCommerce conversion rates by roughly 4.8%
thank you
As always, a project on this scale can only be brought to life with the help of an incredible team. I want to use this space to thank Robert Achilier (Lead Front-End Developer), Ashley Coty (Operations), and Even Willenson (Data Strategy).
A special thank you to Frank Freeman (VP Digital Disruption) for giving me full autonomy and creative freedom – your an unwavering trust and belief in me from intern to manager has given me the confidence to create, push and pull, and grow in ways I never imagined possible.