Have an idea?
We can help you bring it to life!
SeaForester
Restoring The Forgotten Forests In Our Ocean
SeaForester is an environmental impact organization that initiates, manages and encourages seaweed reforestation projects worldwide.
Client
SeaForester
Year
2022
Services
Project ManagementUX & UI DesignFrontend DevelopmentBackend Integration
Technology
Next.jsPrismic CMS
Challenge
Project Goals
The SeaForester team wanted to upgrade the project’s one-page website into a new, polished platform that made the SeaForestation mission shine through in a new, modern light while still respecting the organization brand elements.
Design
Before & After
The SeaForester team wanted website visitors to immediately learn what Seaforester’s mission is and how they can help achieve it. We tossed the previous full screen video header for a new, illuminated header where a seaweed exploration video is still running but this time through the logo’s algae, providing space for the remaining content to breathe.
Design
Design Elements
Color Palette
We combined blue and green tones to represent the project’s areas of intervention: the sea and its forestation.
Iconography
Since science is the foundation for the SeaForestation project, our team felt the need to create some illustrative iconography to go along with the scientific content and thus make it more maneagable for all users. The ilustrations derived mainly from SeaForester’s logo, which has a big presence across the website.
Typography
Kaisei HarunoUmi was the main typography chosen due to the organic and serif strokes of its title, which matches the fluidity and movements of seaweed. Combined with a simpler font, it brings elegance to the website while keeping it clean and easy to read.
Design
Grid System
In order to achieve a solid design layout, we used a simple 12 column grid with a 20px gutter. This allowed us to place text, images, and functions in a consistent way throughout the design, for all viewport sizes.
Design
Components
Once we defined the project’s design elements, we created the design system: the set of reusable components that could be assembled together like puzzle pieces to build new, consistent looking pages within the same style.
Design
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.
Design
The Problem vs The Benefits
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.
Design
Our Solution
This page provides an in-depth explanation of the important work that SeaForester does and how they share it with their community. Its written content is supported by illustrations and images for a richer, more interesting user experience.
Design
Our 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, user 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!
Design
About us
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 gets a dedicated space.
Design
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.
Design
Error page
A simple, yet unique idea was defined for the error page: the website’s main graphic element, seaweed, is found moving in a slow animation that mimics movement at the bottom of the ocean.
Feedback
“Concealed provided an excellent delivery of the website in a timely manner, successfully covering our desired objectives. They provided excellent communication throughout the development period, taking on board all provided feedback and implementing our vision to a high standard. The new website will be a centerpiece in our marketing and communication strategy going forward. All in all, it was a pleasure working with the team at Concealed due to their enthusiasm, attention to detail, and overall professional work ethic.”
Jan Verbeek, Scientific Manager, SeaForester