Heal the Bay

Bringing the bay to your screen through user experience and new media.

Design Strategy
Visual Communication

How can a website make you feel like you are at the beach, and therefore increase empathy for its inhabitants and the environment at large? Our strategic and creative direction for the project as a whole aims to make the experience of the bay as tangible as possible. This is accomplished through virtual reality integration, illustration, and a special section of the site titled “experience the bay.”  Our team reimagined how this site could lend itself to the experience of being present at the various natural sites Heal the Bay works to protect. 

Information Architecture

Following a review of Heal The Bay’s Google Analytics, we arrived at a series of insights that not only helped guide the process of adding or eliminating previous content sections of the website, but also indicated where missed opportunities could be leveraged to increase conversion for metrics of success including donations, newsletter signups, and more.

Our collaboration began with a kick off workshop at our studio that involved Heal the Bay’s Communications Director and Manager. When starting a website project, it’s important to first audit existing content, pages, blog posts, featured elements, and any other visual element that spans all publicly viewable content. By creating a simple site map of the existing content, our team was able to facilitate a conversation about what continues to be relevant, what is no longer useful, and what new opportunities there could be to leverage media rich content. In doing so, our process allowed for a site with significantly less pages.

User Experience

Nonprofit organizations, like any other business, have conversion goals. What is it that we want the audience to do? To find out, we engaged in a fun exercise aimed at building audience profiles called “personas.” In this exercise we identify who the website’s audience should be and what we want them to do. Most importantly, we identify what it is their intended goals are as well as what other opportunities there may be to introduce them to new products or services. Aligning business goals and the audience’s goal results in a great user experience.

User Interface

Our team developed an architectural and aesthetic concept around experience that included several features that were developed following the user experience design and information architecture audit. To achieve alignment with current brand assets, the verynice design team created custom illustrations, script typography, and graphics that expanded and complemented the existing brand identity. To update navigation functionalities with current web experience, a parallax scroll function was used that allows users to move down the page without losing sight of key elements.

Another exciting new feature was the interactive victories timeline. This came directly out of the strategic vision and success criteria outlined during the initial workshop. Communicating these key milestones was identified as a cornerstone of Heal the Bay’s success in engaging donors and volunteers.

In order to create a more intentional home for the Aquarium of Santa Monica, a facility operated by Heal the Bay, our team developed playful illustrations supporting the idea of fun and excursion.

Education and outreach to local schools is a large part of Heal the Bay’s work and so to further cement the organization’s offering as a rich, fun experience, our team created custom illustrations for interactive and educational content within the Summit to Sea category.

Heal the Bay depends on supporters of all backgrounds in order to meet its mission and so for the site to truly be a success, it was our duty to help communicate value of the organization’s work at the donor level. Toward this goal, we developed hover infographics and video testimonials that could further solidify the benefits of becoming a donor.

360 Virtual Reality

To give the most immersive experience possible, verynice leveraged their current partnership with VR Causes, a philanthropic virtual reality enterprise that develops impact use cases and social awareness through immersive storytelling. By venturing to key locations and capturing natural environments in this new format, audiences will get the opportunity to not only view the natural surroundings in 360 degrees, but also interact with the content itself, and let curiosity take the lead. In addition to having the videos on site, users will be able to experience them in virtual reality using many different headset units such as the Google Daydream, Google Cardboard, HTC Vive, Oculus Rift, or even Playstation VR.

Working Together

By bringing together design, emerging technology, content, and web analytics, our collaborative team produced an exciting new window into Heal the Bay’s work. As a result, the organization will count on a more streamlined process for reaching key information, as well as unique opportunities for new and returning visitors to experience their field work. Great user experience happens when user goals align with business goals. We look forward to seeing an increase in engagement from volunteers, donors, and strategic partners.

Be sure to check out the full site here!

Credits

Creative Direction:
Matthew Manos

Art Direction:
Alisa Olinova

Graphic Design:
Alisa Olinova
Olivia Sy

Virtual Reality 360 Video Production:
Marlon Fuentes

Project Management:
Florencia Di Sarli

Development:
Jenn de la Fuente


Causes

Environmental


Downtown Women’s Center

Design Strategy
Digital Product Design
Visual Communication


Three years of design and strategy to benefit women in Skid Row.

View Project

End Epilepsy

Design Strategy


A social media campaign to end epilepsy and celebrate a unique community.

View Project

NRDC: Demand Clean Power

Design Strategy
Visual Communication


A national campaign to demand clean power.

View Project