Contexte & Enjeux
Info.gouv.fr reçoit plusieurs millions de visites mensuelles et constitue le point d'entrée principal pour les citoyens souhaitant s'informer sur les politiques prioritaires du gouvernement. Face à des taux de rebond élevés (>60%) et une difficulté d'accès à l'information, une refonte s'imposait.
Les objectifs :
- Améliorer la clarté et l'accessibilité des landing pages stratégiques
- Augmenter le taux de conversion sur les CTA prioritaires (démarches, prises de RDV)
- Garantir une conformité RGAA AA+ et une cohérence DSFR stricte
- Réduire le temps d'accès à l'information critique pour les citoyens
- Préparer l'infrastructure de mesure (tracking GA4, GTM, consent mode)
Défi majeur : Concilier les exigences d'accessibilité réglementaires avec une expérience moderne et engageante, tout en respectant les contraintes du Design System de l'État français (DSFR).
Méthodologie UX & Design
Recherche & Audit
Audit DSFR complet (composants, tokens, contraste), analyse heuristique, benchmarking des sites institutionnels européens, analyse GA4 des parcours à risque.
Ateliers de cadrage
Workshops FigJam multi-parties (métiers, communication, dev) pour définir objectifs, messages clés, objections et priorisation RICE/MoSCoW des features.
Architecture & Wireframes
Simplification du sitemap (réduction profondeur de navigation), wireframes mobile-first annotés avec hiérarchie d'information optimisée (hero + preuves + CTA).
Design haute-fidélité
Maquettes Figma conformes DSFR avec propositions proactives de micro-interactions et transitions douces, validées et retenues par les équipes.
Prototypage & Tests
Prototypes interactifs haute-fidélité avec scénarios de test utilisateur, variantes A/B pour optimisation des CTA et messages hero.
Benchmark UX International
Analyse comparative des meilleures pratiques UX sur les sites gouvernementaux européens et nord-américains pour identifier les patterns d'excellence et les opportunités d'innovation.
Sites gouvernementaux analysés
GOV.UK
Excellence en navigation orientée tâche et messages orientés bénéfices utilisateur
Canada.ca
Structure "How can we help you?" optimisant l'accès rapide aux services prioritaires
European Union
Design épuré avec recherche prioritaire et architecture d'information claire
Government Portal
Catégorisation par domaines métiers avec iconographie claire et CTA explicites
Gouvernement.fr (avant)
Approche communication institutionnelle avec focus actualités politiques
Bundesregierung.de
Gestion complexe de la structure fédérale avec personnalisation du contenu
Insight clé : Les sites les plus performants (GOV.UK, Canada.ca) privilégient une approche "service d'abord" vs "institution d'abord". L'accent est mis sur ce que peut accomplir l'utilisateur plutôt que sur la communication gouvernementale.
Ateliers Collaboratifs
Workshops FigJam multi-parties prenantes pour aligner les objectifs métiers, les contraintes techniques et les attentes utilisateurs. Approche "Design Thinking" adaptée au contexte institutionnel.
Détails des ateliers
Atelier FigJam - Refonte Politiques Prioritaires
Session collaborative avec les équipes métiers, communication et technique pour identifier les irritants UX et co-construire les solutions. Méthode divergence → convergence avec priorisation RICE.
🔍 Session 1 - Diagnostic
- Identification des points de friction utilisateur
- Mapping des contraintes techniques et éditoriales
- Analyse des objectifs métiers par direction
💡 Session 2 - Idéation
- Brainstorming solutions UX (baromètre simplifié, CTA clairs)
- Exploration de patterns d'interaction innovants
- Validation faisabilité technique en temps réel
✅ Session 3 - Décision
- Priorisation MoSCoW des fonctionnalités
- Définition architecture d'information cible
- Roadmap de déploiement par étapes
Prototypage & Design System
Contribution à l'adaptation du DSFR (Design System de l'État Français) pour créer des composants spécifiques au baromètre des Politiques Prioritaires. Approche atomic design avec documentation complète pour les équipes de développement.
Composants du design system
Design System - Adaptation DSFR
Contribution à la création et à l'adaptation de composants spécialisés (Structure, États, Style, Alternatives) pour le baromètre des Politiques prioritaires, basés sur les normes DSFR. Documentation complète des tokens, variants et guidelines d'usage.
🧩 Structure
Définition des éléments de composant avec hiérarchie claire et espacement cohérent selon les tokens DSFR.
⚡ États
Gestion complète des états interactifs (défaut, survol, focus, désactivé) avec respect des contraintes d'accessibilité RGAA.
🎨 Style
Déclinaisons visuelles (horizontales, verticales) avec bordures harmonisées et typographie système cohérente.
🔄 Alternatives
Variantes desktop/mobile avec options d'affichage (vue desktop, cartes verticales) pour optimiser l'expérience multi-device.
Innovation DSFR : Contribution à la création de composants inédits tout en respectant strictement les contraintes du design system gouvernemental. Cette approche a permis de maintenir la cohérence visuelle tout en répondant aux besoins spécifiques du projet.
Transformation UX/UI : Avant / Après
Comparaison de l'expérience utilisateur avant et après la refonte. Focus sur l'amélioration de la lisibilité, de l'accessibilité et de l'engagement utilisateur à travers une approche data-driven.
Avant - Approche institutionnelle
Problèmes identifiés :
- Navigation complexe avec trop de niveaux
- Contenu orienté "communication" vs "service"
- Hiérarchie visuelle peu claire
- CTA noyés dans le contenu éditorial
- Accessibilité RGAA non optimale
Après - Approche orientée utilisateur
Améliorations apportées :
- Architecture d'information simplifiée
- Messages orientés bénéfices utilisateur
- Hiérarchie visuelle renforcée (hero + preuves + CTA)
- CTA clairement identifiables et accessibles
- Conformité RGAA AA+ garantie
- Performance optimisée
Impact mesurable de la transformation
Processus de Design
Audit & Diagnostic
Audit DSFR complet : identification des écarts de composants, tailles, interlignages, états focus/hover, ratios de contraste. Participation à l'analyse des parcours GA4 pour identifier les points de friction.
Ateliers de cadrage
Workshops FigJam pour aligner métiers/communication/tech sur les politiques prioritaires (PPG). Cartographie des parcours critiques et priorisation des fonctionnalités.
Wireframing & Architecture
J'ai produit des wireframes clairs et structurés, mobile-first annotés avec hiérarchie d'information optimisée, qui ont facilité le travail de l'équipe de développement. Simplification du sitemap pour réduire la profondeur de navigation.
Design haute-fidélité
Maquettes Figma conformes DSFR avec propositions proactives de micro-interactions. Ajustements tokens (typo, couleurs, spacing) et composants pour garantir accessibilité AA+.
Prototypage & Validation
J'ai prototypé les solutions retenues et collaboré avec les développeurs pour faciliter leur intégration. Variantes A/B des sections hero pour optimiser les messages et CTA. Tests d'accessibilité (NVDA, VoiceOver).
Déploiement & Mesure
Documentation développeur et design system. Suivi des optimisations continues.
Résultats & Impact Mesurés
Évolution des indicateurs clés de performance
Impact avant / après refonte
Livrables & Design System
Au-delà des écrans, j'ai contribué à la production d'un ensemble de livrables pour garantir la pérennité et la scalabilité du projet :
Wireframes annotés
Séries complètes de wireframes mobile-first avec annotations détaillées sur la hiérarchie d'information et les comportements.
Maquettes haute-fidélité
Maquettes Figma avec micro-interactions et transitions douces. Variantes de hero (titre court orienté bénéfice + preuve + CTA).
Design System DSFR
Librairie Figma unifiée (atoms → templates) avec tokens normalisés (typo, spacing, couleurs) et guidelines d'usage.
Documentation développeur
J'ai participé à la documentation technique avec règles de responsive, nomenclature des composants, et exemples d'intégration.
Rapport d'audit RGAA
Rapport détaillé des écarts identifiés et corrections appliquées pour garantir la conformité AA+.
Design System : Participation à la normalisation autour du DSFR via l'utilisation et l'enrichissement d'une bibliothèque Figma déjà en place (atoms → templates) avec tokens normalisés et guidelines d'usage par composant (quand/comment, do/don't). Cette rationalisation a permis de réduire le temps de design/intégration de 40% et d'améliorer l'homogénéité UI sur l'ensemble des projets.
Apprentissages & Insights
- L'accessibilité comme contrainte créative : Le respect strict du RGAA AA+ n'est pas un frein à l'innovation, mais un cadre qui force à penser clarté et lisibilité. Les contraintes de contraste et de hiérarchie ont conduit à des choix de design plus forts et plus efficaces.
- La puissance des messages orientés bénéfices : Remplacer les titres institutionnels par des messages centrés sur les avantages concrets pour le citoyen a eu un impact direct et mesurable sur l'engagement (+28%) et la conversion (+42%).
- L'importance du cadrage multi-parties : Les ateliers FigJam avec métiers, communication et tech ont permis d'aligner rapidement toutes les parties prenantes et d'éviter les allers-retours coûteux en fin de projet.
- Le Design System comme investissement stratégique : La normalisation DSFR et l'enrichissement de la librairie Figma unifiée ont réduit la dette de design de 60% et accéléré significativement les futurs projets.
Réflexion clé : Dans un contexte de service public, chaque décision de design a un impact direct sur l'accès aux droits et aux services pour des millions de citoyens. Cette responsabilité impose une rigueur méthodologique et une attention aux détails qui vont bien au-delà de l'esthétique.
Prêt·e à faire évoluer vos services publics ?
J'accompagne les organisations publiques et parapubliques pour transformer leurs plateformes numériques en expériences inclusives, accessibles et orientées impact. Parlons de vos prochains défis.
Réponse sous 48h – Possibilité de collaboration en régie ou en mission ciblée.