EcoDesignCloud
Deux ans et demi seul UI designer d’un SaaS qui transforme l’analyse de cycle de vie en décisions retail.
- Rôle
- Seul UI designer, du début à la fin
- Période
- 2022 → été 2025
- Contexte
- Atos / Eviden, d’un déploiement L’Oréal à une plateforme multi-clients
- Outils & stack
- Figma · FigJam · GPT · Illustrator
Mandat
Une plateforme SaaS d’évaluation environnementale (analyse de cycle de vie, indicateurs PEF) pour le retail. Seul UI designer pendant deux ans et demi : identité, interfaces des modules clés, design system.
Défi
Simplifier seize indicateurs scientifiques sans les appauvrir, et tenir l’ultra-personnalisation : chaque client choisit son fond et sa couleur d’accent, la donnée doit rester lisible partout.
Solution
Des niveaux de lecture progressifs aux codes visuels constants, un glassmorphisme fonctionnel qui garantit le contraste, et un UI Kit transformé en design system documenté.
Résultats
Du MVP à la solution commercialisée, déployée chez L’Oréal puis adoptée bien au-delà.
- entreprises
- 600+
- pays
- 35+
- marques L'Oréal
- 24
- projets ACV initiés
- 20 000+
Chiffres du produit et de toute l’équipe, ils donnent l’échelle. Sources : site officiel EcoDesignCloud (2026) ; communiqué L’Oréal Finance (mai 2024).
Le récit complet, décision par décision
EcoDesignCloud est né avec un parti pris fort : l’ultra-personnalisation. Chaque marque, chaque utilisateur peut changer le fond de son interface et sa couleur d’accent, pour un produit qui a sa personnalité. Le glassmorphisme était la réponse technique : des surfaces translucides qui restent lisibles sur n’importe quel fond. Mon travail, pendant deux ans et demi : faire tenir cette ambition, et des tableaux de seize indicateurs environnementaux, dans un produit passé d’un client à des centaines.
Le problème
Une analyse de cycle de vie traditionnelle est longue, experte, difficile à intégrer au rythme d’un projet retail. EcoDesignCloud automatise une partie du calcul et restitue les résultats en scores, graphiques et comparaisons. La question de design était donc : comment simplifier des données scientifiques sans les appauvrir, pour que des gens très différents (designers, acheteurs, responsables RSE, fournisseurs) puissent choisir quoi produire, et chez qui l’acheter ? L’écran de composition en tête de page en est un condensé : une hiérarchie imbriquée, éditable directement dans le tableau, et un Eco Score verrouillé tant que la donnée est incomplète, pour prévenir les erreurs avant le calcul.
Les décisions
Le glassmorphisme avait une raison d’être
La tension. L’ultra-personnalisation rend la lisibilité imprévisible : un tableau de seize indicateurs doit rester lisible sur une photo de forêt comme sur un aplat sombre, puisque le fond appartient à l’utilisateur.
Le choix. Assumer le glassmorphisme comme socle (des surfaces translucides qui tiennent sur n’importe quel fond), et une hiérarchie stricte des surfaces : la personnalité vit dans le décor, la donnée vit sur des panneaux maîtrisés où le contraste est garanti.
Ce que ça a coûté. Un système de contrastes et d’états bien plus exigeant qu’avec un fond fixe. Et une leçon d’humilité : l’idée fondatrice a survécu à tous les débats. À mon départ, le défaut était toujours un vert de marque et un fond de forêt.
Un niveau de lecture n’est pas un niveau d’expertise
La tension. Le produit repose sur seize indicateurs d’impact PEF, plus des KPI comme le carbone ou l’eau. Un score unique est immédiatement lisible, et faux dès qu’on le prend pour une vérité absolue. Tout montrer noie l’utilisateur non expert.
Le choix. Organiser l’interface en niveaux de lecture progressifs : une synthèse compréhensible en un regard, puis une descente vers le détail sans changer de logique visuelle : mêmes échelles, mêmes codes, mêmes légendes. Et prévoir dès la conception les états où une donnée est manquante, estimée ou non comparable.
Ce que ça a coûté. Beaucoup plus de travail de hiérarchie et de dataviz qu’un simple « score + graphiques », et des allers-retours constants avec les experts ACV pour ne pas trahir la donnée en la simplifiant.
Du UI Kit au design system
La tension. La personnalisation multipliée par la croissance : chaque combinaison de fond et de couleur d’accent démultipliait les états à maintenir à la main. En UI Kit, c’était un enfer à gérer, et le produit passait d’un client à des dizaines, très vite.
Le choix. Transformer le UI Kit en design system structuré : le fond et l’accent deviennent des variables du système, pas des exceptions. Fondations, composants avec variantes et états, règles d’usage, documentation. Un langage propre à EcoDesignCloud (pas une déclinaison client), personnalisable par construction.
Ce que ça a coûté. Passer du temps sur un travail que personne ne voit tant que tout va bien. Le retour : moins de décisions improvisées à l’intégration, et une personnalisation qui a survécu au passage à l’échelle sans fragmenter le produit.
Concevoir avec la dette, pas contre elle
La tension. Le projet a grandi plus vite que ce que l’équipe pouvait intégrer. Certaines maquettes ne pouvaient pas être intégrées tout de suite, ni exactement.
Le choix. Documenter systématiquement les états et variantes attendus pour limiter les interprétations, faire des revues d’intégration régulières, et prioriser les écarts les plus visibles ou bloquants. Garder dans Figma et le design system une référence cohérente vers laquelle le produit converge, version après version.
Ce que ça a coûté. Accepter, durablement, que le produit en ligne ne soit pas la maquette. Et savoir dire devant tout le monde ce qui vient du design et ce qui vient des contraintes techniques, sans accuser personne.
Ce que je referais autrement
Poser plus tôt les règles du design system (qui décide, qui valide) et regarder s’il est vraiment utilisé. Le système a bien servi ; je ne peux pas le prouver avec des chiffres.
Définir une stratégie de visualisation des seize indicateurs avant de multiplier les graphiques, plutôt que de la consolider chemin faisant.
Mesurer les parcours critiques : savoir où les gens abandonnent, plutôt que de le deviner à travers les retours métier.