UCSF Library Spaces

Making it Easy to Find the Right Resource

A key goal for the redesign of the UCSF Library website was to eliminate redundant and outdated content, streamlining the site to support the scanning-not-reading behavior users demonstrate on the web.

Because our patrons were visiting multiple pages across the site to get a complete picture of our resources, I knew our Computer Labs and Study Spaces pages were especially ripe for a rethink.

Lead Interaction Designer

  • user research
  • Sketching & wireframing
  • prototyping
  • Usability testing & analysis
  • Design iterations
  • partnering with a developer

Lead Interaction Designer

  • Problem finding & user research
  • Sketching & wire framing
  • Hi-fidelity prototyping
  • Usability testing & analysis
  • Design iterations
  • Partnering with a developer

A key goal for the redesign of the UCSF Library website was to eliminate redundant and outdated content, streamlining the site to support the scanning-not-reading behavior users demonstrate on the web. Because our patrons were visiting multiple pages across the site to get a complete picture of our resources, I knew our Computer Labs and Study Spaces pages were especially ripe for a rethink.

user research

I started with a known problem: two pages of near-identical content frustrated users

I turned to our real-world personas: what have our users already told us about finding Library space?

the analytics surfaced another problem: Computer Labs page visitors weren't finding what they needed

I did a quantitative analysis of our Google Analytics data, both to figure out what our users already valued about the two existing pages, and to see if there were any interesting or unusual click patterns I might learn from. I turned up some interesting data, including the fact that the Study & Meeting Spaces page received 5 times the traffic as the Computer Labs page.

However, the really interesting finding was that 1/4 of the visitors to the Computer Labs page visited the Study Spaces page immediately after. Why? There are no links to Study Spaces from the Computer Labs page. Clearly, something was missing from the Computer Labs page.

Clearly, something was missing from the Computer Labs page
Clearly, something was missing from the Computer Labs page

Sketching & wireframing to find solutions

I prioritized student needs early in the process, since they're the main users of Library space

It was important to make the page easy-to-scan to quickly answer user questions

Collapsing closely-related information into one page was a good impulse, but it resulted in a very long page with lots of information below the fold. Knowing that users would scroll-and-scan for relevant keywords, I used bullets, white space, sorting, and filtering so that users don't feel overwhelmed.

I iterated on a filtering feature, letting our users drill down to the right space with the right equipment

Prototyping, testing & iterating

I built a hi-fidelity prototype with wordpress and custom html/css, and leveraged the UserTesting.com platform to facilitate in-person usablity tests

After three rounds of testing, analysis, and iterating, I reached a 100% task success rate

I also solved the Computer Labs missing content mystery

In the final round of testing, I dedicated one task to the Computer Labs page on our live site, switching away from my prototype. Once the task was finished, I casually asked if there was anything the tester had expected to see on the page that they were not seeing.

It turned out our dissatisfied Computer Labs page visitors weren't looking for pictures of our rooms after all; they simply wanted to know if a given space had printers and scanners. We'd called out this information on the Study Spaces page, but it was weirdly absent from the Computer Labs page. This insight validated my impulse to collapse the content into one page.

I also spent time after the test asking a) what matters to you about a space and b) what filters, if any, are missing from the new design. My final iteration incorporates lessons learned both from my task analyses and the Q&A that ended each test.

So what was missing from the Computer Labs page? Students were looking for printers & scanners
So what was missing from the Computer Labs page? Students were looking for printers & scanners

Partnering with a developer to bring the new UI to life

Our developer worked from my prototype and flow documents

This almost-final iteration will go through another round of testing to ensure that the fully-functional interface is easy to use, and meets our users needs.