Design system site assurance : composants, accessibilité, budgets

En bref ■

Un design system est un investissement structurant qui transforme la façon dont une compagnie d’assurance produit et maintient ses interfaces digitales. Au-delà de la charte graphique classique, il fournit un catalogue de composants réutilisables et documentés — tableau de garanties, stepper de souscription, comparateur de formules, carte tiers payant — qui divisent par deux le temps de développement des nouvelles pages et garantissent la conformité RGAA native sur l’ensemble du parc digital. Budget de création : 15 000 à 40 000 € HT selon le périmètre (site vitrine seul ou site + parcours + espace adhérent). Le ROI est typiquement atteint en 12 à 18 mois grâce à la réduction des allers-retours design/dev, à l’accélération de la TMA et à la suppression des corrections d’accessibilité a posteriori.

Les 4 couches d'un design system assurance.

Pourquoi un design system est un sujet business, pas seulement un sujet design ■

La tentation est de considérer le design system comme un livrable de designer, utile mais pas indispensable. C’est une lecture réductrice qui coûte cher dans la durée. Pour un responsable marketing ou digital en assurance, un design system résout trois problèmes concrets que la charte graphique classique (un PDF de 40 pages avec les couleurs et le logo) ne résout pas.

Le premier problème est la dérive de cohérence. Sans design system, chaque nouveau développeur, chaque nouvelle page, chaque nouvelle fonctionnalité produit sa propre interprétation des composants : le bouton de devis n’a pas le même style sur la page auto et sur la page santé, le tableau de garanties est balisé différemment selon le développeur, les formulaires du parcours devis-souscription et de l’espace client en assurance n’ont pas la même logique de validation. Cette dérive est invisible au début, mais elle accumule de la dette technique et de la dette d’accessibilité qui se paie lors de l’audit RGAA.

Le deuxième problème est la lenteur de production. Sans composants réutilisables, chaque nouvelle page est conçue et développée from scratch — même si elle ressemble à 80 % à une page existante. Sur un projet de refonte de site de marque dans l’assurance, nous observons que les équipes qui disposent d’un design system livrent 40 à 50 % plus vite que celles qui travaillent à partir d’une charte graphique PDF et de maquettes Figma au cas par cas. Le troisième problème est la conformité RGAA. Depuis le 28 juin 2025, la conformité RGAA et accessibilité est obligatoire. Un design system dont chaque composant intègre nativement les contrastes AA, les labels ARIA, la navigation au clavier et le focus visible garantit que toute page assemblée à partir de ces composants est accessible par construction — au lieu de devoir corriger l’accessibilité a posteriori, composant par composant, page par page.

Les quatre couches d’un design system adapté à l’assurance ■

Un design system complet pour un site d’assurance s’organise en quatre couches superposées, de la plus fondamentale à la plus spécifique. La couche 1 — les design tokens — définit les valeurs élémentaires : palette de couleurs (avec contrastes AA documentés), typographie (famille, graisses, hiérarchie), espacements, ombres, coins arrondis, breakpoints responsive. Ces tokens sont exportables en variables CSS/SCSS et alimentent tout le reste du système. C’est le socle que nous avons documenté dans le Design System Eficiens v1.0.

La couche 2 — les composants de base — regroupe les briques élémentaires de toute interface : boutons (primaire, secondaire, tertiaire, états hover/focus/disabled), champs de formulaire (texte, select, date, checkbox, radio, upload), cartes, accordéons, onglets, modales, badges, alertes. Chaque composant est documenté avec ses variantes, ses états, ses règles d’espacement et ses propriétés d’accessibilité (rôle ARIA, focus visible, gestion clavier).

La couche 3 — les composants métier assurance — est ce qui distingue un design system générique d’un design system sectoriel. C’est la couche la plus stratégique et celle qui produit le plus de gains de productivité, parce qu’elle industrialise les composants que chaque site d’assurance doit produire manuellement s’ils n’existent pas dans le système.

Les 8 composants métier indispensables dans un design system assurance ■

