Olaplex

I designed the e-commerce experience for the original Bond Builder.

WHEN
April - October 2020
WHAT
Interaction Design, Product Strategy
olaplex-1

THE CHALLENGE

Founded in 2014, OLAPLEX is an innovative haircare company best known for its patented bond-building technology. Their hallmark product is the No.3 Bond Builder, and they have since expanded into a full line of haircare products ranging from the newly released No.0 Intensive Bond Building Treatment to the No.7 Bonding Oil.

Wondersauce was tasked with redesigning OLAPLEX's e-commerce experience to drive sales and harness OLAPLEX's loyal and grassroots-borne user base that have made the brand what it is.

How can we create an engaging e-commerce experience that strikes the right level of approachability, fosters user trust and loyalty, and overcomes the amount of knowledge a user needs to use OLAPLEX?

INSIGHTS

After conducting a competitive analysis and a UX audit of the current online experience, we realized the following:

  • A vast majority of visitors to OLAPLEX.com are visiting the site through a mobile device.
  • Most users do not know what OLAPLEX is, due to being intimidated by the uniquely scientific nature of the brand and product naming.
  • Within the OLAPLEX user base is a grassroots community of haircare professionals.

HAIR DIAGNOSTIC

Through observing user interactions with the current experience, it was clear that users were unaware that OLAPLEX is versatile for all hair types. Moreover, users did not know how to incorporate OLAPLEX into their current haircare routine, especially with scientific-sounding product names like "No. 4". We designed an interactive hair diagnostic tool that prescribes a routine for a user based on their haircare needs.

The diagnostic was designed to account for a greater breadth of haircare issues and concerns, with a logic system that prescribes a set routine of products, rather than basic 1:1 matching of single products.

Olaplex_Quiz_1a_Mobile-1
olaplex-quiz-mobile-live-1
Olaplex_Quiz_1a_Desktop-2
olaplex-quiz-live-1

SHOWCASING THE FULL SUITE OF PRODUCTS

Because we wanted to increase the average order value as well as introduce the user to the full range of OLAPLEX products beyond No. 3, we created interactive product comparison charts that allowed users to easily compare the different products and make a more informed purchase.

Comparing multiple products in a mobile viewport was a design challenge, due to the limited amount of space available. We opted for a one-column view on mobile, such that clicking on the product images above would allow the user to toggle between different products.

compchart-mobile
compchart-mobile-live
compchart
compchart-live

BREAKING DOWN THE SCIENCE OF OLAPLEX

We created a How It Works page that used large, striking visuals to distill the science of OLAPLEX into an easy-to-understand narrative. We realized that users were curious about the bond building technology that distinguishes OLAPLEX from the rest of the pack, but we wanted to make this storytelling understandable and accessible, not esoteric.

hiw1-mobile-1
hiw2-mobile-1
hiw3-mobile

OUTCOME

The project kicked off at the height of the COVID-19 pandemic, and all team members worked remotely to get the site launched. Due to the different features of the site, the OLAPLEX.com redesign was released in multiple phases over the course of 2020. The new designs can be viewed here.

COLLABORATORS

Alex Greene (UX), Gerald Hastings (Design), Mia Patrevito (Design), Dongkyu Lee (Design), Ann Suh (Design), Amy Dawes (Project Management), Kelly Murphy (Project Management), Daniel Viedma (Development), Juan Solano (Development), Marc Cracco (Development)