Mary Castellanes

Vancouver Public Library

UX/UI Design — Web Development — Illustration — Photography

View Project

Vancouver Public Library landing 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 website with a flexible and modular approach to design and content.

Vancouver Public Library persona Nicole Vancouver Public Library persona Jack Vancouver Public Library persona Maryam

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 user interface components

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 illustrations

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.

Vancouver Public Library musical instrument photos

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.

Vancouver Public Library guide page

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

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.

Vancouver Public Library menu on phone screens 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.

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: