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.

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.

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

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.

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

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.

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.

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.

A refreshed brand and a complete website redesign.

New brand elements and a website focused on user experience, accessibility and e-commerce integration.

New brand elements and a website focused on user experience, accessibility and e-commerce integration for VSO.

Vancouver Symphony - Case Study | The Hatchery - Design & Build

The first web app of its kind, we were immediately impressed by the co-founders’ vision to fill a market niche not previously met. 

When we first started working with the Fictionary team, they had a solid MVP built with a loyal base of monthly subscribers. Having never previously made design a focus, they were ready to bring intention to their brand, marketing website, and web application experience.

The Fictionary brand is friendly, approachable, polished and professional all at once. A key component of the brand is its ability to properly convey the complexity and importance of the story editing process (big names in writing like JK Rowling have been very open in sharing their mountains of spreadsheets and documents for accomplishing a proper story edit) - and demonstrating how the web app enables both efficiency and thoroughness.

Fictionary is a productivity suite for writers and editors, designed specifically for users to effectively perform story edits - also known as structural edits.

The new web app design reflects the new branding with colors and visual elements adapted from the brand. Our team created a components kit website for Fictionary’s app developers to easily reskin the existing app.

With the launch of the new product StoryCoach for the editor's audience, defined funnels become even more important for the new website’s information architecture. Clear paths for writers (separated into new and experienced writers) and editors with separate messaging and visuals is a key update to the new website design, along with an elevated brand experience:

Without changing any major core functionality, the new website and web app reflect the new branding with colours and visual elements adapted from the brand. 

After completing the brand and site UI, our team created a components kit website for Fictionary’s app developers to easily re-skin the existing app.

Establishing a strong brand to elevate a successful startup.

Fictionary - Case Study | The Hatchery - Design & Build

Establishing a strong brand to elevate a successful startup.

Background

Fictionary is a productivity suite for writers and editors, designed specifically for users to effectively perform story edits - also known as structural edits.

Overview

New Brand

Our Role

Tools & Technologies

Icons & Illustrations

Marketing Site

Web App Re-Design

View Next Project