Redesigning a library's virtual branch

Vancouver Public Library

Vancouver Public Library home page


With the redesign of the Vancouver Public Library's website, our Web Services team wanted to create an online experience that employed user-centred design principles and modern web design practices.

Our vision was to have “an inclusive place where people can easily discover and access the library information and services they need.”

We worked with OPIN, an Ottawa-based web development firm, to transform the results of our process into an responsive Drupal CMS website with a flexible and modular approach to design and content.

Vancouver Public Library personas


Pre-existing library users were at the top of our audience priority list. draws the attention of genealogists and creatives, small business owners and job seekers, teens, kids and their parents, as well as newcomers and seniors. As such, the website needed to appeal to a wide variety of interests, have support for the city's most popular languages and be accessible on a broad range of devices to people with varying degrees of digital literacy.

We created personas for some of our most common library users, outlining their motivations, interests and technical proficiencies.

Vancouver Public Library Pattern Library components

Design Deliverables

As the lead designer for the project, I was responsible for all aspects of visual design related to the website. While our web librarians worked on content strategy, user research and information architecture, I created style tiles, a pattern library and high-fidelity prototypes to guide the OPIN team through their development work.

Vancouver Public Library kids blog illustrations

Visual Assets

I designed visual assets for the site including an icon font, Children's blog illustrations and placeholder graphics.

Vancouver Public Library musical instrument photos


I worked with one of our web librarians to photograph instruments for the Sun Life Financial Musical Instrument Lending Library. These images have since been used by a number of public libraries across Canada for their own collections.

Vancouver Public Library Collections mobile menu on two phone screens

Menu Refactoring

Post-launch, one of the biggest items on our task list was refactoring the site's menu system. The one that shipped with the site made use of two menu systems and was not compatible with assistive technologies. I took the lead in rebuilding the menu from the ground up using jQuery to ensure it met accessibility guidelines.

The menu now uses one menu system and works on two of the most popular screen readers on the market, NVDA for Windows and VoiceOver for iOS.

Vancouver Public Library Design System typography


Many of the design decisions made were influenced by the results of user research findings. Staying close to the library's brand guidelines, the website incorporates the library's main colours in subtle ways throughout the site.

We selected Open Sans as our primary typeface as it is welcoming and legible at various screen sizes. It is also a web typeface that most closely resembles the library's print typeface, Frutiger.

In keeping with accessibility guidelines, the headlines, body text and links on the site are high contrast. We changed the primary link colours from red to blue to provide a better experience for colour blind users.

In tandem with decisions made around content strategy and information architecture, the overall result is a website that is less cluttered, easy to navigate and visually streamlined.

Impact launched to the public in in May 2017 and was featured as the only Canadian library website in Piola's list of the 25 Best Library Websites of 2019.

With content presented on fewer pages, patrons were able to find what they were looking for in fewer clicks, resulting in an expected drop in page views and sessions.

A survey done several months after launch garnered a 63% positive general impression from over 350 respondents. Some of the feedback we received on the survey include: