Refonte du portail national dédié à l’observation du niveau de la mer

Le site REFMAR avait besoin d'une refonte complète pour moderniser son interface et mieux répondre aux attentes des divers utilisateurs : partenaires REFMAR, organismes scientifiques, services de l’État et grand public, les étudiants notamment. Le nouveau site avait pour objectifs :

• Fournir des informations de qualité sur l’observation du niveau de la mer.
• Rendre facilement accessibles les méta-données d’observation, valoriser les mesures collectées et fournir des informations techniques sur la marégraphie.
• Diffuser et promouvoir des moyens de transmission adaptés et conformes aux normes internationales (UNESCO/COI/GLOSS).
• Fournir des spécifications pour l’observation du niveau de la mer.

Pour garantir une navigation intuitive et concevoir un site centré sur les utilisateurs, nous avons commencé par un audit approfondi de l’existant et des besoins des différents types d’utilisateurs. Nous avons retravaillé l’arborescence du site pour faciliter l’accès aux informations critiques dès la page d’accueil. Des parcours utilisateurs spécifiques ont été définis pour chaque audience cible, des producteurs de données aux étudiants curieux d'en savoir plus sur la marégraphie. Ci-dessous, quelques extraits de nos parcours utilisateurs.

Des wireframes détaillés ont été conçus pour visualiser l’agencement des contenus et tester la navigation. Habituellement présentés sous forme de schémas, les wireframes ont directement été réalisés avec les composants du système de design de l’État (DSFR).

En effet, en tant qu'établissement public, le Shom doit se conformer au design system de l’État, une bibliothèque de composants graphiques prêts à l’emploi, à disposition des designers et des développeurs afin d’aboutir à une interface commune pour tous les sites rattachés à l’Etat. Il garantit également le respect des normes d'ergonomie, d’accessibilité et les bonnes pratiques HTML-CSS.

Désormais accoutumés au DSFR, nous avons créé le bluedrop.fr DSFR kit. Il se compose d’un starter theme Figma (notre outil d’UI design) et d’un starter theme Drupal (notre CMS). Un starter theme fournit une structure de départ avec une configuration de base, des styles CSS et des templates pré configurés tels que le header, le footer, la navigation… Il est conçu sur la base des composants définis par le DSFR et nous permet de gagner du temps sur tous nos projets basés sur ce dernier.

Ces maquettes ont été validées à chaque étape avec le Shom, garantissant que chaque fonctionnalité répondait précisément aux besoins identifiés.

Le site offre une carte interactive dédiée aux niveaux de la mer, basée sur les marégraphes coordonnés par REFMAR. Grâce à cette carte, les utilisateurs peuvent consulter les données marégraphiques spécifiques à chaque site et les télécharger facilement. Intégrée en tant qu'iframe depuis le portail de référence data.shom.fr, cette carte est préconfigurée pour se concentrer uniquement sur les stations de mesures de hauteur d'eau, le sujet principal du site. Toutefois, les utilisateurs ont la possibilité de modifier ce filtre pour accéder à l'ensemble des données disponibles sur le portail, telles que les couches sur la bathymétrie,  sur les vagues, les prévisions océanographiques, les épaves  ou les limites maritimes.
 

Les contenus existants, comprenant environ 200 pages et 500 documents, ont été importés et réorganisés pour s'intégrer parfaitement à la nouvelle structure du site. Drupal, grâce à son système de "paragraphs" et ses types de contenu personnalisés, facilite grandement la saisie manuelle du contenu. De plus, une partie des informations du site est automatiquement mise à jour depuis les bases de données scientifiques du Shom. Cela concerne notamment :

• Les relevés marégraphiques effectués sur les différents sites du territoire.

• Les cartes et tableaux issus de la base de données du Shom, permettant de consulter les archives des observations marégraphiques, filtrables par période et par lieu.