L'Oréal Kérastase goes headless for Its D2C experience

L'Oréal is an iconic brand that doesn't need an introduction. With most of its revenue coming from traditional brick-and-mortar retail, the company has been evolving its digital commerce strategies across all brands and operations, with the onboarding of emerging markets posing a challenge. In 2020, when the pandemic urged companies all over the world to find sustainable growth and revenue streams, L'Oréal accelerated its digitalization plans—with e-commerce growing 64.6% during the first half of the year.

Kérastase is the world’s leading luxury professional haircare brand. When we talk about luxury in the beauty industry, we're also talking about exclusiveness and higher AOVs. One of the golden premises at L'Oréal is to avoid internal competition between the brands, which awoke Kérastase to the need for an exclusive e-commerce experience seamlessly integrated with their brand site, so that their customers remain loyal to the brand.

The website Kérastase had was already visually similar to an e-commerce site, it just lacked prices, inventory, promotions and other parts of the purchase experience, like the checkout. Taking advantage of the positive experience with other brands in the Brazilian market, Maurício Henao, Head of Digital IT Innovation Americas, and Tauqir Malik, Technical Architect/Advisor at L'Oréal, invited Valtech to develop an integration between Sitecore and VTEX.

The project was developed by Valtech. To design the experience, we split the buying journey into two parts (unbeknownst to the user). The first one is the navigation and browsing, which occurs on Sitecore, pulling commercial information from VTEX via APIs. The second is the order placement, which happens at VTEX and ends (after the order confirmation) with a redirect to the Sitecore-served site, closing the loop.

L'Oréal set out to look for a solution to step up the Kérastase e-commerce game. The main premise was to keep their current architecture as it is, with all the content and brand site being served by Sitecore. This scenario was perfect for a headless commerce approach—when the front-end customer experiences and back-end commerce services are decoupled.

The possibilities presented by a headless implementation are countless: it provides a bundle of independent services, contouring an API-based platform, where customers can more easily extend software and tailor it to their needs. With the composable SaaS that VTEX provides, instead of creating all things from scratch, brands can look for the best-of-breed: independent parts that are result-oriented and easily combined with the ones that actually must be tailor-made, to deliver a cohesive experience for customers.

There's a noteworthy feature on this implementation: the role of VTEX's persistent cart. It is an essential part of the experience since it connects all parts of the buying journey. At the website's header, there's a cart to which the user can add products while navigating. When they click on Proceed to Checkout, the user is redirected to VTEX where shipping calculation, delivery time and all the following steps of the buying journey happen.

The challenge behind this apparently mundane experience was that, during the implementation of this project, all major browsers updated their security policies, which made it impossible to exchange cookies between domains without a server-side configuration. With this limitation, if a user added a product to the cart and then refreshed the page, the cart would be lost, or if they clicked on Proceed to Checkout, the cart would create another session (also losing previously added products) since there's a redirect in-between.

To deliver the experience L'Oréal was looking for, Valtech had to find a way to share a cart session in a stateless piece of software and serve it regardless of which platform the user was on at a given moment of the journey. Fortunately, VTEX has a native persistent cart capability that provides each new cart an ID.

The project was delivered in 10 weeks. Despite the tight deadline, Valtech was able to implement an elegant and scalable solution that can be leveraged by any other Kérastase branch in the world wanting to up level their e-commerce game. 

In 2017, L'Oreal launched a global website development program called Website Factory (WSF). Among other goals, it helps the company to optimize costs and standardize technologies and development across their brands. Internally, each brand that's part of the program (Kérastase included) has its own global website instance (called Master) that's localized as needed. The program encompasses many contractors and partners and is ruled by guidelines and KPIs.

Because this e-commerce integration was seen as strategic and with global potential, Valtech (who's part of WSF) was asked to implement it on Kérastase's Master website. One of WSF's requirements to develop on Master is that the components are widely reusable and easily localized to any region. Any Kérastase branch that wants to use VTEX as their e-commerce platform needs zero development to start selling.

• Fast Time-to-Revenue
  • Integration between brand site and e-commerce completed in 2.5 months
• Seamless Headless Experience
  • Integrated with Sitecore, L'Oréal Kérastase's customers can shop seamlessly throughout the brand site.
• Plug-and-play Commerce
  • Any Kérastase brand site now has an out-of-the-box, plug-and-play commerce functionality available.
• Sustained Growth
  • Headless is the fastest way for L'Oréal brands to transition into e-commerce and develop new revenue streams.
• One Platform, Multiple Business Models
  • B2C, B2E, B2B, and Marketplace on a single commerce platform.