How do you sell a big redesign to diverse audiences?

A new website for the Vancouver Public Library, replacing a 9-year old design

How do you sell a big redesign to diverse audiences?

BACKGROUND

The Vancouver Public Library is the second largest public library system in Canada. With over 3.5 million online visits per year, VPL’s website is the primary channel for people to learn about the resources, programs, and services the library offers. When I joined the project in 2015, the website’s design had not changed substantially in over seven years, and the organization was trying to plan for a redesign and implement a new content management system. It needed to get buy-in and participation from staff in over 10 different areas, and set processes and content creation guidelines for over 40 content creators. The project also needed to manage a number of vocal internal and external users who tended to resist change.

Screenshot of the old design of the Vancouver Public Library homepage, from 2008-2017. There is a lot of text on the screen.

Home page of vpl.ca from 2008-2017, taken from the Wayback Machine

PROCESS

As the project and web team lead, I wanted to take a transparent and user-focused approach. I designed and delivered a number of presentations and workshops to educate library staff about why a redesign was needed, and to bring internal stakeholders along in the redesign process. 

We began with some basic user research (in the form of surveys and contextual interviews) to understand what users wanted to do, and how the current website was and wasn’t working for them. We also investigated the web analytics and undertook a full content audit of the site. We then conducted a series of workshops with both high-level managers and area stakeholders to establish a shared vision and values for the site, and to identify and prioritize content. I modeled the workshops on Steve Fisher’s Conflict is the Key to Great UX framework so that stakeholders could understand that their priorities had to be reconciled with those of their colleagues, and consider how they aligned with the agreed-upon project values.

As we began to develop a rough idea of the site content, we ran a series of cardsorts and tree tests with library users to come up with the architecture of the site. As we iterated structures and labels for the site navigation, we’d rough out some simple mock-ups and quickly test them with library users. We also made a deliberate effort to consult with a wide variety of library users, including traveling to branches with large populations of non-English speakers and visiting library users with accessibility needs in their homes.

Photo of a whiteboard covered in sticky notes with the names of sections and page of the library website.

One iteration of the information architecture for the new website

We created wireframes as site content began to solidify, worked on higher-level design elements such as typography, colors, and common components, and worked towards a smaller number of higher-fidelity mock-ups. As the web development for the site progressed in conjunction with a Drupal development company, we used various checkpoints as opportunities to test the new site and CMS with staff. The new vpl.ca launched in spring 2017.

ANALYSIS

Our initial conversations with library users revealed a number of common frustrations with the existing site:

  • Too much text
  • Labels in the navigation were confusing and jargon-y
  • Frequently used content was often buried several clicks in to the site
  • Prominent content, in particular the main photo of a library user, seemed stale (the photo changed on reload but pulled from a stock of only 8-10 images, some of which had been around for years)

Our staff stakeholders were frustrated by the antiquated CMS that didn’t allow them to feature the library’s large number of offerings, as the only page with any amount of visual variety was the strictly-controlled home page.

OUTCOMES

While the extensive number of consultations and workshops were extremely time-consuming, they were very effective in aligning internal stakeholders and preparing them for the coming changes. We were also able to use a data-driven approach throughout: for example, when library leadership felt they had better labels for some items, we conducted A/B tests with users and proceeded with whichever term performed better.

Some of the new features we were able to roll out included: 

  • A carousel of frequently-changing news items to replace the prominent library patron photo
  • A new megamenu that presented fewer choices up-front, to allow users to comfortably drill down and explore content
  • Large, visible button links to frequently used items
  • More prominent search bar
Screenshot of the new library home page, with less text, more prominent searchbar, and visible button links to frequently used pages.

An updated home page isn’t a radical departure from the old design, but it’s cleaner, with more breathing room for key content

As part of the rollout strategy, we offered a two-week pre-launch preview of the new site, and found significant numbers of our users moving to the new site immediately. To further help with change management, the library administration also wanted to allow users to access the old site for a period of time, to gradually ease it out; however, we found that very few people bothered with the old site. Overall, we had a very good response to the new site: library users reported being better able to find things independently, and the feedback we received in a post-launch survey was overwhelmingly positive.