Ocean Wise is the Vancouver Aquarium's parent brand of all things ocean conservation. Its purpose is to unite all of their 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 overall goal for Ocean Wise was to build an innovative content platform aimed at Millennials, Gen Z, and future generations to be cognizant of what's happening in the ocean. The problem 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.
Beyond having our target audience in mind, we also 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.
We developed a flexible and socially-digestible content framework in WordPress called "stories". A story could be built using "panels", which support any kind of medium as a combination of words, images, videos, audio, and/or interactive elements.
Alone, an individual panel could serve as a shareable moment for any social media platform, as well as act as a gateway for new audiences to participate in Ocean Wise narratives. Together, multiple panels could weave into one cohesive story or illustrate a prevailing topic or theme. We also built the option to have longform content tucked away if there was more to learn; we refer to these as "deep dives". This allows the system to be flexible enough to allow both a linear and divergent narrative experience.
Below is a snapshot of the wireframes we presented to the client to get them to understand how content can be structured.
Whether a story is data-rich and educational or purely for entertainment, they all end with a call-to-action. Sometimes that comes in the forms of: asking them to donate to an animal rescue, inspiring them to lead a beach cleanup or having them sign a pledge to only eat sustainable seafood. With Ocean Wise stories, we're entertaining, educating, and empowering ocean enthusiasts, and effectively turn them into ocean advocates and environmental changemakers that take action and make a positive impact.
We had a foundational brand to work off of that included colour palettes and logo/wordmark usage. However, it was up to us to adapt and build upon that in order to have a fully flushed out digital design system to support all the content we envisioned having.
Above, are the brand concepts that we came up with. These were inspired by influential content and editorial sites like Wired, Buzzfeed, Vice, The Outline, and National Geographic. We focused on the sites that our (mainly Millennial) target audience would go to for parallel topics that were inline with what Ocean Wise wanted to address.
After workshopping through these concepts with the client, we ended up "frankensteining" a few elements from each one to form a set of design principles that helped us refine it to the design we see today:
Due to the flexibility needed of our content infrastructure, we had to test many extreme use cases–mostly ones that affected smaller viewports. Together as a cross-functional (UX, design, dev) team, we combed through all the possibilities that could occur within the Ocean Wise experience, and then we prototyped and tested these to get the best design solutions.
Here are examples of the questions we asked and successfully answered:
As a result, we delivered a platform that both the Engine Digital and Ocean Wise teams are proud of!
UI, Design System, Motion, Prototyping, Content Strategy, User Testing, Iconography
Sketch, Adobe CC (Photoshop, After Effects, Illustrator)
As Interactive Designer, I provided and pitched the winning concept to our client, co-created the brand and content strategies with my CD, conducted user testing for our prototypes, and designed content templates and micro-interactions for all breakpoints.