Context
Weborama accompagne les entreprises dans l’analyse, l’activation et la valorisation de la donnée pour optimiser leurs stratégies marketing.
Use case
Ma mission est de créer et documenter un Design System unifié pour l’ensemble de nos 4 nouvelles App afin de garantir cohérence visuelle et fonctionnelle, accélérer la production des interfaces et documenter le Design System.
Mission en 3 étapes
Mon approche repose sur une méthodologie progressive, un déploiement par étapes, afin de sécuriser chaque évolution produit.
Track record d'impact et résultat final
Cohérence produit renforcée : un socle UI/UX commun déployé sur les 4 applications, réduisant les écarts visuels et fonctionnels.
Accélération du delivery : gain significatif sur la production des écrans grâce aux variables, templates et composants normalisés.
Réduction de la dette UX/UI : suppression des redondances, clarification des patterns et alignement des usages.
Meilleur alignement Design ↔ Tech : conventions partagées, composants revus dans Storybook et langage commun autour des tokens.
Adoption durable du Design System : documentation claire et actionnable facilitant l’onboarding et l’autonomie des équipes.
Design System
Documentation
Étape 1 : Audit
Début du use case
Bibliothèque existante
Avant toute construction, j’ai commencé par une immersion complète de l’existant.
L’objectif : comprendre, structurer et révéler le potentiel de la bibliothèque de composants afin de poser des fondations solides pour le Design System.
Analyse des composants existants (Core & Satellites)
Revue et rationalisation des typographies
Harmonisation des icônes et illustrations
Structuration des couleurs
Définition d’un système de spacing cohérent
Normalisation des borders
Clarification des effects
Mise en place de grids adaptés aux usages produits
Cet audit a permis d’identifier les incohérences, les redondances et les opportunités d’optimisation, servant de socle à la création d’un Design System clair, scalable et durable.
Étape 2 : Workshop
3/8
Pour ancrer le Design System dans la réalité produit et technique, j’ai mis en place des workshops de co-construction.
L’objectif : aligner les équipes, réduire les itérations inutiles et diffuser des conventions claires ainsi que les best practices design.
Objectifs
Favoriser la co-construction et l’adhésion des parties prenantes,
Limiter les frictions et itérations Design ↔ Tech,
Poser des règles communes et des standards partagés.
Formats
Workshop avec l’équipe Design
Workshop avec les équipes Front & Design
Étape 3 : Refonte
5/8
Création des fondations
J’ai conçu des fondations solides pensées pour couvrir l’ensemble des usages produit et faciliter la scalabilité du Design System.
Design System – Fondations
Création de 4 palettes de marque distinctes, une par application
Définition des palettes Gray, Success, Info, Warning et Error
Système typographique structuré : 5 niveaux de titres et 4 styles de body
Mise en place de 8 radius et de 14 règles de spacing (around & between)
Adoption de la bibliothèque d’icônes Lucide
Création de 175 variables (primitives, alias et semantic) couvrant :
Colors
Typography
Spacing
Borders
Logique de variables claire :
HEX → Alias (ex.brand-500) → Semantic (ex.colors/background/primary)Définition des best practices de nommage et de catégorisation des composants
Exemple : distinction Badge vs Tag, avec Badge classé dans Data Display
Mise en place des bonnes pratiques Figma pour la création de composants :
Méthodologie Atomic Design
Construction progressive (ex.
_Table-cell→_Table-header-cell-title→_Table-header-cell→Table)Utilisation systématique des variants et variables
Vérification et validation de l’accessibilité
Création de templates réutilisables pour accélérer la production de nouvelles maquettes
Ce travail a permis de poser des bases claires, cohérentes et actionnables, facilitant l’adoption du Design System par l’ensemble de l’équipe.
Résultat de la refonte
7/8
Étape 4 : Documentation
5/8
Pour garantir l’adoption et la pérennité du Design System, j’ai structuré une documentation claire, accessible et orientée usage sur Zeroheight.
j’ai complété le travail par une review des composants dans Storybook.
Design System – Documentation
Documentation des fondations (couleurs, typographies, grilles, spacing, etc.)
Documentation détaillée des variables (Primitives, Alias Token et Semantic Token)
Documentation des composants et variants
Formalisation des bonnes pratiques (“Do & Don’t”)
Ce travail a permis de sécuriser la cohérence entre le Design System, sa documentation et son implémentation en production.
Résultat final
7/8
Un Design System unifié, scalable et documenté, couvrant l’ensemble des besoins des 4 nouvelles applications Weborama.
Il constitue aujourd’hui une base de référence vivante, utilisée en production, permettant de concevoir plus vite, plus juste, et avec un haut niveau de qualité UX/UI, tout en assurant une collaboration fluide entre Design et Front.
Merci pour votre attention
Vous pouvez consulter les autres uses case
Recrutement startups et entreprises tech
SaaS B2B
SaaS B2B
· Design System
· UX Research
· Figma
Recrutement startups et entreprises tech
SaaS B2B
SaaS B2B
· Design System
· UX Research
· Figma
Recrutement startups et entreprises tech
SaaS B2B
SaaS B2B
· Design System
· UX Research
· Figma