Sea Shepherd
ui/ux · redesign concept
Sea Shepherd Conservation Society is an international non-profit, marine wildlife conservation organization whose mission is to end the destruction of habitat and slaughter of wildlife in the world’s oceans in order to conserve and protect ecosystems and species.
The redesign of Sea Shepherd’s app and website is an entirely fictional project. My personal goal was to analyze and rework concept and design for app and website to create a uniform visual language best representing their ideas and missions.
Research showed that the app mainly consists of content from the website or links to the website and different social media channels which makes the whole app a bit redundant as it could also just be the mobile version of the website. Still—for the sake of this project—I treated the app as its own product. While listening to Alestorm I also realized that an english version of the page exists which has a different URL, name, structure and design, which signifies the fact they should to be unified.
For the imagery there were two options: Either to motivate protectiveness through the show of impressive ocean photos or to create urgency by directly confronting users with cruel, alarming imagery.
First drafts included both variants and in real life the client would probably decide which version fits best with the company or do A/B-Testing first. In this case I decided against alarming imagery to stay closer to the actual website and appeal to users rather than frighten them. In the news articles and videos the harsh reality is shown anyway.
A lot of whitespace (or black space in this case) in the layout gives the beautiful images room to breathe and conveys the important messages. Elements are shifted to symbolize that something is wrong with the oceans and we need to fix it. One idea also is to work with glitch effects on the images (on hover for example) to amplify this broken world.
The font Vinyl OT is similar to the logo’s font. Set in a big size, it yearns for attention while maintaining a positive character with its soft edges. Additionally Overpass sharpens its impact with its interesting cuts in the letterforms.
The home page focuses on Sea Shepherd's recent campaigns and options to donate, along with other possibilities to help as well as news articles. The real campaign page has a lot of sub-pages, which—in my design—would all be set into one page, navigable with tabs, to reduce confusion.
Redesigning the app started with recreating the existing icons for the navigation, as I consider the maritime versions a fun and unique detail. The navigation now is also the start screen, which I changed into a news dashboard with recently published articles. On mobile this makes more sense than focusing on the campaigns, as they won’t change that often. App users are nonetheless still able to access most of the information the website offers. The main visual elements were also adopted to maintain consistency throughout the platforms.
