Etëm Design - Accueil

Portail de notification de l’Agence Bio

  • Logo du Portail de notification de l'Agence Bio
  • Le Portail de notification de l'Agence Bio est la plateforme officielle sur laquelle les opérateurs de la filière biologique effectuent leur déclaration administrative obligatoire, préalable à la certification bio et à l'accès aux aides publiques.

    Domaine

    Secteur Public & Agriculture

    Année

    2025

    Services

    UX Research

    Design UX/UI

    Responsive Design

    Design System

    Accessibilité

  • Mockup de l'interface desktop du Portail de notification de l'Agence Bio
  • Le Challenge

    La plateforme, développée et mise en production fin 2021, présentait de nombreux manquements aux normes d'accessibilité. Face à l'échéance réglementaire de juin 2025 imposant un seuil minimal de conformité RGAA, l'Agence Bio a confié la remise aux normes de l'existant, sans refonte globale de l'interface.

  • Comparatif Avant/Après : mise en conformité RGAA des interfaces
  • La Stratégie

    Le projet a débuté par un audit de l'existant, combinant une analyse RGAA et un recensement préalable des anomalies disponible sur ClickUp. Les écrans ont ensuite été reconstruits sur Figma à partir du Design System personnalisé, pour concentrer l'effort sur les corrections d'accessibilité. Les propositions structurelles ont été soumises aux développeurs avant toute présentation client, pour anticiper les implications techniques et défendre des suggestions réalistes.

  • Comparatif Avant/Après : réorganisation de la hiérarchie de la page de création de notification pour une meilleure accessibilité
  • La Solution

    Les corrections ont porté sur les ratios de contraste insuffisants, les textes en majuscules, l'identification visuelle des liens et l'ajout de placeholders sur les champs de saisie. Sur la page de création de notification, une restructuration a été proposée : l'inversion de la position des étapes et des champs de saisie respecte le sens de lecture naturel et met en avant les informations à compléter. Le responsive a été traité via les variables Figma, en liant typographie, espacements et paddings à des variantes mobiles sur l'ensemble des pages du parcours opérateur.

  • Interface responsive du parcours de création d'une notification, optimisée pour l'accessibilité et la lisibilité de l'information
  • Résultats

    La plateforme a été mise en conformité RGAA sur les points identifiés lors de l'audit. La restructuration de la page de création de notification, présentée en réunion avec l'appui de l'équipe de développement, a été validée par le client. L'interface livrée couvre l'intégralité du parcours opérateur en formats desktop et mobile.

  • Diagramme explicatif des correction d'accessibilité, avec la phrase "Une interface gagne toujours à être accessible", montrant comme les champs les contrastes, les champs de saisie et les liens du footer ont été optimisé pour gagner en clarté

Ouvert aux projets

Votre projetn’est qu’à un clic

Discutons-en

Portail de notification de l’Agence Bio

  • Logo du Portail de notification de l'Agence Bio
  • Services

    UX Research

    Design UX/UI

    Responsive Design

    Design System

    Accessibilité

    Le Portail de notification de l'Agence Bio est la plateforme officielle sur laquelle les opérateurs de la filière biologique effectuent leur déclaration administrative obligatoire, préalable à la certification bio et à l'accès aux aides publiques.

    Domaine

    Secteur Public & Agriculture

    Année

    2025

  • Mockup de l'interface desktop du Portail de notification de l'Agence Bio
  • Le Challenge

    La plateforme, développée et mise en production fin 2021, présentait de nombreux manquements aux normes d'accessibilité. Face à l'échéance réglementaire de juin 2025 imposant un seuil minimal de conformité RGAA, l'Agence Bio a confié la remise aux normes de l'existant, sans refonte globale de l'interface.

  • Comparatif Avant/Après : mise en conformité RGAA des interfaces
  • La Stratégie

    Le projet a débuté par un audit de l'existant, combinant une analyse RGAA et un recensement préalable des anomalies disponible sur ClickUp. Les écrans ont ensuite été reconstruits sur Figma à partir du Design System personnalisé, pour concentrer l'effort sur les corrections d'accessibilité. Les propositions structurelles ont été soumises aux développeurs avant toute présentation client, pour anticiper les implications techniques et défendre des suggestions réalistes.

  • Comparatif Avant/Après : réorganisation de la hiérarchie de la page de création de notification pour une meilleure accessibilité
  • La Solution

    Les corrections ont porté sur les ratios de contraste insuffisants, les textes en majuscules, l'identification visuelle des liens et l'ajout de placeholders sur les champs de saisie. Sur la page de création de notification, une restructuration a été proposée : l'inversion de la position des étapes et des champs de saisie respecte le sens de lecture naturel et met en avant les informations à compléter. Le responsive a été traité via les variables Figma, en liant typographie, espacements et paddings à des variantes mobiles sur l'ensemble des pages du parcours opérateur.

  • Interface responsive du parcours de création d'une notification, optimisée pour l'accessibilité et la lisibilité de l'information
  • Résultats

    La plateforme a été mise en conformité RGAA sur les points identifiés lors de l'audit. La restructuration de la page de création de notification, présentée en réunion avec l'appui de l'équipe de développement, a été validée par le client. L'interface livrée couvre l'intégralité du parcours opérateur en formats desktop et mobile.

  • Diagramme explicatif des correction d'accessibilité, avec la phrase "Une interface gagne toujours à être accessible", montrant comme les champs les contrastes, les champs de saisie et les liens du footer ont été optimisé pour gagner en clarté

