Caudalie retaille son site e-commerce pour faire fructifier ses ventes
La marque française de produits cosmétiques issus de la vigne, Caudalie a refondu son architecture e-commerce en combinant Adobe Commerce en back-office et une Progressive Web App en front. Objectif : améliorer l’expérience, quel que soit le type de visite.
Des vignes aux cosmétiques. C’est le parcours qu’ont suivi les fondateurs de la marque française Caudalie. En 1993, les propriétaires du vignoble Château Smith Haut Lafitte rencontrent le professeur Joseph Vercauteren, directeur du laboratoire de l’université de pharmacie de Bordeaux.
Ils découvrent alors les propriétés des polyphénols, des antioxydants contenus dans les pépins de raisin. Trois ans plus tard, en 1995, Mathilde et Bertrand Thomas lancent trois premiers produits, distribués en pharmacies. Aujourd’hui, les pharmacies restent le premier circuit de distribution des cosmétiques de Caudalie, qui réalise plusieurs centaines de millions d’euros de chiffre d’affaires et emploie 1 000 collaborateurs dans le monde.
Améliorer les performances du e-commerce en allégeant le front
Caudalie dispose depuis 2009 d’un site web et l’entreprise a développé l’e-commerce afin de distribuer directement ses produits. La marque entend aujourd’hui accroître cette contribution – notamment à l’international, en ouvrant des canaux e-commerce dans d’autres pays – sans remettre cependant en cause son pacte avec les pharmaciens.
Caudalie est un client historique de Magento (désormais Adobe Commerce). La plateforme constitue la solution back-office de sa boutique en ligne.
Jusqu’à peu, c’est aussi sur cette technologie que Caudalie s’appuyait pour le front-office de 22 stores. Les boutiques Web partagent une même base de code. Des modules sont cependant spécifiques à certaines régions pour couvrir des usages locaux.
Depuis son lancement dans l’e-commerce, l’audience sur les sites Caudalie a nettement évolué. Désormais, 70 % des visites s’effectuent depuis un mobile. Par ailleurs, avec cette vingtaine de stores à gérer, les métiers comme les développeurs avaient exprimé le besoin de plus de flexibilité. Caudalie souhaitait également améliorer les performances de ses boutiques en ligne au bénéfice de l’expérience client et donc du taux de conversion.
« Nous avions besoin d’un site plus léger et plus adapté au mobile », résume Jonathan Ribas, le directeur technique de la marque. La solution retenue consiste donc à découpler front et back-office au travers d’un replatforming.
En matière d’architecture e-commerce, plusieurs approches sont possibles. Jusqu’à présent, c’est la solution Adobe Commerce qui générait elle-même les pages dans un modèle dit « headful ». La plateforme permet cependant de distinguer front et back via une approche dite « headless ». Concrètement, la solution e-commerce conserve le back-office, soit la gestion des données et la logique métier.
Une architecture headless avec Adobe Commerce en socle
Celle-ci interagit par API (en GraphQL) avec une technologie front-office, « généralement une application JavaScript qui s’exécute sur le navigateur client », détaille Régis Quintin, directeur Adobe Commerce Cloud pour l’Europe de l’Ouest. Dans cette architecture, moins de données transitent (ce qui exclut les données de mise en forme), accélérant le temps d’affichage des pages.
À noter qu’un modèle hybride est aussi possible en combinant headful et headless selon le type de segment clients.
Caudalie a donc opté pour du headless en associant à la technologie Adobe une PWA, une Progressive Web Apps, basée sur un logiciel tiers. Cela constitue un avantage en termes de développement grâce à un langage full JavaScript.
Le passage au PWA permet une optimisation de l’expérience client sur mobile et l’accès à des fonctionnalités spécifiques afin de développer par exemple des usages exploitant la caméra du smartphone.
Une telle fonction n’est pas encore active, mais elle pourrait l’être à l’avenir en parallèle de la refonte du « profil beauté ». De simple questionnaire, ce profil pourrait devenir une application analysant la peau pour recommander des produits au consommateur.
Si ce replatforming accélère le temps de chargement des pages, quel que soit le type de connexion, il permet aussi aux développeurs de déplacer certains traitements sans solliciter Adobe Commerce. Le front communique en direct avec l’IT de l’entreprise via des web services, par exemple pour le programme de fidélité.
« Nous avons repensé notre manière de développer pour penser un peu plus microservices. Demain, il sera plus facile d’implémenter des nouveautés, notamment sur le plan du design. Avec Vue.js, il est très simple de créer ce que nous souhaitons », souligne le CTO de Caudalie.
Plus de flexibilité dans le développement et l’évolutivité du site
Cette facilité en matière de développement, l’équipe technique l’a exploitée en particulier pour faire évoluer des fonctions critiques du parcours client, dont le checkout. « C’est important pour le développement, mais également pour le métier qui exprime des besoins, par exemple dans le but de simplifier le processus d’achat », explique Jonathan Ribas.
Cette flexibilité permettra aussi, par exemple, d’ajouter différents types de boîtes cadeaux à l’occasion des fêtes de fin d’année ou de déployer une fonctionnalité de type « back in stock » (qui alerte le client lorsqu’un produit épuisé est de nouveau disponible).
L’ajout de nouvelles méthodes d’authentification et la récupération de mot de passe via l’envoi d’un Magic Link figurent également parmi les nouveautés attendues en 2023. Adobe pousse par ailleurs d’autres fonctions auprès du fabricant de cosmétique, dont le recours à l’intelligence artificielle au niveau du moteur de recherche et de la recommandation produit.
Un data lake pour Caudalie
En matière de valorisation des données, Caudalie développe aussi des ambitions. Une personne dédiée au sein du digital collabore avec un data architect et l’IT à la mise en place d’un data lake.
Les premiers usages du patrimoine de données porteront sur l’automatisation des actions marketing.
En attendant, Caudalie doit mettre en production la nouvelle architecture de ses boutiques e-commerce. L’entreprise débutera le 18 juillet avec un premier store, le site international couvrant la Grèce et l’Irlande. Ce pilote vise à préparer les lancements des autres stores, dont celui de la France en octobre.
Pour juger de l’efficacité du replatforming, un KPI sera stratégique : le taux de transformation.
De sa précédente expérience chez Zadig & Voltaire, le directeur technique anticipe une hausse de la rapidité d’affichage des pages et de la durée des visites. Des gains en termes de SEO sont également attendus du fait des améliorations sur la vitesse de chargement.
Article publié le 7 juillet et mis à jour le 25 juillet avec des précisions de Caudalie sur son objectif de se développer à l’international.
