L'Oréal Kérastase passe au headless pour son expérience D2C

L'Oréal est une marque emblématique et connue du grand public à travers le monde. La plupart de ses revenus provenant de la vente au détail traditionnelle, L'Oréal a entrepris de faire évoluer les stratégies e-commerce de toutes ses marques, avec pour défi principal l’intégration des marchés émergents. En 2020, lorsque la pandémie a poussé les entreprises à trouver de nouvelles sources de revenus, L'Oréal a accéléré sa digitalisation – avec une croissance de 64,6 % du e-commerce au cours du premier semestre de l'année.

Kérastase est la première marque de soins capillaires professionnels de luxe au monde. Et dans l'industrie de la beauté, qui dit luxe, dit d'exclusivité et paniers moyens plus élevés. L'une des règles d'or de L'Oréal est d'éviter la concurrence interne entre les marques. C'est ce point qui a poussé Kérastase à créer une expérience e-commerce exclusive et parfaitement intégrée à son site de marque, afin que ses clients lui restent fidèles.

Le site Web dont disposait Kérastase était déjà similaire à un site e-commerce classique, du moins visuellement. Il y manquait toutefois les prix, l'inventaire, les promotions et d'autres composants de l'expérience d'achat, comme le panier. Profitant de retours d’expérience positis avec d'autres marques sur le marché brésilien, Maurício Henao, Head of Digital IT Innovation, et Tauqir Malik, Technical Architect chez L'Oréal, ont invité Valtech à développer une intégration entre Sitecore et VTEX.

Le projet a été développé par Valtech. Pour concevoir l'expérience, nous avons divisé le parcours d'achat en 2 parties. La première est la navigation et la recherche, qui se fait sur Sitecore en tirant des informations commerciales de VTEX via des APIs. La seconde est le passage de commande, qui a lieu chez VTEX et se termine (après la confirmation de la commande) par une redirection vers le site propulsé par Sitecore, fermant ainsi la boucle.

Pour L’Oréal, le headless est un incontournable pour une pratique durable du e-commerce. En cette période de décentralisation des opérations commerciales, les consommateurs explorent de nouveaux modes d’interaction avec les marques, comme le live-streaming, les réseaux sociaux, le e-retail et les marketplaces. Nous devons nous préparer à cette évolution.

Maurício Henao, Head of Digital IT Innovations chez L'Oréal

L'Oréal était en quête d’une solution pour améliorer le e-commerce de Kérastase. L'idée principale était de conserver l'architecture actuelle, avec Sitecore comme technologie utilisée à la fois pour le site Web et le contenu de marque. Ce scénario était parfait pour une approche de commerce headless, qui représente le fait de découpler les expériences client en front-end et les services de commerce en back-end.

Les possibilités offertes par une architecture headless sont multiples : elle fournit un ensemble de services indépendants, autour d’une plateforme basée sur des API et où les clients peuvent plus facilement façonner le logiciel pour l'adapter à leurs besoins. Avec le logiciel SaaS « composable » fourni par VTEX, au lieu de tout créer à partir de zéro, les marques peuvent choisir le meilleur de chaque outil : il s’agit de plusieurs blocs indépendants, faciles à combiner avec ceux qui doivent réellement être personnalisés, afin d'offrir une expérience cohérente aux clients.

Une caractéristique notable de cette mise en œuvre est le rôle du panier permanent de VTEX. Il s'agit d'un élément essentiel de l'expérience client, puisqu'il relie toutes les parties du parcours d'achat entre elles. Dans le header du site se trouve ainsi un panier auquel l'utilisateur peut ajouter des produits tout en naviguant. Lorsqu'il clique sur « Passer à la caisse », l'utilisateur est redirigé vers l’interface VTEX, où s’effectuent le calcul des frais l'expédition et des délais de livraison ainsi que toutes les étapes suivantes du parcours d'achat.

Le défi derrière cette expérience apparemment banale était que, pendant la mise en œuvre de ce projet, les principaux navigateurs ont mis à jour leur politique de sécurité, ce qui rendait impossible l'échange de cookies entre les domaines sans une configuration côté serveur. Avec cet obstacle, si un utilisateur ajoutait un produit au panier et rafraîchissait ensuite la page, le panier était perdu. Le panier était également perdu s'il cliquait sur « Passer à la caisse », puisque ce dernier créait alors une nouvelle session, vu qu’une redirection était effectuée entre les deux éléments.

Pour réussir à offrir à L'Oréal l’expérience recherchée, Valtech devait trouver un moyen de stocker le panier via un logiciel tiers et le ressortir inchangé, quelle que soit la plateforme sur laquelle se trouvait l'utilisateur. Heureusement, VTEX dispose d'une fonction native de panier permanent, qui fournit un identifiant spécifique à chaque nouveau panier.

Le projet a été livré en 10 semaines. Malgré ce court délai, Valtech a su mettre en œuvre une solution élégante et évolutive, qui peut être utilisée par n'importe quelle succursale de Kérastase souhaitant se mettre à niveau en matière de e-commerce. 

En 2017, L'Oréal a lancé un programme développement de sites web à l’international, appelé Website Factory (WSF). Il aide notamment le Groupe à optimiser les coûts et à standardiser les technologies et le développement au sein de ses marques. En interne, chaque marque intégrée au programme (dont Kérastase fait partie) dispose de sa propre instance de gestion de sites web (appelée Master), qui est affecté à une localité, selon les besoins. Le programme inclut de nombreux partenaires et contractants, et est régi par des directives et des indicateurs clés de performance.

Cette intégration du e-commerce étant considérée comme stratégique et présentant un potentiel mondial, il a été demandé à Valtech (qui fait partie de WSF) de la mettre en œuvre sur le site Master de Kérastase. L'une des exigences de WSF pour développer le Master est que chacun de ses composants soit largement réutilisable et facilement localisable dans toutes les régions. Toute succursale de Kérastase qui souhaite utiliser VTEX comme plateforme de e-commerce n'a besoin d'aucun développement web pour lancer son activité.

• Un délai de commercialisation réduit
• L'intégration entre le site vitrine et le site e-commerce a été réalisée en 2,5 mois.

• Une expérience headless fluide
• Intégrés à Sitecore, les clients de L'Oréal Kérastase peuvent faire leurs achats sans friction sur le site de la marque.

• Un outil de commerce « Plug-and-Play » 
• Tous les sites de la marque Kérastase disposent désormais d'une fonctionnalité e-commerce prête à l'emploi.

• Une croissance soutenue
• Le headless est le moyen le plus rapide pour les marques de L'Oréal de passer au commerce électronique et de développer de nouvelles sources de revenus.

• Une plateforme pour plusieurs business models
• Les modèles B2B, B2C, B2E, et marketplace sont désormais applicables sur une seule et même plateforme e-commerce.