L’Alliance Agreenium ｜INRAE regroupe 11 établissements autour des grands enjeux : agriculture, alimentation, environnement et santé globale. Pour que son site reflète ses missions et touche ses publics, il fallait une refonte centrée sur l’expérience utilisateur. Voici comment nous avons mené ce travail de simplification, de structuration et de valorisation, avec Drupal.
Un accompagnement global : de la définition des besoins à la mise en production du site
Avec Agreenium, nous avons mené une collaboration étroite, fondée sur une compréhension fine de leurs enjeux. En amont, nous avons clarifié les besoins, priorisé les évolutions et coordonné les parties prenantes. Notre accompagnement a couvert les aspects techniques, la rédaction du cahier des charges, l’UX/UI et la conformité réglementaire (RGPD, RGAA, RGS, PSSIE). Cette approche sur-mesure a permis de poser les bases solides pour la refonte, la TMA et l’hébergement.
Notre périmètre
Nous avons débuté par un benchmark et un audit UX approfondis, avant de repenser l’arborescence et les parcours utilisateurs. Cette phase a abouti à la création de wireframes, testés auprès d’utilisateurs pour valider l’ergonomie des interfaces.
En parallèle, un benchmark visuel et des ateliers de direction artistique ont nourri la conception d’une interface à la fois esthétique et fidèle à l’identité d’Agreenium.
La phase de développement sous Drupal a ensuite intégré la migration des contenus, l’optimisation des performances et un contrôle qualité exigeant, garantissant un site fiable et performant.
Un diagnostic UX sans appel
Quand un site doit parler à la fois à des chercheurs, à des étudiants, à la presse, à des alumni et au grand public averti, tout en valorisant une alliance complexe aux multiples missions, l’enjeu principal n’est pas technologique. Il est expérientiel.
Pour Agreenium, l’UX design s’est imposé comme le cœur stratégique du projet. Car tout commençait par un constat simple : le site n’était plus lisible. Ni pour ses cibles. Ni pour ses contributeurs. D’ailleurs, deux sites coexistaient à l’origine : AgreenU, centre de ressources, et Agreenium, site institutionnel. Nous avons donc démarré par un audit UX du site existant qui a permis d’identifier les points bloquants et de cadrer les axes de travail pour la refonte :
- Une architecture d’information trop dense, rendant l’accès aux contenus difficile.
- Une page d’accueil peu directive, sans titres clairs ni appel à l’action visible.
- Pas de parcours utilisateurs, là où la diversité des profils exigeait des accès différenciés.
- Une expérience mobile peu satisfaisante, avec des éléments peu visibles.
- Un manque de personnalisation et de repères, qui renforçait le sentiment de confusion.
- Un CMS en fin de vie (Drupal 7), source de freins techniques et de risques de sécurité.
Une arborescence repensée pour la lisibilité et l’accès par profil
Le point de départ de la refonte a été de repenser l’organisation du site autour de ses publics, avec une arborescence plus intuitive et une hiérarchisation des contenus plus explicite. Plusieurs entrées de menu ont été définies :
- Qui sommes-nous ? : pour présenter l’Alliance, ses projets, ses actualités.
- Formations et métiers : pour orienter les publics en quête d’orientation ou de professionnalisation dans les filières couvertes par Agreenium.
- Savoirs et ressources : des contenus sélectionnés par thématiques et par format.
- Recherche : pour valoriser la recherche et la formation doctorale notamment via l’école internationale de recherche d'Agreenium.
- International : pour accompagner les projets des membres à l'international et développer le réseau international d'enseignants-chercheurs.
- Vous êtes : À cette structuration s’ajoutent des parcours utilisateurs pensés pour chaque cible, avec une navigation fluide.
Des objectifs clairs, traduits en usages
La refonte visait des objectifs précis que nous avons traduits en choix UX et techniques :
- Clarifier l’image de l’alliance, sa mission et actions : cela a guidé la conception de la rubrique « Qui sommes-nous ? ».
- Structurer une offre de ressources et de services en ligne adaptée à ses cibles : c’est tout le travail sur les rubriques « Savoirs & ressources » et « Formations & métiers ».
- Permettre une navigation efficace dans une masse d’information complexe : ce qui a nécessité un effort sur les filtres, le moteur de recherche, la taxonomie et la cohérence visuelle.
- Concevoir un back-office facile à prendre en main pour les contributeurs de différents établissements : une exigence que Drupal 10 a parfaitement permis de satisfaire, en y ajoutant un soin particulier à la structure de contribution, via Layout Builder notamment.
Tirer parti des fonctionnalités avancées de Drupal et valoriser les contenus produits par les établissements membres
Un outil d’auto-formation autour des transitions agricoles et alimentaires
Parmi les innovations majeures du nouveau site, les Parcours Découvertes proposent des ressources pour l'auto-formation. Chaque parcours comprend : une présentation globale (objectifs, prérequis, public visé, plan), la consultation de ressources sélectionnées (vidéo, article, podcast), un résumé pédagogique, un quiz de validation des acquis.
Les parcours sont filtrables par thématique et niveau et leur structure a été pensée pour accompagner pas à pas l’apprentissage, du curieux au spécialiste. Ce dispositif tire pleinement parti des fonctionnalités avancées de Drupal et valorise les contenus produits par les établissements membres.
L’annuaire des formations
Un moteur de recherche filtrable (domaine, diplôme, profil, établissement…) qui renvoie vers des fiches détaillées, reliées aux établissements partenaires. Fidèles à notre approche, nous avons opté pour l’open source et la performance avec le moteur de recherche SolR, des filtres à facette et rechargement Ajax de la page pour plus de fluidité.
L’espace Savoirs & Ressources
Des contenus triés, qualifiés et enrichis (ebooks, vidéos, revues, podcasts) accessibles selon le profil utilisateur et leur niveau de connaissance.
Une contribution simplifiée grâce aux fonctionnalités de Drupal
- Passage d’un Drupal 7 à un Drupal 10.
- Pages éditoriales modulables via Layout builder (mise à disposition de paragraphes éditoriaux, fonctionnalités de prévisualisation, gestion des médias, aide à la saisie des informations d’accessibilité…).
- Définition de rôles et workflows.
- Taxonomie avancée pour croiser thématiques, formats et niveaux.
Un design d’interface reflet des activités d'Agreenium
L’UI design repose sur la charte graphique existante d’Agreenium, enrichie d’une direction artistique cohérente, portée par un design system conformément à l’approche atomic design. Cette approche, qui structure les composants du plus simple au plus complexe (atoms → molecules → organisms), garantit la cohérence, l’évolutivité et la maintenabilité du site.
Vous aussi, vous voulez refondre votre site institutionnel Drupal et construire une navigation plus intuitive ?
Pour Agreenium, nous avons recentré le site sur l’expérience utilisateur, transformant en profondeur son écosystème numérique. L’UX design s’est révélé être un levier stratégique pour clarifier l’identité, structurer des contenus complexes et fluidifier les interactions avec des publics variés. Drupal y joue pleinement son rôle, au service de la lisibilité, de la modularité et de la contribution partagée.
Nous poursuivons aujourd’hui avec la création d’un espace connecté pour les membres de l’alliance, accessible via SSO Renater. Merci à Agreenium ｜INRAE pour leur confiance et leur collaboration sur ce beau projet !
Refondre votre site institutionnel Drupal et construire une navigation plus intuitive vous intéresse ? Parlons de vos enjeux !
URL du site : https://www.agreenium.fr/
Date du projet : février 2024 - janvier 2025.
Mise en production : janvier 2025.
Agreenium｜INRAE
Pour plus d’informations, vous pouvez consulter notre étude de cas sur le sujet.
