The Agreenium Alliance ｜INRAE brings together 11 institutions around major challenges: agriculture, food, environment, and global health. To ensure its website reflected its missions and reached its audiences, a redesign focused on user experience was necessary. Here’s how we carried out this work of simplification, structuring, and enhancement, using Drupal.
Comprehensive support: from defining your needs to launching the website
With Agreenium, we carried out a close collaboration based on a deep understanding of their challenges. Upstream, we clarified the needs, prioritized improvements, and coordinated stakeholders. Our support covered technical aspects, writing the specifications, UX/UI, and regulatory compliance (GDPR, RGAA, RGS, PSSIE). This tailored approach laid a solid foundation for the redesign, application maintenance and hosting.
Our scope
We began with a comprehensive benchmark and UX audit, before rethinking the site structure and user journeys. This phase resulted in the creation of wireframes, which were tested with users to validate the interface usability.
At the same time, a visual benchmark and art direction workshops informed the design of an interface that is both attractive and true to Agreenium’s identity.
The development phase in Drupal then included content migration, performance optimization, and rigorous quality control, ensuring a reliable and high-performing website.
An unequivocal UX assessment
When a website needs to address researchers, students, the press, alumni, and an informed general public, while also highlighting a complex alliance with multiple missions, the main challenge isn’t technological. It’s experiential.
For Agreenium, UX design became the strategic core of the project. Because it all started with a simple observation: the site was no longer readable. Not for its audiences. Not for its contributors. In fact, two sites originally coexisted: AgreenU, a resource center, and Agreenium, the institutional site. So, we started with a UX audit of the existing site, which made it possible to identify the sticking points and define the work to be done for the redesign:
- An information architecture that was too dense, making content access difficult.
- A home page with little guidance, lacking clear headings and any visible call to action.
- No user journeys, even though the diversity of profiles required differentiated access.
- An unsatisfactory mobile experience, with elements that were hard to find.
- A lack of personalization and markers, which reinforced the sense of confusion.
- An outdated CMS (Drupal 7), causing technical obstacles and security risks.
A redesigned structure for readability and profile-based access
The starting point for the redesign was to rethink the site’s organization around its audiences, with a more intuitive structure and clearer content hierarchy. Several menu items were defined:
- Who are we?: to present the Alliance, its projects, and its news.
- Training and Careers: to guide those seeking career advice or professional development in the fields covered by Agreenium.
- Knowledge and Resources: content selected by theme and format.
- Research: to promote research and doctoral training, especially through Agreenium’s international research school.
- International: to support members’ international projects and develop the international network of teacher-researchers.
- You are: In addition to this structure, user journeys have been designed for each target audience, with smooth navigation.
Clear objectives, translated into practical applications
The redesign aimed at specific objectives that we translated into UX and technical choices:
- Clarify the alliance’s image, its mission and actions: this guided the design of the "Who are we?" section.
- Structure an offer of resources and online services tailored to its audiences: this involved all the work on the "Knowledge & resources" and "Training & careers" sections.
- Enable efficient navigation in a complex mass of information: this required efforts on filters, the search engine, taxonomy, and visual consistency.
- Design an easy back-office for contributors from different institutions to use: a requirement that Drupal 10 perfectly fulfilled, with particular attention paid to the contribution structure, notably via Layout Builder.
Leverage Drupal's advanced features and showcase content produced by member institutions
A self-training tool focused on agricultural and food transitions
Among the major innovations of the new site, the Discovery Pathways offer resources for self-training. Each pathway includes: a comprehensive presentation (objectives, prerequisites, target audience, outline), access to selected resources (video, article, podcast), a pedagogical summary, and a skills validation quiz.
The pathways can be filtered by topic and level, and their structure is designed to guide learning step-by-step, from the curious beginner to the specialist. This system fully leverages the advanced features of Drupal and highlights content produced by member institutions.
The training directory
A filterable search engine (field, degree, profile, institution, etc.) that links to detailed pages, connected to partner institutions. True to our approach, we chose open source and performance with the SolR search engine, faceted filters, and Ajax page reloads for greater fluidity.
The Knowledge & Resources Space
Curated, qualified, and enhanced content (ebooks, videos, journals, podcasts) accessible according to user profile and knowledge level.
A simplified contribution thanks to Drupal’s features
- Migration from Drupal 7 to Drupal 10.
- Modular editorial pages via Layout Builder (provision of editorial paragraphs, preview features, media management, help with entering accessibility information, etc.).
- Definition of roles and workflows.
- Advanced taxonomy to cross-reference topics, formats, and levels.
An interface design reflecting Agreenium's activities
The UI design is based on Agreenium’s existing visual identity, enhanced by a consistent artistic direction, supported by a design system in accordance with the atomic design approach. This approach, which organizes components from the simplest to the most complex (atoms → molecules → organisms), ensures the consistency, scalability, and maintainability of the site.
Do you also want to redesign your institutional Drupal website and create a more intuitive navigation?
For Agreenium, we refocused the site on the user experience, thoroughly transforming its digital ecosystem. UX design proved to be a strategic lever to clarify identity, structure complex content, and streamline interactions with diverse audiences. Drupal fully plays its part here, serving readability, modularity, and shared contribution.
Today, we are continuing with the creation of a connected space for alliance members, accessible via SSO Renater. Thank you to Agreenium ｜INRAE for their trust and collaboration on this great project!
Are you interested in redesigning your institutional Drupal site and building a more intuitive navigation? Let’s talk about your challenges!
Website URL: https://www.agreenium.fr/
Project dates: February 2024 - January 2025.
Go live: January 2025.
Agreenium｜INRAE
For more information, you can consult our case study on the subject.