Composant métier	Usage dans un site assurance	Enjeu accessibilité RGAA	Complexité de conception
Tableau de garanties	Pages produits, comparaison de formules, IPID en ligne	Balisage `th scope`, navigation clavier, responsive en mode carte	Élevée
Stepper de souscription	Parcours devis multi-étapes (santé, auto, MRH, prévoyance)	ARIA `aria-current="step"`, annonces de progression, focus géré	Élevée
Comparateur de formules	Page de comparaison côte à côte (3 à 5 niveaux de garantie)	Tableau complexe multi-colonnes, pas de couleur seule pour différencier	Élevée
Carte tiers payant	Espace adhérent mutuelle, affichage QR code et identifiants	Alternative textuelle du QR code, contraste suffisant sur fond coloré	Moyenne
Simulateur de remboursement	Pages produits santé, parcours de souscription	Résultats annoncés via ARIA live, labels sur tous les champs	Élevée
Timeline de sinistre	Espace client, suivi de dossier de déclaration	Structure sémantique chronologique, états lisibles au lecteur d’écran	Moyenne
Bandeau d’urgence / alerte	Header du site, communication de crise (intempéries, pandémie)	ARIA `role="alert"`, dismissable au clavier, pas de timeout	Faible
CTA espace adhérent	Header, toutes les pages, distinction visuelle du CTA devis	Focus visible, contraste AA, libellé explicite (pas « Se connecter »)	Faible

La couche 4 — les gabarits de pages — assemble les composants des couches précédentes en templates prêts à l’emploi : page produit santé, page produit IARD, landing page campagne, page éditoriale, FAQ structurée, page d’accueil segmentée. Ces gabarits accélèrent massivement la production éditoriale puisque chaque nouvelle page est une déclinaison d’un gabarit existant, pas une création from scratch.

Combien investir dans un design system et quel ROI en attendre ■

Le budget de création d’un design system dépend du périmètre couvert et du nombre de composants à concevoir. Pour un site vitrine institutionnel seul (couches 1 et 2 + 4 à 5 composants métier), comptez 15 000 à 25 000 € HT et 6 à 8 semaines de conception/développement. Pour un site complet incluant un parcours de souscription et un espace adhérent (les 4 couches + les 8 composants métier + 4 à 6 gabarits), l’enveloppe monte à 30 000 à 40 000 € HT et 10 à 14 semaines. Ces budgets incluent la conception dans Figma, le développement des composants en code (HTML/CSS/JS ou React), la documentation dans Storybook et la livraison des design tokens en variables CSS.

Le ROI se matérialise sur trois axes. Le premier est le gain de productivité en développement : les projets suivants (nouvelles pages, nouveaux parcours, simulateurs) sont livrés 40 à 50 % plus vite. Le deuxième est la réduction des corrections d’accessibilité : un composant conforme RGAA réutilisé 50 fois produit 50 pages conformes, au lieu de 50 corrections manuelles. Le troisième est la réduction des allers-retours design/dev en TMA WordPress et conformité DORA : le développeur intègre à partir de composants documentés, pas d’interprétation libre de maquettes. Sur un portefeuille digital d’assureur (site + parcours + espace adhérent), le ROI est typiquement atteint en 12 à 18 mois. Notre grille tarifaire 2026 détaille les enveloppes selon les typologies de projet.

Outils et méthode pour construire un design system en 2026 ■

Figma s’est imposé comme le standard de facto pour la conception de design systems dans le secteur de l’assurance en 2026. Ses fonctionnalités de composants, de variables (qui permettent de matérialiser les design tokens directement dans l’outil), d’auto-layout et de collaboration en temps réel en font le choix rationnel pour toute organisation de plus de 3 personnes impliquées dans le design. L’alternative Sketch, encore utilisée dans certaines équipes, perd du terrain chaque année en raison de son écosystème moins riche et de sa restriction macOS.

