Medtrix – Modernizing the Entry Point to France’s Leading Marine Monitoring Platform
Challenge
Andromède Océanologie operates two major products in the Mediterranean: Medtrix, a national marine monitoring platform used by scientists and environmental agencies, and Donia, a popular mobile app helping boaters protect the seabed. Medtrix is hosted by a GIS-specialized provider since most of its ecological maps are built in QGIS, but the platform’s infrastructure and frontend stack were outdated.
The homepage — users’ first contact with the vast marine datasets — had grown into a long static list of monitoring maps with little hierarchy or visual clarity. It didn’t reflect the scientific quality of the data nor help users navigate efficiently. My initial task was to redesign and implement a new homepage that made the data more scannable, structured, and visually engaging.
However, due to the hosting provider’s infrastructure limitations, I could only work with raw HTML and vanilla CSS, without JavaScript or build tools. The environment was old, the deployment pipeline manual, and even slight layout adjustments required testing directly on production-like environments.
Process
Working within these tight constraints was both frustrating and instructive. I approached the redesign by first simplifying content architecture — grouping maps by themes (habitats, biodiversity, human impact) rather than technical datasets. The goal was to help users understand the purpose behind each map before diving into the data.
Visually, I drew inspiration from National Geographic-style layouts, treating maps as visual stories rather than file links. Each map tile featured stronger hierarchy, quick facts, and color-coded tags for easier scanning. Since no JavaScript was allowed, I relied heavily on CSS transitions and keyframes to bring the interface to life — hover states, fade-ins, and smooth scrolling were all handled natively.
To keep performance high on legacy servers, I used lightweight CSS-only techniques for grid layouts and responsive design. This project became a great opportunity to deepen my mastery of pure CSS, from animation timing to layout behavior across devices and browsers. Despite infrastructure constraints, I ensured that the redesign could scale to future use cases — the new homepage structure can later be embedded directly into the map viewer, allowing users to switch between datasets seamlessly.
Results
The updated homepage gave Medtrix a clearer visual identity and made it significantly easier for researchers, public agencies, and citizens to explore Mediterranean monitoring data. The grouped layout improved readability, while CSS-driven animations brought subtle motion and hierarchy to a previously static page.
Beyond design, the project was a real test of adaptability — working within an aging GIS hosting setup, limited tech stack, and non-pixel-perfect handoff process. It reinforced solid fundamentals in HTML/CSS craftsmanship and taught me how to deliver meaningful improvements even in technically constrained environments.