Storytelling for the next wave of conservationists 🏄🏻‍♀️

Ocean Wise is 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 in and around the ocean.

Our overall goal was to build an innovative content platform that goes beyond the blogging paradigm for Millennials, Gen Z, and future generations to be cognizant of and engaged with what's happening in the ocean. We also designed flexible content-building frameworks so that any content creator, scuba diver, fisherperson, surfer, and shark-enthusiast could post their story with ease.

Examples of mobile templates

There's a plethora of stories that the ocean has 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. Together, these panels could weave into one cohesive narrative 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".

Whether a story is data-rich and educational or purely entertaining, they all end with a call-to-action, whether that's asking them to donate to support animal rescue, inspiring them to lead a beach cleanup or to sign a pledge. With Ocean Wise stories, we're hoping to entertain, educate, and empower ocean enthusiasts, and turn them into ocean advocates and environmental changemakers that make a difference.

Wireframes of the different content templates we designed

Accolades 🏆

The Fluid Grid of Ocean.org

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 Creative Director, conducted user testing for our prototypes, and designed templates and micro-interactions for all breakpoints.

View Other Projects

Power Smart For Schools ✂️Design for Science-Based Education

TuGo 🗺Design for an Untapped Travel Market

Rocky Mountaineer 🚂Service Design for a Better Journey

Great Canadian Shoreline Cleanup 🚮Design for Environmental Leadership

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina