Cet article retrace la conférence de Daphna Keim, Design Lead chez L’Oréal, et de son équipe de Product Designers Yann Stephant, Romain Allain et Thirin Ariaratnam, lors du meetup organisé le 29 février 2024 au Hub d’UX-Republic. Le thème de cette soirée : “La migration du Design System e-commerce chez L’Oréal : défis et solutions”.

Daphna Keim intègre la D2C Factory – en charge de produire tous les sites de e-commerce du groupe –  en 2023. Dès son arrivée en tant que nouvelle Design Lead, elle identifie plusieurs problèmes organisationnels au sein de ce leader mondial de la beauté. Le but de cette conférence était de mettre en lumière le travail accompli en un an, un travail qui a profondément transformé l’écosystème du e-commerce chez L’Oréal.

L’arrivée d’une nouvelle Design Lead chez L’Oréal : un basculement dans l’organisation du groupe

Mise en contexte : l’écosystème d’une D2C 

Avant d’introduire les défis et solutions trouvés, il est important de revenir sur les fondations. L’Oréal est implémenté dans 50 pays qui font du e-commerce direct, et possède 237 sites relais du “white label”. L’équipe de Daphna Keim travaille avec deux agences externes, soit l’équivalent de 7 Product Designers. Cela revient donc à une équipe de 10 Product Designers et 400 développeurs pour chaque site.

Comme le souligne Daphna Keim, L’Oréal présente notamment 4 acteurs principaux : 

• Les équipes Corporates : elles chapeautent tous les projets globaux qui cascadent ensuite dans les divisions, les zones et les marques. Aujourd’hui, ils s’occupent de tout le sujet e-commerce et gèrent le white label.
• Les divisions : Luxe, CPD (Produit Grand Public), DPP (Division Produits Professionnels), Derma beauty. 
• Les zones géographiques : SAPMENA, LUSA, Asie du Nord, Europe, etc.
• Les marques : 70 marques qui sont aujourd’hui à l’international, dont 34 dans le e-commerce.

Elle insiste sur le fait qu’elle souhaite mettre à l’honneur que “chacune de ces personnes sont des potentiels interlocuteurs avec qui ils vont échanger, et qui peuvent émettre des requêtes”. 

Présentation du produit NGlora 

NGlora est un white label qui est aujourd’hui géré par les équipes Corporates et les équipes IT. Pour entrer dans les détails, c’est un produit fait à partir de la solution Salesforce sur lequel ils sont venus créer l’ensemble de leurs sites e-commerce, avec une optique de solution mobile first. L’idée était “d’avoir une solution unique avec une architecture unique” où toutes les variations seraient présentes dans le code. De ce fait, tous les sites auraient la possibilité de configurer facilement le ou les composants qui les intéressent. 

Daphna Keim détaille le fonctionnement de NGlora : 

• On retrouve en premier lieu la solution d’ingénierie, qui se traduit par le core system. Côté design, son équipe est chargée de designer toutes les fonctionnalités du white label. “Ce que nous faisons, c’est vraiment de l’UX pur : le parcours d’achat, le parcours consommateur et parfois, on crée des variations pour certaines entités.” 
• Ensuite, il y a ce qu’on appelle les Zones Layers qui sont traitées par les zones géographiques, sous la direction des groupes IT. Cela se concentre sur tout ce qui est local (moyens de paiement, programmes de fidélité ciblés dans un pays, etc.)
• Enfin, on distingue le Brand Layer qui désigne toute la surcouche UI. Celui-ci est propre à chacune des marques.

 

La construction d’un système : use case et expertise 

Une fois les fondations posées, la Design Lead présente alors leur processus, segmenté en 4 étapes : 

• La constitution d’une équipe et la mise en évidence de ses compétences (Présentation de Daphna Keim )
• Le déroulé de la migration vers Figma  (Présentation de Yann Stephant)
• Le passage d’une librairie, voire de plusieurs en réalité, à un Design System (Présentation de Thirin Ariaratnam)
• Les méthodes de travail une fois la migration faite (Présentation de Romain Allain)

Phase d’onboarding de Daphna Keim

Il y a presque un an et demi, Daphna Keim fait son entrée à la D2C Factory chez L’Oréal en tant que Design Lead. Elle passe alors par une phase de découverte et d’onboarding assez particulière, où tous les problèmes d’organisation de la marque émergent. Elle commence donc par nous les lister : 

• Côté design, il existe de nombreux outils. Le problème était qu’ils n’utilisaient pas tous le même. L’Oréal utilisait Sketch et Abstract. Les deux autres agences avaient décidé de migrer tous les fichiers Brand Layers sur leur propre workspace : Figma.
• Il n’y avait pas de management des agences. Ainsi, chaque équipe avait leur propre workspace et leur propre façon de travailler.
• Il n’y avait aucune communication entre les différentes équipes.
• Aucune guideline n’était créée. 

De manière générale, les designers faisaient face à un autre problème : en effet, leur métier est une expertise peu reconnue. La Design Lead souligne alors “un problème de communication et de légitimité” dû au manque d’équipes design. 

