m_

Vancouver Public Library landing page on a laptop

Background

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 Collections page on a laptop Vancouver Public Library Musical Instrument Lending Library page on a laptop
Vancouver Public Library website on three phone screens

Audience

Pre-existing library users were at the top of our audience priority list. VPL.ca 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 persona Vancouver Public Library persona Vancouver Public Library persona Vancouver Public Library persona

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 pattern library
Vancouver Public Library carousel iteration

Visual Assets

I designed visual assets for the site including an icon font, blog illustrations and placeholder graphics. I also worked with one of our web librarians to photograph instruments and devices from the library's lending programs.

Vancouver Public Library kids blog illustrations Vancouver Public Library icons
Vancouver Public Library musical instrument photos

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 Collections mobile menu on three phone screens

Rationale

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

VPL.ca launched to the public in in May 2017. 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:

• Congratulations on the relaunch! It looks like it was no small achievement.
• It isn't making use of web design ideas from the 1990s anymore
• Clean, sleek design with a reasonable and useful amount of information
• This is well-planned and a welcome space. Very nicely done. A+

View Project