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. 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 audiences that use the library. It also needed to get buy-in 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 users who tended to resist change.
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 many presentations and workshops to educate library staff about why a redesign was needed, and to bring stakeholders along in the redesign process. Because there were so many stakeholder groups, I used a phased training approach for 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. This was to get a sense of 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 site’s existing 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. We then did a full content inventory and audit.
I kicked off the internal engagement with workshops for high-level managers and area stakeholders to establish a shared vision and values for the site. I modeled the workshops on Steve Fisher’s Conflict is the Key to Great UX framework so everyone could come to an agreement on content priorities.
As we began to develop a rough idea of the site content, I chose the methods and processes for figuring out the site’s information architecture. I had the team run a series of card sorts and tree tests with library users. As we collaboratively developed 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. We were able 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 people with accessibility needs in their homes.
One iteration of the information architecture for the new website
As site content began to come together, team members worked collaboratively on design elements such as typography, colors, and common components. The team 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.
Partial view of an early wireframe for the home page. Individuals would take the first pass at creating wireframes, and we would critique and revise them as a team.
The library hired a Drupal development company to do the initial web development. 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 some 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 into 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 clunky old CMS that didn’t allow them to feature the library’s large number of offerings.
Outcomes
While the number of consultations and workshops were pretty time-consuming, they were helpful in preparing our internal stakeholders for change. We were also able to use a data-driven approach. For example, when library leadership felt they had better labels for some items, I suggested we conduct A/B tests with users and go 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 promotion.)
- 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
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, but most people moved to the new site immediately. To help with change management, the library administration wanted to keep the old site up post-launch and 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.
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 pretty risk-averse. It also would have been challenging to do without forcing users to go between two different sites.
Overall, we had a very good response to the new site: library users reported being 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.
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, introduced 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 can be a thing of the past.
