WaveLinks: Connecting the Mission Ocean Ecosystem

Project: WaveLinks
Role: UI/UX Designer, Frontend Developer
Collaborator: Team at SDU RIO, Denmark
Context: Part of the EU Mission: Restore our Ocean and Waters, supported by Mission Ocean & Waters, BlueActionAA, PREP4BLUE, and BlueMissionBANOS
Outcome: A public web platform with a dynamic dashboard, searchable database, and collaborative tools to connect stakeholders in ocean restoration

The public landing page of WaveLinks.

The challenge

The EU Mission: Restore our Ocean and Waters required a centralized platform to connect researchers, policymakers, and industry professionals working on ocean restoration. The goal was to:

• Provide insights and analytics through a dynamic dashboard.
• Enable extensive search through a dense database of projects, stakeholders, and solutions.
• Foster collaboration across different initiatives (e.g., PREP4BLUE, BlueMissionAA).

While other teams focused on KPI analysis and database nurturing, my role was to design the platform’s UI/UX and implement key frontend features.

My Process

Design: From concept to prototype

As part of the design duo, I co-created an extensive Figma design and prototype for WaveLinks. The focus was on:

• A dashboard to display insights and key metrics.
• An advanced search system to navigate the dense database.
• A user-friendly interface for public and private sections of the platform.

Part of our Figma design and prototype, laying the foundation for WaveLinks’ UI/UX.”

Development: Bringing the design to life

The platform leverages Django (Python) for the backend and Next.js + Tailwind CSS for the frontend.

My contributions included:

• Personal profile & bookmarks: Implemented the personal profile feature, allowing users to view and manage bookmarked items.

• Help Center:

  • Developed a dynamic tutorial system using markdown files, which are translated into articles.
  • Built the FAQ section and organized its content generation using a JSON file for easy maintenance.

• UI/UX enhancements:

  • Made the sidebar collapsible, showing only icons by default and expanding on hover.
  • Implemented a markdown-based news and updates page, including a notification system (e.g., red dot notifications for new features).

Emergency management

When the team faced staff changes, I stepped in to:

• Define priorities and distribute tasks to keep the project on track.
• Debug and finalize features started by colleagues.
• Implement additional frontend components to ensure a smooth user experience.

The Outcome

WaveLinks was successfully launched as a fully functional platform featuring:

• A customizable user dashboard: You can add visualisations to your liking! ✨
• Special dashboards and search functionalities with filters accross multiple databases
• Information on data sources and KPIs for further insights
• A Help Center accessible to everyone
• Private features (e.g., bookmarks, personal profile)
• Free usage for all, fostering collaboration across the Mission Ocean ecosystem

The platform continues to connect stakeholders and drive progress toward restoring our oceans by 2030, though active development has paused with the conclusion of its EU funding.

Looking ahead: Should new funding emerge, we’d love to expand WaveLinks further.

Explore WaveLinks