A refreshed brand and a complete website redesign.

Vancouver Symphony Case Sudy Banner


With an unexpected shift to online content and memberships, VSO opted to do things right.


The largest performing arts organization in Western Canada, the Vancouver Symphony Orchestra has a rich history and presence dating back to 1919. With its home at the legendary Orpheum, the VSO is a pillar and institution of the arts scene, performing 140 high caliber concerts per season.

In 2018, we worked with VSO on a reimagined marketing website experience to modernize their then-aging website and limited e-commerce experience in time for their 100th season. Working with multiple stakeholders, we created a brand new website for VSO’s patrons and audiences.

With an unexpected industry-wide shift to interactive online content and e-commerce due to COVID-19, we sat down with VSO again to re-image the site again. With a heavy focus on user experience, accessibility, online content and seamless e-commerce integration, we successfully launched ‘VSO v2.0’ in February 2022.

Colour Palette

VSO Brand Expression + Guidelines

To build further excitement for the upcoming VSO concert season, we developed updated and comprehensive brand guidelines documentation. Taking into account the various media channels that the VSO communicates with their audience, we refreshed core brand elements such as typography, colour palettes, imagery, textures,  logo usage and a family of supporting visual systems.

This refreshed brand was put to the test and activated right away with a series of outdoor and digital campaigns as well as the new website.

Our Role

  • Website Redesign
  • Website Development
  • Ecommerce Development
  • Consulting & Implementation
  • Brand Elements & Guidelines
  • Brand Messaging & Strategy

Tools & Technologies

  • Adobe InDesign
  • Sketch
  • InVision
  • WordPress
  • JavaScript
  • HTML
  • Vue
Vancouver Symphony Brand Main Image

Icons & Brand Elements

Vancouver Symphony Icons & Brand Elements

After extensive user testing and research and with the disruption in the industry caused by COVID, VSO decided to proactively update their online presence.  A heavy emphase was placed on interactive and video-based content, ease of use, legibility and an all-new user interface.

Vancouver Symphony Mobile Screens
VSO Case Study Laptop Full Screen

UX (User Experience) + UI (User Interface) Design

Although VSO had a visually stunning website launched in 2018, it became apparent through research that their core audience group and general audience - as well as their expectations for online content - had shifted with COVID-19.

During our UX (user experience) and UI (user interface) design phases, emphasis was placed on legibility - font sizes, contrast and color. We also focused on content accessibility by simplifying the navigation, establishing clear, strong calls to action and one-click access to key pages like your account, donations, event details and purchasing tickets.

Vancouver Symphony Website UX

E-commerce implementation

The symphony’s administrative infrastructure is closely tied into Tessitura, a CRM for the arts world. Many aspects of the organization are powered by the CRM - from the box office to the finance department, to donor relations. As Tessiture is tightly integrated within the organization's infrastructure, we decided on leveraging Tessitura’s TNEW platform to power the website's e-commerce component.

After a period of consultation with VSO’s marketing, IT, and development departments as well as a good deal of research into implementation successes at other arts organizations, we presented a solution to VSO that would modernize their e-commerce capabilities within their budget and timelines working closely with the Tessitura team directly. We were able to skin TNEW to match the updated design of the website by implementing a template that uses a custom stylesheet and allows the header and footer to be consistent with the rest of the marketing website.

Vancouver Symphony E-Commerce iPad

Website design and development

As with our previous build, our design team was excited to redesign the website again, leveraging both the newly designed brand standards as well as the dramatic concert photography in the VSO archives. With a heavy focus on user experience, the current user interface makes the browsing experience enjoyable and engaging - while housing the extensive season catalogue and concert archives.

As it was extremely important to improve the user experience for VSO’s audience, a custom event listing module was developed using Vue.js. This allows for a more flexible and performant front-end, which in turn provides a better experience.

Vancouver Symphony Events Page Example
VSO Brand Guidelines Exampl

© The Hatchery Creative Labs, Inc. | Privacy Policy