RappelConso
Le site RappelConso est une plateforme officielle du gouvernement français qui centralise les alertes et rappels de produits de consommation (alimentaires et non alimentaires) présentant un risque pour la santé ou la sécurité des consommateurs. Il permet aux citoyens de s’informer rapidement et de signaler des produits dangereux.
Demande client
Suite à la demande du gouvernement français d'harmoniser les interfaces à l'aide du Système de Design de l'État, nous avons rafraîchi l'interface de RappelConso avec l'équipe de la DGCCRF pour qu'elle soit plus intuitive et accessible.
Système de Design de l'État
La DGCCRF nous a sollicités pour appliquer le Système de l’État (DSFR) aux interfaces publiques de RappelConso et de son module TéléAssistance. Les maquettes principales ayant été préparées côté client, notre mission a consisté à les traduire fidèlement pour une nouvelle version du projet, en harmonisant composants et comportements, tout en garantissant conformité accessibilité et qualité de code.
Les objectifs
- Prendre en compte l'existant et le fort trafic du site
- Mettre à jour les développements à partir d'une base de code spécifique
- Adapter et décliner les composants du design system aux besoins
- Améliorer l'accessibilité et l'ergonomie
- Assurer la cohérence visuelle
Intégration front-end
Nous avons intégré en priorité les pages structurantes (accueil, recherche, détail d’alerte, flux / listes, interface TéléAssistance) en réutilisant autant que possible le code existant pour limiter les régressions.
Les composants DSFR ont été injectés de façon progressive (grille, typographie, boutons, alertes, onglets) en supprimant les styles redondants et en rétablissant une hiérarchie sémantique claire (titres, listes, navigation). Cette approche a permis de convenir rapidement d'une méthode avec l’équipe DGCCRF et de lancer le développement immédiatement après étude des besoins.
Développement
L’intervention sur la base fournie a consisté à factoriser des fragments dispersés (en-tête, alertes, listes d’items) et à aligner la palette, les espacements et états interactifs sur les tokens DSFR.
Nous avons réduit la dette CSS (suppression de règles mortes, consolidation des utilitaires), clarifié la structure pour une maintenance interne facilitée et documenté les points d’extension (évolution future des pages secondaires). Les ajustements ont également amélioré la compatibilité aux technologies d’assistance et permis une navigation plus pratique en respectant les standards et en évitant le code JavaScript complexe.
Une réussite agile
Le travail a été mené de sorte à effectuer une livraison globale permettant les premiers tests et retours, puis son extension aux pages secondaires pour assurer une cohérence complète. Le résultat : un socle modernisé, propre et homogène, exploitable sans refonte lourde.
