How do you get buy-in for a big redesign?

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

How do you get buy-in for a big redesign?

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. In mid-2015, after a number of false starts, the library’s web team began a project that sought to 1) transform the website’s design, making it mobile-friendly; 2) make the site’s content, architecture and design more user-centered, and 3) move into a completely new content management system.

My role

As the newly hired Assistant Manager for Websites and Online Engagement, I was responsible for managing web projects and supervising and training a team of four to eight full-time librarians, staff, and web developers. While managers above me had the final say on big decisions, I was seen as the expert on web, design and user experience matters. Therefore, for all practical purposes, I was in charge of setting the content strategy, user research plan, and design direction; and managing project progress. I was also responsible for selecting/advocating for tools and web development approaches, training an inexperienced web team in user experience methods, dividing the work amongst team members, and figuring out all of the processes to engage internal stakeholders and collaborate with other departments.

Problem

When I joined the project in 2015, the website’s design had not changed substantially in over seven years, and the organization had no idea how to approach such a big transformation. It needed its new website to be user-friendly and accessible for the incredibly diverse set of audiences that use the library. It also needed to get buy-in and participation from staff in over 10 different areas, and set processes and content creation guidelines for over forty 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. Because there were so many stakeholder groups, I used a phased training approach to bring along Web Team members so they could eventually run the workshops solo.

As most of the team had never done any UX research before, I began with some simple surveys and contextual interviews to understand what users wanted to do, and how the current website was and wasn’t working for them. We already had a pretty good idea about the existing site’s usability problems, so I decided against doing usability testing. I also trained team members to look at the web analytics so we had data on which pages weren’t being used. I set up a process for a full content inventory and audit, and trained the team to undertake it.

I kicked off the internal engagement by conducting a series of workshops with 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, I selected the next set of methods and processes for determining the site’s information architecture. I had the team run a series of card sorts and tree tests with library users to come up with the architecture of the site. As we collaboratively iterated structures and labels for the site navigation, I had the team rough out some simple mock-ups and quickly test them with library users. We believed it was important to consult with a wide variety of library users, so we set up guerilla testing stations outside the Central Library to talk to random passers-by, not just people in the library. I also had team members travel to branches with large populations of non-English speakers and visit 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

As site content began to solidify, team members worked collaboratively on higher-level design elements such as typography, colors, and common components, and split up the different page types to create wireframes in Moqups. This freed up our web graphic designer to use her talents on a smaller number of high-fidelity mock-ups.

Cropped screenshot of a black and white wireframe for the Vancouver Public Library home page.

Partial view of an early wireframe for the home page. Individual team members would take the first pass at creating wireframes, and we would critique and iterate them as a team.

As the web development for the site progressed in conjunction with a contracted Drupal development company, I used various project checkpoints as opportunities to test the new site and CMS with staff. When the contract for the development team expired, I led the Web Team in completing development on the remaining features. The new vpl.ca launched in spring 2017.

Analysis

The initial research 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, I suggested we conduct A/B tests with users and they agreed to proceed 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 – this was a compromise for the Marketing and Communications department, who wanted more real estate on the home page for promotional items
  • A new mega-menu 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 moved to the new site immediately. To further help with change management, the library administration allowed 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, and we were able to turn it off earlier than planned. 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. The Web Team was also awarded a Vancouver Public Library Service Award for Enhancing the Patron Experience for our work on the redesign.

In retrospect, I wish we could have taken a more Agile approach, releasing parts of the site to the public earlier, but library leadership was fairly risk-averse. It also would have been challenging to do without forcing users to shift between two different sites, potentially disrupting their experience. When I look at the site today, I can’t help but see the number of compromises we made to appease various high-level stakeholders; but as a whole, I believe the new site provides a much-improved user experience.

Perhaps more importantly, through the redesign project, I was also able to do a lot of work on transforming the organization itself. I built staff capacity in user experience research and design, trained content creators to write for the web, argued for the adoption of more modern web development practices, and championed a culture of evidence-based decision making. I hope these changes have made ongoing iteration on the VPL website possible, and that big redesigns will be a thing of the past.