Santé · Design system
Confidentiel
Un écosystème de quatre web apps qui avait grandi séparément, sans langage commun, ni graphique ni technique. Ma mission : lui donner un design system cohérent, durable et scalable.
Le problème
Quatre web apps (portail, base de comptes rendus, site vitrine, back-office) sans langage commun, chacune sur sa propre stack : Vue.js, React, WordPress.
La décision clé
Concilier le vocabulaire métier avec les conventions de design, d'usage et d'accessibilité (RGAA, WCAG), plutôt que d'imposer l'un sur l'autre.
Ce que ça a changé
Tout l'écosystème repensé : plus de 100 composants et variants avec mode clair et sombre natif, validés dans Figma et à l'étude côté développement.
Design systemAccessibilité RGAAConduite du changementCollaboration design et dev assistée par l'IA
Quatre produits, quatre langages : chacun avait ses couleurs, ses coins, ses boutons, sans règle commune. L'existant n'est pas montré.
01 · Contexte et problème
Un écosystème qui avait grandi en morceaux
La plateforme relie des établissements de santé et des professionnels à distance, sur un parcours métier dense. Le produit se composait de quatre web apps qui avaient chacune évolué de leur côté (portail, base de comptes rendus, site vitrine, back-office), sans compter que chacune reposait sur sa propre stack : Vue.js, React, WordPress.
L'incohérence ne s'arrêtait pourtant pas aux frontières des produits : sur le portail seul, plusieurs implémentations différentes d'un même composant coexistaient déjà, sans que la stack technique puisse servir d'excuse.
Les utilisateurs demandaient par ailleurs un mode sombre, pour leur confort visuel. À la demande du dirigeant, il fallait repenser tout l'écosystème et lui donner un système cohérent et durable, tout en évangélisant l'UX/UI auprès des équipes métier.
Concilier le métier et les conventions.
(la décision clé)
02 · Démarche
Cadrer avec celles et ceux qui construisent
- Ateliers de cadrage avec les devops et les équipes de développement.
- Audit et rationalisation de l'existant, à l'échelle des quatre produits.
- Arbitrage sur les composants : pour un même composant (textfields, cards...), plusieurs implémentations techniques coexistaient, y compris au sein d'un seul produit. Sans librairie commune côté développement, reconstruction du système écran par écran pour repérer chaque divergence avant de la trancher.
- Conception en binôme avec les devops, pour une double lecture humaine et IA, avec les principes métier à faire entrer dans les conventions design plutôt qu'effacés au profit d'une convention générique.
- Un levier aussi pour proposer la refonte de certains parcours UX/UI, au fil de la reprise des composants.
03 · Solution
Trois couches de couleur, une règle métier
- Une architecture couleur sémantique à trois couches (primitives, couleurs de mode, rôles sémantiques), avec un mode sombre natif demandé par les utilisateurs, conforme RGAA.
- Aucun état focus n'existait sur les logiciels du client, et les boutons avaient des états hover et pressed, mais pas les cellules de tableau ni les autres composants : rationalisation de l'ensemble des composants interactifs sur une base cohérente (Enabled, Hover, Pressed, Focus, Disabled).
- Plus de 100 composants et variants publiés et documentés, avec leurs variables et tokens.
Documenter pour deux lecteurs : humain et machine.
(la conséquence)04 · Résultats
100+
composants et variants publiés et documentés
3
couches de couleur sémantique, mode clair/sombre inclus
RGAA
contraste vérifié et validé pour tous les composants
Système validé dans Figma, à l'étude pour l'implémentation côté développement. Le périmètre s'est élargi : cadrage d'une version mobile en cours.
05 · Ce que j'en retiens
Le ROI avant l'esthétique
Un chiffre modeste et défendable convainc mieux qu'une promesse spectaculaire.
Le métier avant la convention
Le contexte métier prime sur la convention générique d'un design system.
Deux lecteurs, un système
Documenter pour l'humain et pour la machine en fait un actif réellement implémentable.