About The Client
Ocean.org is the Vancouver Aquarium's parent brand of all things ocean conservation
To build a sustainable content platform that engages ocean conservationists on a global level
An award-winning storytelling framework that’s easy to use and can be set up for UGC
Entertaining, educational bite-sized content that brings awareness to and encourages ocean conservation
The purpose of Ocean.org is to unite all of the Vancouver Aquarium's educational, research-based programs under one umbrella by showcasing stories of all the people, animals, and ecosystems that are a part of their explorations and discoveries.
The goal for Ocean.org is to be the resource and content hub for younger audiences to help them discover what they are passionate about in the realm of conservation and encourage them to take action in creating better, healthier oceans. The big opportunity here was that they didn't want to be just a blog or another a news site; they wanted to go beyond those paradigms and be adaptive enough to roll with the social media tides, whatever those would be in two, five, and ten years from now.
As a result, we designed a mobile-first, flexible content-building framework so that any content creator– whether they're a scuba diver, fishmonger, surfer, or shark-enthusiast– is able to post their story with ease (FYI, this was before Instagram Stories took off).
"Panels" are individual screens that are combined to make up a "story". Here are the different types that content creators can choose from:
• Image with short description
• Pull quote (image optional)
• Long-form text
• Interactive quiz
• Video with optional description
• List (visual or text-only)
We developed a flexible and socially-digestible content framework in WordPress called "stories". A story is built using "panels", which are made up of a combination of words, images, videos, and/or interactive elements. Together, these panels either weave into one cohesive narrative or illustrate a prevailing topic or theme.
Alone, an individual panel serves as a shareable moment (e.g. think an insightful quote or a compelling image) for any social media platform, acting as a gateway link for new audiences to participate in the bigger Ocean.org parent narrative. Longform content can also be tucked away, especially if there was more to learn; these are referred to as "deep dives". This allows the system to be adaptable and exploratory enough to provide both a linear and divergent narrative experience.
Whether stories are data-rich and educational, or purely for entertainment, they all end with calls-to-action. They can come in the forms of: asking users to donate to an animal rescue, inspiring them to lead a beach cleanup or having them sign a pledge to only eat sustainable seafood. The hope is that we turn curious readers into ocean advocates and environmental changemakers that take action at scales, small and large.
We adapted and built upon their brand identity into a digital design system to support all the content we envisioned having. Above, are the editorial UI concepts that we played with. These were inspired by "influential" content sites like Wired, Buzzfeed, Vice, The Outline, and National Geographic. We focused on the sites that our target audience would go to for parallel topics that were inline with what Ocean.org wanted to address.
Through a client workshop, we developed a set of principles that helped us refine the design we see today:
First image is a snippet of the design system we built. Second image is the landing page of Ocean.org at launch.