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.
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.
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.
I designed visual assets for the site including an icon font, Children's blog illustrations and placeholder graphics.
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.
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.
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.