Weborama est une AdTech spécialisée dans la data et l'IA sémantique. L'entreprise développait 4 outils SaaS sans Design System commun : incohérences visuelles, friction entre designers et développeurs, livraison ralentie. J'ai pris la direction du projet pour auditer l'existant, concevoir un Design System unifié et en assurer l'adoption durable sur les 4 applications.
01 — Audit
J'ai audité l'ensemble des 4 bibliothèques Figma : 974 composants, 44 variables et 14 variations de couleur. Objectif : avoir une vision globale avant d'engager la moindre décision.
J'ai analysé les composants récurrents, identifié les incohérences visuelles et recensé les éléments communs. Résultat : 11 composants en doublon identifiés — point de départ direct pour la réduction de 80%. L'accessibilité de chaque composant a été vérifiée avec Stark (contraste WCAG, lisibilité).
02 — Ateliers
J'ai piloté une série d'ateliers réunissant 3 designers et jusqu'à 3 développeurs, intégrés progressivement à chaque décision de suppression, modification ou création de composant. Ces sessions ont permis de statuer sur les composants à conserver ou supprimer, d'éliminer les doublons et d'établir une convention de nommage commune.
Au-delà des décisions de conception, ces ateliers avaient un objectif d'évangélisation : sensibiliser les équipes à l'Atomic Design, aux conventions de nommage et à l'usage des variables — pour garantir une adoption durable.
03 — Conception
Fort des décisions prises en atelier, j'ai conçu l'ensemble du Design System à partir de zéro selon les principes de l'Atomic Design.
Fondations — palettes avec 4 modes (un par application), typographies, espacements, bibliothèque d'icônes commune. Variables organisées en 5 collections : Primitives, Colors, Spacing, Typography, Border.
Composants — 24 composants déclinés en 195 variants, du plus atomique au plus complexe, connectés aux variables sémantiques.
Templates — 7 templates réutilisables pour produire des interfaces conformes plus rapidement.
04 — Documentation
Zeroheight centralise la documentation design : fondations, variables (tokens), composants et règles d'usage. Chaque composant est documenté avec ses variants, ses règles d'utilisation et des exemples concrets.
Storybook permet aux développeurs de visualiser, tester et intégrer chaque composant de manière isolée côté front. Ce double référentiel assure l'alignement durable entre design et développement.
Suite
Le Design System a ensuite servi de base pour concevoir un nouvel outil SaaS interne. Partir d'un Design System documenté comme contrainte de départ pour Figma Make a permis de générer des premières pistes d'interfaces directement cohérentes avec les applications existantes — sans dette visuelle, avec un temps d'exploration significativement réduit.
Recommandation
« En tant que Product Designer, Thomas a su faire de l'IA un véritable allié stratégique, l'intégrant avec maîtrise dans ses méthodes de conception pour créer des produits plus intelligents, optimiser les parcours utilisateurs et renforcer durablement la performance des produits Weborama. »