VanAqua Website

Connecting to the Natural World

The Vancouver Aquarium is a nonprofit society dedicated to effecting the conservation of aquatic life through display, communication, education, research, and direct action. This broad mandate was problematic from a communications standpoint, however, as outsiders often perceived the Aquarium solely as an attraction. Consequently, people were missing out on the many stories, programs, and initiatives underway. This was compounded by the Aquarium's many audiences and stakeholders, and a dated website that employed multiple independent (and poorly integrated) technologies due to their varying needs.more

An Analytical Approach

We started the process of rebuilding the website with discussions, data analysis, and producing an exhaustive site inventory of nearly 1,500 pages. This acted as our foundation as we created nearly 60 distinct wireframes, crafted an adaptable design system that highlighted the stunning natural beauty of marine life, and developed a working content strategy. 

While integrating with the Aquarium's systems, we also built and configured a series of tools and platforms to add flexibility to their online presentation.

Discover a Whole New World

The new site makes use of rich, expansive imagery and fully reorganized content, while seamless integration with the facility's legacy systems offers a clean and unified user experience. It also effectively communicates the Aquarium's vision and commitment. Since launching, early metrics show that user engagement has dramatically increased (average pageviews/length of visit have doubled, while bounce rates have notably reduced) and online ticket sale volume has quadrupled. The creation of a mobile site limited to the essentials has also doubled mobile usage. See for yourself.


Vancouver Aquarium homepage
Vancouver Aquarium homepage

Visitors to the main Vancouver Aquarium website are first presented with a global navigation bar, allowing them to travel to a number of the Aquarium’s web properties. A carousel highlights current events and features; meanwhile, key information about the organization and venue, alongside some recent blog content, round out the page.

One of the most substantial changes to the Aquarium website, was the shift to thinking about the user first. This may be most evident on pages like the one pictured, in which the most relevant content takes the stage. Changes like this aren’t easy to make, however—such simplicity does require some deal of restraint.

While many websites’ homepages aren’t matched in beauty as one moves through the site, works to remain consistently involving and arresting. Main section pages, for example, feature close cut images, easy to scan text, and quick links—all in an effort to engage the visitor and encourage further exploration.

The “mega” drop down menu (industry language, not ours) is a really nice addition to the Vancouver Aquarium website. It allows users to drill down to any section of the website very quickly. Additionally, it’s highly adaptable to changing site content as well as the needs of the organization.

Vancouver Aquarium Beluga Show page
Vancouver Aquarium Howe Sound report
Vancouver Aquarium Animal Encounters page

Visual variety is key to the Aquarium website. Lush, vibrant backgrounds immerse visitors in the kind of experience one has while at the venue. Depth comes in the rich content, images, and video that’s found throughout the entire website. At the same time, clear headings and groupings allow for easy scanning of page content.

Vancouver Aquarium inline tables
Vancouver Aquarium wayfinding icons
Vancouver Aquarium quick-links
Vancouver Aquarium image gallery

While most users likely won’t even notice them, details are a big part of this website. Pictured (from top left, clockwise): inline tables; wayfinding icons; quick-links; embedded image viewers. These seemingly small considerations make the user experience intuitive, responsive, and even fun.

In addition to the many hundreds of images curated and edited for the website, nearly 300 custom icons were drawn. These simple and highly identifiable forms help users make sense of information visually, aiding in the overall site usability.

Vancouver Aquarium blog
Vancouver Aquarium blog
Vancouver Aquarium blog

The AquaBlog works as a key tool in the organization’s outreach and engagement with the public. Organized into a few key categories, it allows readers to find content of specific interest, or to just casually browse. Multiple parties, from completely different departments, contribute to this online publication.

For those who are out-and-about, the Vancouver Aquarium offers a smartphone-friendly website that provides just the core facts, in a pared-down and mobile optimized fashion. Fast loading pages, highly simplified navigation, and big, easy to read text all make for a fine experience while on the road.


  • Comprehensive discovery process
  • Exhaustive user interface design process
  • In-depth content strategy and creation
  • Website and mobile site development
  • UX testing, review, deployment and training

Key Benefits

  • Effectively conveys mission, vision, achievements
  • Better engages visitors with content and vivid imagery
  • 270+ hand-crafted icons act as a wayfinding system
  • Unites independent blogs into a high-impact magazine
  • Mobile site delivers essentials to those on-the-go


  • Rebuild of sites from the ground-up
  • Utilizes a new, more user-friendly CMS
  • Seamlessly integrates with Blackbaud NetCommunity
  • Unites multiple properties with global navigation
  • Detects mobile devices, delivering tailored experience


"What I appreciate the most about smashLAB is the dedicated and attentive service its team provides—in our world of digital immediacy, it helps to have a trusted partner we can call on, day or night."