Monterey Bay Aquarium Research Institute

An Evolutionary Step for Ocean Research

UI/UX Design, Information Architecture, Full Stack Development, Technology Consulting

The Monterey Bay Aquarium Research Institute was founded by David Packard as an advanced center for ocean research and technology development.

Their mission is to achieve and maintain a position as a world center for advanced research and education in ocean science and technology.

MBARI wanted to evolve their brand and story by communicating the organization's strategy and vision in a digital annual report. The new website needed to incorporate a modern aesthetic, be reusable for future years, and further their goal of communicating their relevance to the public. In practical terms they want to reach an expanding audience and save paper and shipping costs while providing an accessible archive.

MBARI Around the World

Truly a global research effort, the site opens with an interactive map that shows where research has taken place and allows site visitors to pull up a summary of the activities in that location.


Storytelling Tools

The digital report is robust, interactive, and packed with stories, which are central to the report. Each unique story requires different formatting and assets; pictures, graphics, videos, slideshows, pull quotes, and more. We created a Content Builder in Craft CMS that lets each article be told in the best way possible. Persistent social media prompts allow readers to easily share an article via Facebook, Twitter, or Email.

Why It Matters

Each story contains a brief "Why It Matters" section that speaks directly to the value of the research to ordinary people.

Content Editor

The content editor has ultimate flexibility. The content editor can add full bleed photos, in-line photos, slideshows, videos, sidebar notes and references, and much more.

The Technical Aspects

It was decided that the report would reside on its own site, rather than a sub-page of the MBARI main site. We built the site in Craft CMS to give MBARI maximum flexibility and ease of use and to take advantage of Craft 3's multi-site functionality, which allows their team to easily create and populate another annual report in the future with little to no help from our team.

Fully Customizable

The MBARI team needed a site that had maximum flexibility when it comes to adding content to their articles. Using Craft CMS's robust content builder, the MBARI team is able to add many elements to their articles including:

  • Full Bleed and Full Width Images
  • Photo Carousels with short or longer captions
  • Pull-quotes that can be easily shared on social media
  • Sidebar information, graphics, and footnotes
  • Embedded videos within the article or along the sidebar
Mobile Screens

The Print Companion

The digital report is new for MBARI. One of the reasons to go digital is to reduce their environmental impact. However, not all of the stakeholders prefer, or are able to easily access, the digital report. As MBARI transitions away from the traditional print model, it was decided that a shorter, 24-page summary of the report would be produced and mailed to people who prefer this form factor.

Printed on recycled paper, the report is an unusual 8.5” x 9” size that feels good in the hands, isn’t bulky, and makes it seem like a luxurious coffee table book. Instructions in the report point people to the digital version, easing them into the fuller online experience.

Mbari Cover

the cover for the 2017 Report

Mbari Pages2
Mbari Pages3
Mbari Pages4