Design system management pour la CNSA
Product design
Design system
UX/UI
Challenge : Un socle commun pour des services publics plus inclusifs
La CNSA est chargée de la gestion de la 5ᵉ branche de la Sécurité sociale : l’autonomie. Sa mission est de garantir une répartition équitable des ressources et des services destinés aux personnes en perte d'autonomie, qu'il s'agisse de personnes âgées ou handicapées.
La mission allait au-delà de la création de composants. Il s’agissait de :
Servir une identité publique forte (Service public de l’autonomie)
S’adapter à des équipes pluridisciplinaires et à des produits variés
Garantir l'accessibilité (RGAA), de ses services
Offrir une alternative concrète au DS de l’État pour les services non éligibles
Et surtout : faire du design system un levier d’efficacité pour les équipes
Face à la montée en complexité de son écosystème digital, un besoin clair émerge : poser les fondations d’un design system commun, cohérent, et accessible.
Solution : un design system accessible, et adapté à la diversité des usages
Mise en place d’un socle robuste
Création de librairies : sur Figma + des Custom Elements (une librairie React avait été initiée, mais il n'y a pas de projet d'application pour l'instant)
Définition des fondations : couleurs, typos, grilles, icônes, espacements
Normalisation des usages grâce à des spécifications partagées (accessibilité, responsive, contenu, interactions)
Documentation et adoption
Rédaction d’un document d’onboarding clair et actionnable
Publication d’une documentation technique et fonctionnelle sur Supernova et son pendant dev sur Storybook
Création d’un processus de remontée de besoins pour ajuster le système en continu
Organisation d’ateliers interproduits pour aligner les usages et détecter les manques
Chaque décision de design, chaque composant, chaque livrable visait à aider concrètement les designers, développeurs et chefs de produit dans leurs missions.
Cycle de delivery
Le design system a été pensé comme un produit à part entière, avec un fonctionnement agile structuré en sprints de 2 semaines. Chaque cycle se terminait par une démo ouverte à l’ensemble des équipes concernées (design, dev, DSI, produit, métiers, communication).
Ce fonctionnement s’appuyait sur plusieurs leviers :
Rituels partagés : daily, refinement, sprint planning, sprint review, points d’accessibilité
Communication transverse : coordination régulière avec les produits intégrant le design system
Ateliers avec les produits : organisés pour faire émerger des besoins ou aligner plusieurs produits sur des composants communs
Suivi structuré via Lindie : les équipes pouvaient y créer des tickets, pour faire remonter des besoins ou signaler des bugs liés au design system
Documentation vivante : mise à jour continue pour refléter les évolutions livrées toutes les deux semaines
Cette organisation a permis à 10 produits et leurs équipes de partager un socle technique commun et converger vers un mode de conception efficace.
Création & documentation des composants
Un des volets clés de ma mission était de concevoir, documenter et livrer de nouveaux composants, et dans le même temps gérer la librairie Figma.
Chaque nouveau composant suivait un cycle clair :
Identification d’un besoin produit ou transversal
Conception UI + spécifications UX
Validation accessibilité (RGAA)
Livraison et documentation
De mon côté je mettais à jour la documentation dans deux canaux :
Sur Figma, avec des composants construit au plus proche du dev grâce à l’utilisation des variants, des auto-layouts, et des variables synchronisées aux tokens sur supernova (+spécification pour le développement)
Sur Supernova, avec la rédaction des différents usages et styles des composants pour les utilisateurs du design system (la partie technique étant rédigé par les développeurs)
📎 Voir la documentation en ligne
Résultat : une documentation actionnable, accessible et maintenable dans le temps, facilitant l’adoption du design system pour toutes les équipes.
Chaque composant du Design System de l’Autonomie est documenté selon une structure précises. Les sections dont j'étais responsable étaient structurées ansi :
L’usage décrit l’objectif fonctionnel du composant, ses contextes de localisation dans l’interface, ainsi que les bonnes pratiques d’utilisation. Elle inclut une série d’exemples corrects et incorrects pour guider les équipes dans leur mise en œuvre concrète.
Une page style, présente l’anatomie du composant, suivie de ses variantes (par type, device, options visuelles ou fonctionnelles), ses états ( hover, focus, error, read-only, disabled,… ) ses variantes en fonction de la surface (on-base, on-surface, on-contrasted) afin de toujours assurer un contraste suffisant.
Refonte de produit
En parallèle du travail continue d'évolution du design system, j’ai mené des refontes de produits stratégiques : l’espace de gestion des accès aux applications internes de la CNSA, utilisé par des dizaines de milliers de professionnels de la santé en France. Et le back-office qui permet de gérer les droits, profils, comptes utilisateurs… et qui posait de nombreux problèmes d’usage.
J’ai repris l’ensemble des parcours avec les équipes métier, reconçu les interfaces, et intégré les composants du design system pour en faire une expérience claire, cohérente et accessible.
Support design system et accompagnement UX/UI
J’ai également assuré un rôle transversal :
Référent UX/UI du design system auprès des autres designers
Aide à la mise en œuvre du design system dans les produits existants ou en construction
Animation d’ateliers inter-produits, notamment pour la conception de composants mutualisables, ou la recherche d'idée de nouveaux composants.
Cette posture de support et de transmission était essentielle pour garantir la bonne implémentation du design system, et être au plus près des besoins des utilisateurs de cette librairie.
Impact
+30 % de productivité pour les équipes design & produit (retour des équipes de développement d'Accenture durant la refonte d'un produit)
Une adoption facilitée grâce à l’onboarding et à la documentation
Des interfaces plus cohérentes, accessibles et maintenables
Une identité numérique publique renforcée, lisible et inclusive
Une meilleure collaboration entre UX, UI, tech et accessibilité
En résumé
Le design system de l'autonomie, est un véritable levier de transformation. À la CNSA, ce projet a permis d’aligner des dizaines d’acteurs autour d’une même vision de la conception produit, de créer des interfaces vraiment accessibles, tout en renforçant l'image de la caisse nationale de solidarité pour l'autonomie.
Crédits
Mon rôle
En tant que Lead UX UI dans une mission de Design System Management, j’ai :
Conçu et documenté des composants sur Figma + Supernova
Mené des audits UX/UI
Mené des refontes pour plusieurs produits
Animé des ateliers de conception
Soutenu la montée en compétence des designers et review certains travaux
Assuré le lien entre design, tech, produit, métier et accessibilité
l'équipe
Lead UX/UI
Nicolas Raherison
x2 UX/UI
x2 développeurs
x1 PO
x1 expert accessibilité
x1 expert design
outils
Figma
Supernova
Storybook
Linear & Lindie
Web component et React (côté dev)
Date / durée
2024 - 2025
