L’Oréal - Digital Service Factory Design system multi-marques et services BeautyTech pour L’Oréal
Designer dans une équipe de deux au sein de la Digital Service Factory de L’Oréal : un design system global pour 35 marques et des services BeautyTech en réalité augmentée et IA, dont E-Shade Finder, récompensé par le CES 2023 Innovation Award et utilisé par plus de 500 000 personnes en six mois.
Fiche du projet
- Client
- L’Oréal Groupe
- Rôle
- UI / Product Designer
- Équipe
- 2 designers (moi et mon Lead Product Designer), puis seul à la tête du pôle Design pendant 4 à 5 mois, avec les équipes Dev et Produit
- Périmètre
- Design system multi-marques · UI / Product Design · Prototypage · Tests utilisateurs
- Période
- 2021 – 2023
- Durée
- Presque 2 ans et demi
- Support
- Services BeautyTech (réalité augmentée, IA) et design system
- Statut
- Services livrés, design system déployé sur plusieurs marques
Impact
Contexte
La Digital Service Factory est l’équipe de L’Oréal qui conçoit des services BeautyTech pour les marques du groupe : des expériences en réalité augmentée et assistées par l’IA, déployées sur plusieurs zones (EMEA, AMER, APAC).
J’ai rejoint le pôle Design en renfort pendant presque deux ans et demi : d’abord dans une équipe de deux designers, puis seul pendant 4 à 5 mois pour tenir le pôle après la fin de mission de mon Lead Product Designer.
Problème
Un groupe multi-marques, des services déployés sur plusieurs zones (EMEA, AMER, APAC), et des équipes Design et Dev qui devaient livrer vite sans perdre la cohérence.
Chaque service risquait d’être redessiné de zéro pour chaque marque, avec à la clé des écarts d’interface et des délais plus longs.
Objectifs
- Offrir un socle commun que chaque marque peut décliner (marque blanche)
- Accélérer la production des services
- Garder la cohérence entre marques et entre zones
- Fluidifier la collaboration entre Design et Dev
Démarche et enseignements
- Gestion et évolution du design system global en marque blanche
- Création de services BeautyTech (Skindr 3, e-Shadefinder, essie on hand, Hair Color…)
- Prototypage et tests utilisateurs
- Amélioration des processus Design × Dev
Solution
Un design system global en marque blanche : un même socle de composants, décliné par marque, sur lequel s’appuient les services BeautyTech.
Les services (Skindr 3, e-Shadefinder, essie on hand, Hair Color…) sont assemblés à partir de ces composants plutôt que redessinés à chaque fois.
Le design system en marque blanche
Le système repose sur trois éléments : des composants communs, des composants spécifiques à certains services, et des tokens. Chaque marque se décline avec ses propres thèmes et tokens : une trentaine de marques en disposaient.
Les composants suivent une structure Atomic et s’appuient sur des paramètres imbriqués : simples à utiliser, faciles à personnaliser.
Le tout vit dans Figma, avec une plateforme interne de type CMS qui permet de déployer les versions déclinées des services pour chaque marque.
E-Shade Finder, un service propulsé par l’IA
E-Shade Finder aide à trouver sa teinte parmi 22 500 nuances grâce à l’IA. Le service a reçu le CES 2023 Innovation Award et a été utilisé par plus de 500 000 personnes en six mois.
Un processus Design × Dev plus fluide
Nous avons remplacé le travail en cascade par une collaboration continue entre designers et développeurs, menée en parallèle. Résultat : plus de réactivité et plus d’agilité.
Des rituels de handoff et de QA encadrent les composants et les services développés : nous vérifions que ce qui est développé côté Storybook correspond bien aux maquettes.
Résultats
Le service E-Shade Finder, propulsé par l’IA, a reçu le CES 2023 Innovation Award.
Le design system et l’amélioration du handoff Design × Dev ont réduit de 50 % le temps de production d’un service, développement et déclinaison à la direction artistique d’une marque compris. Mesure : estimation d’équipe et suivi de tickets, sur tous les services créés.
Réflexions
- La collaboration continue entre design et dev est primordiale. Avancer en parallèle plutôt qu’en cascade est bien plus efficace.
- Moins de réunions, mais mieux structurées. Un ordre du jour clair et un déroulé organisé valent mieux que de nombreuses petites réunions qui coupent la production de chacun et finissent par être contre-productives.
Et ensuite
Si je reprenais cette mission aujourd’hui, j’y intégrerais l’IA :
- Automatiser le déploiement des maquettes déclinées par marque grâce à des processus assistés par l’IA.
- Connecter le MCP Figma au design system pour accélérer la production de maquettes.
- Prototyper avec Claude Code pour explorer plus de pistes, plus vite.