Vancouver Aquarium Website Redesign

Vancouver Aquarium Website Redesign

Case Study By
April–November 2011
The Vancouver Aquarium
Project Title
Vancouver Aquarium Website Redesign
  • Creative director: Eric Karjaluoto
  • Technical director: Eric Shelkie
  • Designer: Ryan Gravito
  • Information architect: Eugene Huh
  • Developer: Brad Beebe
  • Office manager: Jen Gerullis
  • Content coordinator: Eva Taylor
  • Intern: Jacob Kownacki
Vancouver Aquarium: Digital Advisory Team
  • Senior VP, business and CFO: Cathy Imrie
  • Senior VP, external: Susan Archibald
  • Director of content and digital experience: Jeff Heywood
  • Director of information systems: Adrian Birsan
  • Director of communications: Charlene Chiang
  • Web content manager: Meighan Makarchuk
  • Marketing consultant: Joanne Turner


The Vancouver Aquarium is a self-supporting, nonprofit society dedicated to promoting the conservation of aquatic life through display and interpretation, education, research and direct action. Since opening their doors in 1956 as Canada’s first public aquarium, the Vancouver Aquarium continues to be the largest such facility in the country, and frequently ranks as one of the top ten aquariums in North America. To this day, it remains a self-supporting, nonprofit organization.

The Aquarium was founded on the principles of maintaining the highest possible standard of animal care while creating a top-notch facility that combines an informative and educational guest experience with wonder and imagination. Their vision is a sustainable world, where aquatic life is diverse and flourishing, and they are wholly committed to creating awareness on conservation.

The goals of this updated site were to:

  • Increase gate attendance, repeat visits and awareness of new exhibits
  • Build the leading global digital resource, and community, around marine life
  • Fully engage the audience in active learning about the living marine world
  • Increase donations, sponsorships and bookings by better conveying the aquarium’s mission
  • Change the public perception to help them recognize the organization’s complete offering

The Vancouver Aquarium website redesign needed to showcase all of the aquarium’s offerings rather than just a simple overview of the facilities. The new home page provides links to key information while highlighting new features and blog posts.


Rich imagery and content were used strategically to establish a tone that is lively, beautiful and awe-inspiring. Show and gallery pages, like the one above, demonstrate that there’s always something to see or do at the Aquarium.


Main section pages give visitors a quick overview using a magazine-like layout, while the dropdown menus (pictured) allow visitors to skim and drill deep into content with a single click.


A pared-down mobile site was created to provide quick and easy access to basic facility information for users who are on-the-go.


The blog centralizes recent news and updates from the Aquarium’s daily operations, as well as from its conservation and research projects.


The smashLAB team worked out some of the bigger challenges on the chalkboard through collective discussion and analysis.


Hundreds of icons were sketched and tested, with the intent of helping visitors navigate the site quickly and easily.


More than 280 custom icons were built. In addition to serving as visual wayfinding aids, they added some personality to the site and helped break up text-heavy areas.


