EPOS MSL data catalogue - Website Design and Development
Project
Product design & full-stack development
Oct 2024 - Jul 2026Skills
Approaches
Tools
Topics
Mentioned In
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.
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
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.
Related Highlights
Click to see details