Redesign of the national portal dedicated to sea level monitoring

The Shom (Hydrographic and Oceanographic Service of the Navy) is an administrative public institution under the supervision of the Ministry of the Armed Forces, acting as the national reference body for in situ observation of sea level across all areas under French jurisdiction.

REFMAR (The Reference Network for Tide Gauge Observations) coordinates the collection and dissemination of public data relating to water heights, promoting their use for multiple applications. Today, data from over 150 stations are distributed on the reference maritime data portal, data.shom.fr.

Objectives of the redesign: better meet user expectations

The REFMAR website needed a complete overhaul to modernize its interface and better meet the expectations of its various users: REFMAR partners, scientific organizations, government services and the general public, especially students. The new website aimed to:

Provide quality information on sea level observation.
Make observation metadata easily accessible, highlight collected measurements, and provide technical information on tide gauge measurements.
Disseminate and promote transmission methods that are suitable and comply with international standards (UNESCO/IOC/GLOSS).
Provide specifications for sea level observation.

UX design conception: audit, site structure and user journey

To ensure an intuitive navigation and design a user-centered website, we began with a thorough audit of the existing site and the needs of the different types of users. We redesigned the site’s structure to make it easier to access critical information from the homepage. Specific user journeys were defined for each target audience, from data producers to students eager to learn more about tide gauge measurement. Below are a few highlights from our user journeys.

Wireframes and graphical design with the State’s design system

Detailed wireframes were designed to visualize the layout of content and test navigation. Usually presented as diagrams, the wireframes were created directly using the components from the State’s design system (DSFR).

Indeed, as a public institution, Shom must comply with the State design system, a library of ready-to-use graphic components available to designers and developers in order to achieve a unified interface for all government-affiliated sites. It also ensures compliance with ergonomics standards, accessibility, and good HTML-CSS practices.

Now familiar with DSFR, we have created the bluedrop.fr DSFR kit. It consists of a Figma starter theme (our UI design tool) and a Drupal starter theme (our CMS). A starter theme provides a starting structure with basic configuration, CSS styles, and pre-configured templates such as the header, footer, navigation, etc. It is built on the components defined by the DSFR and allows us to save time on all our projects based on it.

These mockups were validated at each stage with Shom, ensuring that every feature precisely met the identified needs.

Project specifications: update of functional requirements

A comprehensive update of the functional specifications has been carried out to integrate the new features. We have ensured that editorial pages are modular, allowing the mixing of text, images, videos, and widgets (maps).

The interactive map to view and download tide gauge data

The site offers an interactive map dedicated to sea levels, based on tide gauges coordinated by REFMAR. Thanks to this map, users can consult the tide gauge data specific to each site and download it easily. Integrated as an iframe from the reference portal data.shom.fr, this map is preconfigured to focus exclusively on water level measuring stations, the main subject of the site. However, users have the option to change this filter to access all the data available on the portal, such as layers for bathymetry, waves, oceanographic forecasts, shipwrecks, or maritime boundaries.

Content management: between content import, manual and automatic contribution

The existing content, comprising around 200 pages and 500 documents, was imported and reorganized to integrate seamlessly into the new site structure. Thanks to its "paragraphs" system and its customized content types, Drupal greatly simplifies manual content entry. In addition, some of the site information is automatically updated from Shom’s scientific databases. This specifically includes:

Tide gauge measurements carried out at different sites across the territory.

The maps and tables from the Shom database, allowing you to consult the archives of tide gauge observations, filterable by period and by location.

Digital accessibility: 97% compliant with the RGAA

We conducted a rigorous accessibility audit, based on the General Accessibility Improvement Framework (RGAA). The RGAA is a set of criteria defined by the French government aimed at making websites accessible to everyone, including people with disabilities. Thanks to our methodical approach and expertise, we achieved a 97% compliance rate. Our certified digital accessibility specialist ensures that every stage of the project, from design to development, incorporates best practices in accessibility. This work was made easier here by the use of the DSFR, which is built on recognized digital accessibility standards.

Training for administrators and contributors

To ensure Shom's autonomy in managing the new portal, we trained the teams responsible for site administration and editorial contribution. This training covered the use of the management interface, content publishing, role management, content types, and more.

Collaborative Success: A New Digital Era for Tide Gauging

Thanks to this redesign, the REFMAR website now fully meets the expectations of its various audiences, making it easier to access data and technical information on tide gauge measurements.

Are you considering revamping your website to better meet your users’ needs? Contact us now to discuss your project and find out how our expertise can help you achieve your goals.