$210,000 (budget was reduced by 20 percent, based on the organization's mandate and nonprofit status)


We began our research through a series of meetings with the Aquarium's Digital Advisory Team. The members of this group helped us understand the pain points they were experiencing, the needs of the many groups acting within the organization and the characteristics of their users, stakeholders, and all those who interact with the organization.

Following the meetings, we toured the facility, its various animal exhibits and unique features. We talked with marine biologists, observed visitors and noted prominent signage and displays. The site tours gave us a good understanding of the physical space and a sense of what visitors find most interesting about the facility. We saw firsthand how much visitors, particularly young children, were excited to see the animals and learn more about them. We wanted to reflect this sense of discovery and wonder in the new site.

As a part of our research, we also surveyed the online presences of other attractions, conservation groups and nature-focused content providers on the web, in an effort to understand the landscape and common practices. Additionally, an exhaustive assessment of existing analytics was undertaken, in order to better understand how the existing site was being utilized.


The discovery and planning process led to an exhaustive set of recommendations ranging from UX and technology to content, engagement and messaging. Our approach boiled down to identifying and understanding the key audiences and then reimagining the site from a user-centric standpoint.

This involved the development of numerous personas and use-cases, which in-turn helped reduce the overall page count by approximately two-thirds when compared to their previous site. By doing so, information could be shaped in a more compelling fashion, while also making content easier to access and faster to scan.

In researching other online presences, we discovered that many sites had great homepages but fairly lackluster content presentation—like a book with a great cover, but little beyond that. We wanted the site to reveal more as visitors went deeper into it—like the facility, the website should constantly wow and reward visitors with quality content. At the same time visitors should be directed—with clear calls-to-action—to visit the facility, make a donation or get involved.

On the technology front, a number of loosely coupled technologies were chosen in order to afford the greatest flexibility (even around their sometimes cumbersome POS, ticketing and CRM technologies).


The Aquarium approached smashLAB with a tricky request. They wanted to increase facility attendance (since that drives a large part of their revenue) but, at the same time, they didn’t want to be portrayed solely as an attraction. They emphasized that a large part of their revenue is used to fund the organization’s mission-focused initiatives in conservation, education and research; they wanted visitors to see this full offering, not just the facility.

With this in mind, we aimed to present content from the facility, conservation, education and research in a balanced yet compelling manner. In order to achieve this, we had to overcome a number of obstacles that the original site presented:

  • Sprawling content (out-of-date, irrelevant, redundant) diminished core messaging
  • Unclear content grouping and a weak navigation system made it difficult to find information
  • Lack of a central blog made it problematic to post fresh content regularly
  • Poor integration of microsites did little to highlight varying initiatives and properties
  • Lack of mobile experience frustrated on-the-go users
  • Inconsistent visual language made the site looked generic and unfinished

smashLAB produced an exhaustive site inventory of nearly 1,500 pages which was pruned and organized to help visitors find relevant information quickly and easily. Six main sections were created:

  • The Visit section provides essential trip planning information
  •  Experience highlights things visitors can and see or do
  •  Act encourages participation in conservation and research initiatives
  • Join makes it easy for visitors to volunteer or donate
  • Learn offers a variety of educational resources
  • Plan increases the number of events booked and drives revenue

In addition to the main sections, a central blog was created to house fresh content and also act as an area to drive traffic from social media.

We also devised a comprehensive content strategy to help the Aquarium define what they should publish and why. The strategy applied to all forms of content (text, data, graphics, photos, video, animation, audio, documents, forms, alt tags, metadata, etc.). It ensures that only relevant, quality content is generated and published. The strong strategy results in consistency, which in turn reaps many benefits: better user experience; greater brand consistency; increased operational efficiencies; better risk management; improved SEO and analytics; and more effective personalization.

To highlight the Aquarium’s various digital properties, and to make the main site easier to explore, the navigation system was totally reworked. A global navigation bar neatly packaged all of the Aquarium’s microsites. The main site’s navigation system implemented a mega-drop down menu, helping visitors find information that’s located several levels deep. Task-based user testing and anecdotal observations helped us iterate and refine the navigation and content structure. For mobile users, a separate mobile site was created. The mobile site was pared down to the basics, focusing on hours, rates and location information—it was built for speed (minimal load times) and ease-of-use (generous target areas for links and large text for readability).

In addition, smashLAB developed a strong visual language to give the site a highly distinctive look and feel. Inspired by our visit to the Aquarium’s facility, we wanted the site to establish a tone that is lively, beautiful and awe-inspiring. Much of this was achieved through a strategic use of the Aquarium’s rich content and photography. As visitors dig deeper into the site, they find more information. Clear typographic hierarchy, markers and cues—especially in the form of icons and buttons—help guide visitors on their journey through the site.


Since the site launched in November 2011, metrics show that user engagement has dramatically increased. Average page views and length of visits have doubled, while bounce rates have notably decreased by 34 percent. Online ticket sale volume has quadrupled. On a practical level, this translates into increased revenue that the Aquarium puts towards its conservation, research and education initiatives. When visitors return home from visits to the facility, they can continue their journey of discovery on the site—it’s a valuable digital resource on marine life.

The new Learn section, in particular, offers plenty of educational material for students, teachers and parents. Q&A–style “Aquafacts” give students easy-to-read references about their favorite animals, useful for homework and for those who are simply curious. “Field Trips,” targeted to specific age groups, helps busy teachers plan classroom activities. “AquaCamp” pages make it convenient for parents to register their kids in an engaging camp. Live animal cams and video feeds capture users’ interest and encourage them to learn more and share content though social sharing.

The new blog encourages repeat visits and helps foster a sense of community. It’s a valuable way for the Aquarium to give regular updates about its conservation and research projects. It demonstrates to visitors that real work is being performed and that progress is being made. Like the cam and video content, visitors can “Like”, “Tweet” or “+1” interesting articles or leave a comment to start a discussion.

Finally, by better conveying the mission and values of the Aquarium, the site garners more donations, sponsorships and bookings. Potential donors are shown how the Aquarium affects positive change (prior to their being asked to consider contributing). Then, they are offered several methods of donating, ranging from monthly giving to corporate sponsorship. Partner and donor gallery pages give credit to organizations and individuals who have made notable contributions to the Aquarium.

By redesigning the site, smashLAB was able to showcase the complete offering represented by the Aquarium. The new site also reduces the distance between the visitor and the Aquarium. It helps them plan their visit; it introduces them to other programs and initiatives; it facilitates learning about aquatic life; and it helps them become more involved with the organization (whether through volunteering, contributing or taking part in a shoreline cleanup). It also immerses them in a world that is rich, vibrant and filled with awe.

This case study is supported in part by an award from the National Endowment for the Arts.

Tags Design for Good social responsibility sustainability web design Case study ux design information design