Le problème
Après avoir conçu deux premiers outils pour Preventimmo, je documentais déjà les spécificités de chaque composant sur Confluence, avec des composants Adobe XD propres à chaque projet. Avec un troisième outil, puis d’autres à venir, il devenait nécessaire de centraliser tout ça dans une bibliothèque partagée plutôt que de garder des composants dispersés d’un fichier à l’autre.
Les objectifs
Ce design system répondait à plusieurs besoins à la fois : gagner du temps de conception en évitant de redessiner les mêmes composants à chaque nouvel outil, faciliter le travail des différentes équipes de développement en leur donnant une base commune, garantir aux utilisateurs une expérience cohérente d’un outil à l’autre, et simplifier la maintenance dans la durée.
Ma démarche
Au-delà du visuel, le design system couvrait aussi les comportements : les différents états des composants (survol, sélection, ouvert/fermé, connecté/déconnecté, focus…) étaient définis de façon centralisée, pour rester cohérents et réutilisables d’un outil à l’autre.
Côté responsive, j’ai prévu trois comportements principaux : desktop, demi-écran et mobile, avec parfois des versions intermédiaires. Le cas du demi-écran est directement lié à l’usage réel de ces outils internes : sous Windows, il est courant de scinder l’écran en deux pour travailler sur deux fenêtres en parallèle, un usage que je voulais couvrir spécifiquement.
Le système intégrait aussi un thème sombre et un thème clair.
Le travail UI
J’ai structuré le design system autour de tokens (couleurs partagées, couleurs de thème, couleurs de graphiques) et d’une typographie cohérente, avant de construire une bibliothèque de composants couvrant les besoins réels des outils : datepicker, tags, notifications à plusieurs niveaux,….
J’ai aussi conçu une iconographie sur-mesure, transformée en font-icône avec 3 graisses différentes, pour une intégration plus légère et plus flexible côté développement.
Les décisions de conception
Le système d’icônes repose sur deux approches distinctes, selon l’usage. Les grandes thématiques visuelles, qui nécessitent des ombres et des dégradés, sont en SVG. Le reste de l’iconographie fonctionne en font-icône, pour réduire le temps de chargement : elle couvre un grand nombre de cas d’usage, avec 3 graisses différentes pour encore plus de nuances selon le contexte.
Sur l’accessibilité, les thèmes sombre et clair respectaient tous deux un bon niveau de contraste et aucune information importante ne reposait uniquement sur la couleur : un message d’erreur, par exemple, était toujours accompagné d’un symbole, pour rester compréhensible aux personnes ayant une déficience visuelle liée aux couleurs.
Travail d’équipe
L’adoption du design system s’est faite naturellement : il a été appliqué directement sur un outil alors en cours de développement, sans besoin de faire migrer une équipe déjà habituée à d’autres pratiques.
Les résultats
Le design system a tenu ses promesses : gain de temps de conception, uniformisation entre les outils, et une charge de travail allégée qui nous a permis de nous consacrer à d’autres projets en parallèle.
Les enseignements
Ce n’était pas mon premier design system, mais ce projet a confirmé à quel point c’est indispensable dès qu’une petite équipe doit gérer plusieurs projets en parallèle : c’est souvent dans ces conditions-là, plus que dans une grande équipe, qu’un système bien pensé fait la vraie différence.
Font-icones
Chaque version inclut aussi des éléments invariables, comme les icônes WYSIWYG, les logos produits ou les pictos spécifiques comme les « Andrew ».
Pour répondre aux différents usages, la font existe en trois graisses : Regular, Medium et Bold.
J’ai créé une iconographie sur mesure pour l’ensemble des projets. Les icônes sont dessinées sous Illustrator, puis intégrées dans une font-icône personnalisée.
