EPOS MSL data catalogue - Website Design and Development

EPOS MSL data catalogue - Website Design and Development

Designer and Software Developer Designer and Software Developer

Project

Product design & full-stack development

Oct 2024 - Jul 2026

Skills

Backend De...
Component...
Frontend A...
UI Design
UX Design

Approaches

Iterative...
Service De...
User-Cente...

Tools

Laravel
PHP
TailwindCS...
TypeScript
Vite
daisyUI

Topics

Controlled...
FAIR Data
Geospatial...
Research D...
Recommendation Letter

About

I was responsible for the public frontend of the EPOS MSL data catalogue and contributed to backend systems behind it. My work included the visual language, reusable interface components, search and map experiences, surveys, vocabulary tooling, and public contribution flows. Workshops and research that informed this work are covered in Vision, Mission, Strategy and Workshops.

The work used Laravel and Blade, TypeScript, Tailwind CSS and daisyUI, Leaflet, Vite, and metadata and API work around DataCite and CKAN.

MSL colour Scheme

Colour Palette

Earth sciences have, from my view, unique relations to colours due to the circumstance that the various minerals and stones researchers are investigating provide very rich variations of colours. This allowed to bring a sense of familiarity to the page for the various domains by implementing known colour ranges. After analyzing images of research probes the colour scheme was derived which you can see next to this text.

The shade count and semantics are based on the daisyUI framework with shades from 100 to 900 in 100 steps: Primary, Secondary, Neutral, Success, Info,Warning and Error

Data Acess page with hovered element
The data publication detail page

Frontend Rebuild

The previous frontend needed a complete redo due to coming plans and its UX. The guiding design principles for the page and the services were:

  • Suitable for users with low technical literacy and enables power users to move quickly.

  • Non-distracting, sufficiently contrasting layout with good spacing to make it easy on the eye to scan the information. The visual hierarchy was established with the various shades of the primary colour.

For instance, all interactive elements on the page behave the same on hover.

Survey Feedback on co-created domain tooling with the community

I facilitated and guided the domain expert volunteers from each domain through a co-creation process to come up with domain specific tooling for their research communities.

To gather feedback I designed the data model and built the survey system (under the guidance of a software development senior): surveys, ordered questions, question-type components, responses and answers, validation rules stored per question, handling for inactive surveys, and honeypot protection. The outcomes of the surveys were also later analyzed by me and prepared for the team.

The process, research, sketches, and expert analysis behind these scenarios are covered in Vision, Mission, Strategy and Workshops.

User Journeys: Search, detail pages, and the map

I worked on data-access search and filters, including facets, result counts, applied filters, and pagination. I built publication-detail tabs for descriptions, files, and maps. All the user journeys also were made by me such as the publications map.

Related Highlights

Click to see details

Design system & daisyUI theme

Catalogue discovery UX

Spatial publications map

Survey engine

Vocabulary Excel pipeline

Contribute & contact flows

Metadata & geo APIs