Restoring The Forgotten Forests In Our Ocean

SeaForester's redesign began with creating a custom design system to ensure every screen was consistent and accessible for all users. These elements were built with a focus on SeaForester's mission and values, making it easier for users to engage with their initiative.

Since the homepage is the portal to the project’s website, it was crutial that it clearly laid out SeaForester’s mission and their plan to achieve it. We kept it colorful with the ocean tones and we made sure it had the right amount of interactive elements, which captivate visitor’s interest and propels them to learn more about SeaForester throughout the other website pages.

The key goal for this page was to inform and sensitize users on this important topic without overwhelming them. We managed this by creating a dual page that starts by presenting the existing deforestation problems and then, by switching a toggle in the page’s header, it shows us that there is hope with SeaForester’s solutions to recover maritime forests. These two phases are visually distinguished by the contrast in the green and blue elements.

This page dives deeper into the important work SeaForester carries out and how they engage with the community. Its written content is supported by illustrations and images for a richer, more interesting user experience.

While all website pages serve an important purpose, the projects page is where users get a real feeling of which SeaForestation efforts are being done and where they are being made. From Research and Innovation projects, to hands-on work and much more, users can filter the projects by category, select them directly from the page’s interactive map and even use the search input to quickly find the project they are looking for.

We tell SeaForester’s history through a dynamic timeline that is presented as the user scrolls down the page. Afterwards, we meet the SeaForester team: all members photos, names and roles are immediately shown but users can then click on each member if they wish to learn more about them. Lastly, each project partner and contributor are highlighted, giving full recognition to everyone involved in SeaForester’s mission.

It’s easy to stay on top of the project’s most important news with this header section of featured articles that precedes the global news listing. To ensure the best possible reading experience, the news article content is presented via different elements such as: block quotes, several images with subtitles, sliders, videos and clean typography. In the article pages users have the option to navigate to other articles and/or share the news without having to return to the news listing page first.

Even in situations where users land on a page that doesn't exist, we wanted to continue highlighting SeaForester's brand and mission. For this, our team designed a simple, yet unique idea where the website’s main graphic element, seaweed, is found moving in a slow animation that mimics movement at the bottom of the ocean.

To ensure users could explore and engage with SeaForester's mission from anywhere and everywhere, our team designed and implemented all pages to be fully responsive.