Storytelling For The Next Wave of Ocean Conservationists 🏄🏻‍♀️

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.

Examples of mobile templates

The Ocean Has Many Stories To Tell 📚

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.

Wireframes of the different content templates we designed

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.

Brand proposals for the Ocean Wise platform

Diving Into Brand 🤿

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:

  • One Image to Rule Them All 🖼 – To make it easier for content creators, we designed it so that they only had to provide one image per panel. This means that the main subject matter of a photo is always optimized and in focus despite the device size and state that the image is appearing in. We also provided various text orientations that they can choose from in the CMS for maximum flexibility: text can be aligned top, middle, or bottom, and then left, centre, or right depending on the composition of their photos.
  • Optimized Legibility for Scannability 👓 – Hierarchy between type elements was highly contrasted through size, weight, and sometimes colour. We wanted headlines and titles to be concise and punchy, CTAs to use a consistent design pattern, and scrims placed on every image to ensure text is readable no matter what.
  • Motion & Micro-interactions as Guides ↔️ – Because we wanted an app-like experience within a website, we provided friendly nudges throughout the UI that made it easier for users to navigate this novel (at the time) way of consuming information.
Some design elements for
Launch screen for Ocean Wise

Accolades 🏆

Take Action page of Ocean Wise

Pearl of Wisdom 🦪

True flexibility & scalability relies on designing for extreme use-cases 🤸🏻‍♀️

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:

  • What might pagination look like when a story has 50 panels?
  • Can we still call it a "story" if there are only two panels? Should we determine a minimum number of panels?
  • What would launch state look like (with only six stories at that time) versus a year from now (with ideally hundreds of stories)?
  • Can the same image be used across all viewports and states?

As a result, we delivered a platform that both the Engine Digital and Ocean Wise teams are proud of!

Skills & Tools 🧰

  • UI, Design System, Motion, Prototyping, Content Strategy, User Testing, Iconography

  • Sketch, Adobe CC (Photoshop, After Effects, Illustrator)

My Role ✨

My Role ✨

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.

View Other Projects

Power Smart For Schools ✂️Making Electricity, Energy & Safety Easier to Teach

Rocky Mountaineer 🚂Service Design for a Better Journey

Great Canadian Shoreline Cleanup 🚮Interaction Design for Environmental Leadership

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina