Contexte
10 modules, 0 cohérence visuelle
En arrivant chez Altays en 2022, j'ai hérité d'une suite logicielle SIRH constituée d'une dizaine de modules développés indépendamment sur plusieurs années (1998–2020). Chaque module avait ses propres composants, ses propres couleurs, ses propres espacements. Des incohérences massives qui nuisaient à l'expérience utilisateur et ralentissaient considérablement les équipes de développement.
La mission : repartir de zéro pour construire un design system solide, documenté, adopté par toutes les équipes de développement et de conception produit, tout en assurant la continuité des livraisons produit et le respect des normes RGAA.
Phase 1 — Audit
Cartographier avant de construire
Audit visuel
Inventaire des incohérences
- Recensement de tous les types de composants existants sur les modules
- Identification des différentes règles ergonomiques appliquées sur chaque module
- Inventaire de toutes les couleurs et styles de composants en production
- Benchmark des frameworks disponibles : Material Design, Carbon (IBM), Fluent (Microsoft)
Ateliers de cadrage
Poser les fondations ensemble
- Atelier de sélection et présentation des composants retenus et de leur style
- Atelier pour définir les normes ergonomiques fondamentales à respecter
- Atelier de présentation des solutions techniques et du déroulé du projet
Phase 2 — Tokens & Couleurs
Les fondations du système
Les tokens de design sont la base de tout le système. Les premiers éléments définis ont été les couleurs, les règles typographiques, les espacements, la grille de construction et l'iconographie.
J'ai ensuite appliqué la méthodologie du design Atomic pour construire les composants en partant des atomes, afin de pouvoir les assembler progressivement, de la molécule à la page.
Régles de typographie
Régles palette chromatique - 1
Régles palette chromatique - 2
Phase 3 — Composants
Bibliothèque Figma & correspondance Vuetify
Pour chaque composant, j'ai défini les variantes, les props disponibles et le cadre d'utilisation, avant de l'intégrer dans Figma. La bibliothèque est organisée en miroir de la bibliothèque en ligne, pour que les PO et PMM puissent créer facilement leurs propres interfaces.
Bibliothéque en ligne
Bibliothéque Figma
Bouton bibliothèque en ligne
Bouton bibliothèque Figma
Phase 4 — Documentation & Adoption
Un design system inutile s'il n'est pas adopté
Documentation
Guidelines vivantes
- Guides d'utilisation pour chaque composant : quand l'utiliser, quand ne pas l'utiliser, alternatives
- Documentation des règles d'accessibilité : taille des cibles tactiles, contrastes, ordre de focus
- Release notes envoyées à chaque mise à jour pour documenter les nouveautés et évolutions
- Pages dédiées dans la bibliothèque en ligne : layout, typographie, couleurs, iconographie
Adoption
Accompagnement des équipes
- Sessions de formation de 2h avec chaque PO et PMM
- Mise en place d'un projet Jira pour intégrer la refonte des interfaces dans les sprints des équipes
- Point bimensuel avec les équipes pour récolter les retours d'expérience et les demandes d'évolutions
- Revues de design régulières sur chaque module pour vérifier la conformité
- Métriques de suivi : % d'écrans conformes par module, tracking trimestriel
Résultats
10
modules harmonisés visuellement et techniquement
×2
vitesse de production des maquettes après adoption complète
AA
conformité RGAA garantie sur tous les composants et interfaces de la suite Altays SIRH
Livrables