Design System

Le contexte

Un catalogue produit sans cohérence visuelle

Le catalogue produit avait évolué sans cadre visuel commun : chaque produit avait développé ses propres composants, avec des styles et comportements divergents. L'initiative : harmoniser visuellement l'ensemble du catalogue autour d'un design system unique.

À gauche, des composants développés indépendamment par chaque équipe avec des styles divergents. À droite, un composant unique documenté et réutilisé sur l'ensemble du catalogue.

Le vrai défi

Faire adopter le système, pas juste le livrer

Intégrer plus de 80 composants n'est pas la partie difficile. Le vrai enjeu, c'est de s'assurer que chaque dev sait où trouver la documentation, comprend quand utiliser quel composant, et applique les bons patterns. Sans cet accompagnement, le design system reste un fichier Figma que personne utilise.

La méthode

Documenter, sensibiliser, accompagner

J'ai d'abord mis à jour l'ensemble des maquettes Figma avec les nouveaux composants du design system. Chaque composant livré côté front-end était immédiatement documenté avec ses cas d'usage, ses variantes et ses règles d'implémentation. En parallèle, j'ai mis en place des sessions de sensibilisation et du pair programming avec les devs pour ancrer les bons réflexes directement dans leur workflow quotidien. Les écrans principaux ont été traités en premier pour que l'impact soit visible rapidement sur les parcours les plus utilisés.

Ce que ça a changé

Du standard de fait à la référence d'équipe

À la fin de la mission, les nouveaux écrans utilisaient systématiquement le design system et la documentation servait de référence dans les revues de code. Pour assurer la continuité, j'ai documenté les règles de contribution.

Le design system a harmonisé le catalogue et accéléré le delivery. La documentation et le process de revue garantissent que les nouveaux composants restent cohérents avec le système existant. Ce socle de composants cohérents a aussi facilité le chantier accessibilité : un composant rendu accessible dans le design system bénéficie à l'ensemble du catalogue.