Launch of the Office for Climate Education website

The project objectives

The La Main à la pâte Foundation hosts the Office For Climate Education (OCE), a foundation aimed at promoting education on climate change. The OCE manages an international network made up of scientific institutions, NGOs, and educational institutions, dedicated to providing educational resources. The foundation entrusted our team with the redesign of its website www.oce.global using Drupal 8, including UX and UI design, development and integration, SEO and performance optimization, and finally, preventative site maintenance for five years.

The project had to meet the following main objectives: 

• Offer a multilingual bank of educational resources; 
• Promote communication around projects and exchanges between teachers and scientists; 
• Provide a collaborative work platform allowing network participants to create resources; 
• Offer a platform giving dynamic access to field contacts; 
• Share and communicate about the OCE institution as well as network partners. 

The major challenges of this redesign focused on optimizing the user experience for intuitive resource searching, and implementing certain features to facilitate collaborative work among network participants. 

UX and UI highlights 

With its rich documentation, the main challenge in terms of user experience was to offer an effective search.  

• A faceted filtering system, with real-time (Ajax) result refresh; 
• Highlighting resources and workshops on the homepage to enable quick access to the latest published content; 
• An "Accessibility" button, which allows adjustment of contrast and text size for reading adapted to individual needs; 
• A tab system in editorial pages to make it easier to navigate between different contents; 
• A personal area where users can customize their information, quickly find their bookmarked content, and submit their own publications; 
• Offer a collaborative and sharing aspect by allowing users to add their own content and complete their user profile to appear, among other things, on the OCE Network map.

On the interface design side, we were responsible for developing the web design guidelines, based on OCE’s very colorful visual identity consisting of 7 colors. 

Main features 

The site offers the following features: 

• Multilingualism: the site is available in four languages (FR, EN, DE, ES) and supports both Latin and non-Latin languages (Chinese, Arabic). 
• Workflow: a simple workflow system has been implemented. The publication process involves content (draft, published, etc.) as well as validation of registration to a working group called a workshop. 
• Workshop: the site provides a workgroup (workshop) management feature. Users can access associated content after registering for a workshop, publish resources to a workgroup, etc. 
• Network – interactive map: this section offers an interactive map allowing users to find members or institutions near them. In addition to the map, the section also offers a free text search field and filters to refine searches. 
• Faceted multi-criteria search engine: an advanced search system has been implemented across the site, with a free text input field and faceted filters.
• User area: a personal area is available, allowing users to manage their profile and their content (bookmarking content, creating and publishing resources, etc.)
• Media management: the site provides media file management features (images, videos, PDF documents, etc.)
• Newsletter: the site offers a subscription feature to the OCE newsletter. 
• Social sharing/download/printing: buttons are available to share on social networks, as well as to download resources and print content pages. 

Technical framework – Drupal 8 

We developed the platform using Drupal 8. To meet the project’s needs, we used the following main modules: 

• Group : this module allows the creation of groups as standalone entities. Each group can include users, configure its own roles and permissions. In the OCE project, we found it useful to use Group to manage user groups sharing common resources—a feature needed for workshops. 
• Media: reference module for managing multimedia files (images, videos, files, etc.). 
• Flag: this module allows management of favorites.
• Leaflet: we recommended this Open Source library to provide a Google Map-style map to users—with an Open Street Map base layer, for the Network section, presenting OCE network participants and partners. 
• Search API: this allows advanced search with Solr within the site. Combined with the Facets module, we created dynamic filters to refine searches.

Some technical details...

The requirements called for certain technical specifics, including: 

• Accessibility: the project required AA-level accessibility in line with the RGAA standard. This requirement was constrained by Drupal's caching system. In production, Drupal serves the same HTML code to everyone. It was therefore necessary to add one or more CSS classes via Ajax and exclude the Ajax response from Drupal’s cache so that it could be customized per user settings. 
• The Network map: the request for the Network map to present the OCE network required custom development to allow the display of user details next to the map (Ajax loading). 

To learn more: https://oce.global/fr/