Dermalogica.com: a custom eCommerce experience that embodies professionalism and heritage
Summary
Dermalogica, a global skincare brand in Unilever's "Prestige Portfolio," embodies professionalism, quality, and care. However, these attributes were not reflected in their online shopping experience, which was marred by ads and UX issues. After years of petitioning leadership, I finally secured approval to redesign the global eCommerce experience. I led the project from start to finish—conducting research, crafting designs, and overseeing implementation. The project, completed in about three months, reduced bounce rates by 9.7% and increased the average order value by 25%.
Company: Dermalogica
Sector: Custom eCommerce experience
Role: research, creative direction, UX/UI design
Year: 2022
Research
To understand and measure the current state of the eCommerce experience, I conducted extensive qualitative research, analysing over 100 HotJar recordings, performing 15 user interviews, and reviewing more than 50 live chat transcripts. Additionally, performance data from Google Analytics helped quantify insights. This comprehensive data set, along with a competitive analysis, guided our design decisions and helped us establish clear success metrics.
Creative direction
I chose a clean, modern, and approachable look and feel to convey a sense of quiet luxury as seen in the mood board below. Generous white space highlighted both human and product images, while the brand’s cool grey tones exuded calm and professionalism.
Iteration and refinement
Multiple iterations were tested with a panel of 20 users. Their feedback on usability, navigation, and aesthetics was crucial in refining the final designs. User feedback helped identify and resolve potential pain points, leading to a more seamless and enjoyable browsing experience. This iterative process ensured that the final design not only met but exceeded user expectations, aligning with Dermalogica's commitment to excellence.
Final designs
After thorough usability testing and approvals, we implemented a BETA version of the new designs. The redesigned site reflects Dermalogica’s core values of personalization, human touch, and education. It is fully responsive, offers personalized recommendations, showcases diverse imagery, and balances business and customer needs with clear and professional communication. This project also marked the beginnings of Dermalogica’s first digital design system.
Results and reflections
We leveraged Shopify and Intellimize to deploy a BETA version of the eCommerce experience. This allowed us to A/B test the old and new versions with a small pool of real customers. The test ran for a month and the results were significant:
Bounce rates decreased by 9.7%, from 52% to 42.3%
Shopping cart abandonment fell by 19%, while the average order value (AOV) increased by 25%
Qualitative feedback indicated a strong preference for the new design
The redesigned eCommerce experience evoked a clear feeling of prestige and professionalism, enhanced user satisfaction, and achieved measurable improvements in key performance indicators.