Création du nouveau Design System de Fleet
Rôle
Product Designer
Durée
8 mois
Outils
Figma · Storybook · Zeroheight
Équipe
2 designers · 2 product managers · 6 ingénieurs
Fondations du Design System de Fleet
01 — Contexte
Depuis sa création, les développeurs Fleet avaient construit une bibliothèque de composants Storybook entièrement sur mesure, sans fondation commune ni logique systémique. Cela avait généré 3 ans de dette design : composants dupliqués, styles incohérents, absence de documentation. Chaque nouvelle feature prenait 30% de temps supplémentaire prévu à cause du manque de cohérence. Le rebranding de Fleet a été l'occasion de moderniser l'interface pour un public B2B plus exigeant et de poser les bases d'un Design System cohérent, modulaire et scalable.
Interface avant la mise en place du Design System
Mon rôle : co-piloter la création du design system, en s'appuyant sur Material UI et les principes d'Atomic Design, avec une adoption mesurable.
"Le même composant existait sous cinq formes différentes dans le code. Personne ne savait laquelle était la bonne."
— Audit initial, Fleet
02 — Recherche
Nous avons débuté par un audit complet des 2 produits Fleet, avec des interviews de 6 développeurs et 2 designers, pour identifier les incohérences UI, les variations de composants et les problèmes d'interaction. L'analyse a révélé des doublons, un manque d'uniformité et l'absence de standards partagés : 240 composants dans le code pour seulement 50 patterns distincts nécessaires. Pour structurer la refonte, nous avons adopté Material UI comme fondation open-source React, accélérant le développement et réduisant la complexité technique. Nous avons ensuite défini une structure atomique, organisant les composants en atomes, molécules et organismes pour faciliter la réutilisation et la maintenance.
Bibliothèque de composant choisie / aperçu des fondations de couleurs
Insight 01
Dette accumulée
240 composants dans le code pour seulement 50 patterns distincts, soit 5x de redondance.
Insight 02
Friction dev/design
Les développeurs recréaient des composants faute de source de vérité partagée.
Insight 03
Onboarding lent
Un nouveau designer mettait 1 mois à être productif, uniquement pour apprendre les conventions.
03 — Livraison
Nous avons livré un Design System robuste et actionnable pour les équipes design et développement : couleurs et typographie harmonisées avec le nouveau branding, border-radius réduit pour un aspect B2B plus structuré, un jeu d'icônes cohérent et des illustrations mises à jour alignées avec l'identité de marque. 50 composants documentés livrés avec une bibliothèque Figma connectée au code via Storybook et un site de documentation sur Zeroheight. Chaque composant est accompagné de guidelines d'usage claires. Résultats à 6 mois : −30% de temps de développement, onboarding du Design System ramené à 1 semaine.
Plateforme Fleet mise à jour avec le nouveau Design System
50
Composants
−30%
Temps dev
1sem
Onboarding
04 — Apprentissages
Le design system est avant tout un projet design, mais qui demande d'être piloté comme un produit dont les utilisateurs sont les équipes. Adopter cette posture dès le départ, avec des interviews, une roadmap et des feedback loops, a été la clé de l'adoption. Le timing a aussi joué un rôle décisif : toutes les pages ne pouvant pas être migrées en même temps, il a fallu arbitrer sur la roadmap quelles pages mettre à jour en priorité. Maintenir une cohérence globale pendant cette transition était essentiel pour éviter que certaines pages restent bloquées hors du système.