Mais comme le cite si bien Daphna Keim, “un site de e-commerce sans UX et sans UI, ce n’est pas possible”. Il était donc nécessaire de trouver des solutions à ces problèmes.

L’idée initiale a donc été d’évangéliser ce qu’ils étaient capables de faire. Mais pour aller plus loin, il fallait creuser réellement au fond de ce problème organisationnel. Une initiative de migrer sur Figma avait déjà été ouverte. Cependant, ils n’arrivaient pas à se mettre d’accord sur le process sous-jacent à une migration. Elle pointe alors cette problématique : “Que peut-on faire avec Figma pour nous aider dans notre quotidien ?”. Sa réponse : Figma allait leur permettre de modéliser, standardiser tous leurs process et surtout d’optimiser et d’automatiser toutes leurs Brand Layers. Ce concept d’harmonisation et d’optimisation leur a alors permis de choisir leur angle d’action pour cette migration. Ils arrivèrent à un “objectif final” : créer un seul Design System qui vienne combiner à son tour tous les Design System représentatifs de chacune de leurs marques.

Time to clean our room !

Yann Stephant présente à son tour l’état des lieux avant l’arrivée de Daphna sous son point de vue de Product Designer. Comme il l’explique, les équipes L’Oréal étaient essentiellement rattachées à Sketch et Abstract. Voici comment se construisait l’organisation autour de ses outils : 

• Une librairie de composants sur Abstract, ainsi qu’un fichier Master global (présentant toutes les pages e-commerce en white label). Celui-ci allait par la suite être partagé pour toutes les Brand Layers.
• Lorsqu’ils travaillaient sur une requête, cela entraînait forcément l’update d’un ou plusieurs composants. Il fallait alors les partager aux agences, en les sortant de la librairie et du Master. Pour cela, ils les duplicaient dans un espace Abstract afin que les agences viennent récupérer les éléments qui avaient été modifiés. 

Mais comme le souligne le Product Designer, “la taille des fichiers était trop conséquentes ce qui entraînait de nombreux problèmes techniques. Il fallait trouver une solution”. Il présente alors les différentes étapes simplifiées pour la migration : 

• L’importation des fichiers Sketch vers Figma 
• L’instauration d’une première analyse de tout ce qui était classé (paramétrage des composants, transcription des fichiers…) 
• L’automatisation, l’optimisation, le rangement et la hiérarchisation de l’ensemble des fichiers afin de passer à un Design System 
• La création d’une grille unique (car chaque marque possédait sa propre grille pour ses sites e-commerce). 

Simplification, harmonization and optimization 

Thirin Ariaratnam, Product Designer chez L’Oréal, introduit sa présentation en dévoilant la solution d’un Design System unique : “Cela a été possible grâce aux Design Tokens”. Ce sont des éléments de base qu’un designer va utiliser pour pouvoir concevoir une interface. Ils représentent un langage commun entre designer et développeur. 

Il souligne l’existence de 3 types de Tokens chez L’Oréal (pour en savoir plus) : 

• Les Base Tokens (ce qu’ils utilisaient avant la migration.)
• Les Semantic Tokens (pour les spécificités tels que les surfaces, les bordures, les textes, etc.)
• Les Component Tokens (la création de “naming” spécifiques pour les composants comportant eux-mêmes des sous-catégories de composants.)

“Grâce à ce plugging Design System organiseur, on a réussi à créer cette liaison entre le Design System et les Masters.”

Run a sprint at the DTC (Direct To Consumer)

Romain Allain, autre Product Designer de l’équipe, intervient alors pour présenter les 5 grandes étapes qui définissent leurs méthodes de production dans ce nouveau Design System : 

1. La mise en place d’un sprint de 1 mois, à partir d’un ticket (= une tâche design attribuée) déposé par un des acteurs de la marque. 
2. L’utilisation d’un système de branche sur Figma (= instance d’une page que l’on va pouvoir modifier indépendamment de la page principale). C’est une fonctionnalité utile pour les gros projets, car comme le souligne le Product Designer, “chaque petite modification peut avoir un impact conséquent”.
3. L’utilisation de la méthode Atomic Design (pour en savoir plus).
4. Les reviews et les collaborations : cela se traduit par le copier-coller des modifications effectuées vers un fichier Sprint, accessible à tous les acteurs du sprint (les développeurs, les PO, les BA, les designers…). 
5. La validation et le développement des tickets : toutes les branches modifiées ou créées vont être fusionnées aux branches principales (mise à jour de la librairie) 

 

Conclusion 

La Design Lead de chez L’Oréal conclut cette présentation en mettant en lumière le travail effectué par son équipe, permettant ainsi de bousculer l’écosystème du e-commerce de la marque. Elle marque l’importance sur ce point : “Notre migration vers Figma peut paraître simple mais finalement le parcours fut assez complexe”. 

Elle finit par aborder l’une des problématiques actuelles de son équipe. Comment peut-on pérenniser une expertise “design” tout en maintenant un centre d’expertise réduit ? À suivre…

 

 

 Inès Barbara, Assistante Communication et Marketing chez UX-Republic