Côté développement, Storybook est l’outil de référence pour documenter et tester les composants codés. Il permet aux développeurs, aux designers et aux responsables qualité de visualiser chaque composant dans tous ses états (actif, hover, focus, disabled, erreur, rempli), de vérifier l’accessibilité via des addons intégrés (addon-a11y), et de s’assurer que les évolutions ne cassent rien via des tests de régression visuelle. La combinaison Figma (conception) + Storybook (code) + design tokens synchronisés constitue la colonne vertébrale technique d’un design system moderne.

En conclusion : un investissement de fondation, pas un luxe de grand groupe ■

Le design system n’est pas réservé aux grands assureurs qui ont les moyens d’AXA ou de la MAIF. En 2026, une mutuelle régionale qui investit 20 000 € dans un design system couvrant ses composants métier prioritaires (tableau de garanties, stepper devis, comparateur de formules) récupère cet investissement en moins de 18 mois par la seule accélération de la production et par la suppression des corrections d’accessibilité a posteriori. L’erreur serait de vouloir tout faire d’un coup : la bonne approche est de commencer par les tokens et les composants de base, d’ajouter les composants métier au fur et à mesure des projets, et de faire vivre le système dans la durée via la TMA. C’est ce que nous appliquons systématiquement chez Eficiens sur nos projets de refonte. Contactez notre équipe pour échanger sur votre situation.

Questions fréquentes sur le design system pour un site d’assurance ■

Quelle différence entre une charte graphique et un design system ?

La charte graphique est un document statique (souvent un PDF) qui définit l’identité visuelle : logo, couleurs, typographies, interdits graphiques. Le design system va beaucoup plus loin : c’est un écosystème vivant qui fournit des composants codés réutilisables (boutons, formulaires, tableaux, steppers), documentés avec leurs états, leurs propriétés d’accessibilité et leurs règles d’usage. La charte dit « le bouton primaire est vert ». Le design system fournit le bouton prêt à l’emploi, conforme RGAA, dans toutes ses variantes et tous ses états, avec le code CSS/HTML associé.

Faut-il un design system pour un site vitrine simple d'assureur ?

Oui, même pour un site de 30 à 50 pages. Un design system léger (tokens + composants de base + 3 à 4 composants métier) coûte 15 000 à 20 000 € HT et se rentabilise dès le premier cycle de TMA, parce que chaque évolution est plus rapide et chaque nouveau contenu hérite automatiquement de la conformité RGAA. Pour un site avec parcours de devis et espace adhérent, le design system est pratiquement indispensable — sans lui, la maintenance de la cohérence et de l’accessibilité sur trois dispositifs distincts devient un cauchemar.

Comment le design system aide-t-il la conformité RGAA ?

L’accessibilité est intégrée une seule fois, au niveau du composant, puis héritée automatiquement partout où ce composant est utilisé. Un bouton qui a un focus visible, un contraste AA et un libellé ARIA correct dans le design system sera correct sur les 200 pages où il est instancié. Sans design system, l’accessibilité se vérifie page par page, composant par composant — ce qui multiplie le coût d’audit et de correction par le nombre de pages. C’est le levier le plus sous-estimé du design system : il transforme la conformité d’un chantier ponctuel en qualité structurelle permanente.

Combien de temps faut-il pour créer un design system assurance ?

Pour un périmètre site vitrine + parcours devis, comptez 10 à 14 semaines entre le lancement et la livraison d’un design system opérationnel (tokens + composants de base + composants métier + documentation Storybook). La phase de conception dans Figma représente 4 à 6 semaines, le développement des composants codés 4 à 6 semaines, et la documentation 2 à 3 semaines en parallèle. Le design system est ensuite enrichi de manière continue au fil des projets et de la TMA.

Peut-on créer un design system progressivement ou faut-il tout faire d'un coup ?

L’approche progressive est non seulement possible mais recommandée. La bonne séquence : commencer par les design tokens et les composants de base lors du projet de refonte (ils sont nécessaires de toute façon), ajouter les composants métier prioritaires (tableau de garanties, stepper devis) au fur et à mesure de la conception des pages qui les utilisent, puis enrichir progressivement le système avec les composants secondaires lors des projets suivants ou en TMA. Un design system qui n’évolue plus est un design system mort — sa valeur vient précisément de sa capacité à croître avec les besoins.