SeaForester
Restoring The Forgotten Forests In Our Ocean
Services
Year
Technologies
“Concealed had exceptional project management, consistent and transparent communication, and attentiveness and commitment throughout the entire process."
Inês Louro
Challenge
Overview
Our collaboration with the SeaForester team focused on transforming their website into a sleek, modern platform that authentically showcases their mission while staying true to their brand identity. To accomplish this straight away in the hero section, we designed a fresh, illuminated header featuring a captivating seaweed exploration video that subtly flows through the logo's algae. This allows the section to powerfully convey SeaForester's purpose while giving the rest of the content space to breathe.
DesigN SYSTEM
Building elements that have purpose
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.
Homepage
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.
why seaforestation
From problems to solutions
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.
Concealed combines technical expertise with outstanding responsiveness.
Inês Louro
Solution
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.
PROJECTS
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.
abOUT
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.
News
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.
404
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.
