Actiris disposait de plusieurs applications web destinées aux citoyens, aux entreprises, aux partenaires et aux agents internes. Mon rôle était de structurer un Design System pour homogénéiser ces interfaces, améliorer leur accessibilité et créer un langage commun entre design, produit et développement.
Le Design System devait servir plusieurs produits numériques, avec des publics, des parcours et des contraintes métier différentes. L’enjeu n’était donc pas seulement graphique : il fallait rendre les composants plus cohérents, plus robustes et plus faciles à reprendre par les équipes.
La mission a combiné audit de l’existant, priorisation des composants, amélioration UX, vérification accessibilité, tests utilisateurs avec une personne mal voyante, création d’une bibliothèque Figma et accompagnement des développeurs pour la bibliothèque Storybook.
Compétences mobilisées
La première étape a consisté à inventorier les composants présents dans les applications Actiris, puis à identifier ceux qui étaient récurrents, critiques pour l’expérience utilisateur ou suffisamment complexes pour mériter une documentation dédiée.
Recensement des composants existants, regroupement des usages similaires et sélection des patterns à intégrer au Design System.
Vérification des comportements, libellés, états, variantes et règles d’usage au regard des standards UX courants.
Contrastes, tailles, zones de clic, focus, états d’erreur, libellés ARIA et usages avec barrette braille et synthèse vocale ont été vérifiés.
Chaque composant a été traité comme un objet de décision : à quoi sert-il, dans quels cas l’utiliser, quelles variantes sont nécessaires, quels états doivent exister et quelles règles garantissent son accessibilité.
Lister les composants utilisés dans les applications, repérer les doublons, les variantes implicites et les écarts entre écrans.
Sélectionner les composants récurrents, structurants ou sensibles pour l’usage, afin de concentrer l’effort sur ce qui crée le plus de cohérence.
Comparer chaque composant aux conventions d’interface attendues : lisibilité, affordance, états, feedback, hiérarchie et charge cognitive.
Contrôler les contrastes, tailles de texte, zones interactives, focus visibles, libellés accessibles, états d’erreur et comportements clavier.
Observer l’usage des applications avec une barrette braille et un outil de synthèse vocale afin de comprendre les parcours non visuels et d’identifier les améliorations nécessaires.
Formaliser les composants, variantes, tokens, règles d’usage et critères de validation dans des supports exploitables par les designers et développeurs.
Le travail ne s’est pas limité à produire des écrans. Il a abouti à une base documentée, partageable et alignée avec les outils des équipes : Figma pour le design, Storybook pour les composants codés et ZeroHeight pour la documentation transverse.
Création d’une librairie structurée avec tokens, composants, variants, états et règles d’usage pour accélérer la conception et limiter les écarts.
Accompagnement des développeurs pour traduire les composants en bibliothèque technique, avec variantes, états et contraintes d’accessibilité.
Documentation des composants, règles UX, recommandations d’accessibilité, critères de décision et bonnes pratiques de contribution.
Mise en place d’une méthode de revue pour garder les composants cohérents, accessibles et maintenables dans la durée.
Le Design System a permis de rendre visibles les décisions d’interface, d’aligner les équipes autour de composants communs et d’intégrer l’accessibilité plus tôt dans la conception. Les designers disposent d’une librairie claire, les développeurs d’un référentiel de composants, et les équipes produit d’un support pour arbitrer plus vite.