Ouvert aux projets

Votre projetn’est qu’à un clic

Discutons-en

Portail de notification de l’Agence Bio

  • Logo du Portail de notification de l'Agence Bio
  • Le Portail de notification de l'Agence Bio est la plateforme officielle sur laquelle les opérateurs de la filière biologique effectuent leur déclaration administrative obligatoire, préalable à la certification bio et à l'accès aux aides publiques.

    Domaine

    Secteur Public & Agriculture

    Année

    2025

    Lien

    notification.agencebio.org (accès restreint)

    Services

    UX Research

    Design UX/UI

    Responsive Design

    Design System

    Accessibilité

  • Mockup de l'interface desktop du Portail de notification de l'Agence Bio
  • Le Challenge

    La plateforme, développée et mise en production fin 2021, présentait de nombreux manquements aux normes d'accessibilité. Face à l'échéance réglementaire de juin 2025 imposant un seuil minimal de conformité RGAA, l'Agence Bio a confié la remise aux normes de l'existant, sans refonte globale de l'interface.

  • Comparatif Avant/Après : mise en conformité RGAA des interfaces
  • La Stratégie

    Le projet a débuté par un audit de l'existant, combinant une analyse RGAA et un recensement préalable des anomalies disponible sur ClickUp. Les écrans ont ensuite été reconstruits sur Figma à partir du Design System personnalisé, pour concentrer l'effort sur les corrections d'accessibilité. Les propositions structurelles ont été soumises aux développeurs avant toute présentation client, pour anticiper les implications techniques et défendre des suggestions réalistes.

  • Comparatif Avant/Après : réorganisation de la hiérarchie de la page de création de notification pour une meilleure accessibilité
  • La Solution

    Les corrections ont porté sur les ratios de contraste insuffisants, les textes en majuscules, l'identification visuelle des liens et l'ajout de placeholders sur les champs de saisie. Sur la page de création de notification, une restructuration a été proposée : l'inversion de la position des étapes et des champs de saisie respecte le sens de lecture naturel et met en avant les informations à compléter. Le responsive a été traité via les variables Figma, en liant typographie, espacements et paddings à des variantes mobiles sur l'ensemble des pages du parcours opérateur.

  • Interface responsive du parcours de création d'une notification, optimisée pour l'accessibilité et la lisibilité de l'information
  • Résultats

    La plateforme a été mise en conformité RGAA sur les points identifiés lors de l'audit. La restructuration de la page de création de notification, présentée en réunion avec l'appui de l'équipe de développement, a été validée par le client. L'interface livrée couvre l'intégralité du parcours opérateur en formats desktop et mobile.

  • Diagramme explicatif des correction d'accessibilité, avec la phrase "Une interface gagne toujours à être accessible", montrant comme les champs les contrastes, les champs de saisie et les liens du footer ont été optimisé pour gagner en clarté

Ouvert aux projets

Votre projetn’est qu’à un clic

Discutons-en