Information Architecture — San Francisco Public Library

Website Navigation Redesign Proposal

Gustavo Silva
4 min readMay 15, 2021
Current website’s design.

Problem Space

In a world in which people increasingly communicate, study, and complete
transactions virtually, it is vital for libraries to have a robust online presence to meet patrons at their point of need. Although some resources are simply more useful in print, the ability to answer questions, provide information, and direct library users to information has to be undertaken electronically as well as in person.

Our Goal

To understand the original structure of the San Francisco Public Library’s current website, and how it can be improved.

UX Methodologies

We started with a Business Research using a Mission Model Canvas to get a better understanding of SFPL’s priorities and the value it provides, a Competitive Matrix to identify their closest competitors as well as the business position within a wider field of related industries, and finally a Competitive and Comparative Feature Analysis in order to evaluate our product in relation to products of other companies that are and aren’t competing directly with SFPL.
Our User Research started by defining our persona, Kelley, an accurate
representation of the library users. We applied Tree and Card Sort studies to evaluate the current navigational structure of the library’s website and a thorough Heuristics evaluation on its overall features.

Outcome

After our proposed website was designed, we ran a second round of tests including the proposed navigation (sitemap), with the purpose of comparing the new results with the first round of tests, to validate or not, our design decisions. The new results showed a 33% improvement, although most participants were still confused with part of the navigation paths.

Problem Statement

Business Research

Doing a Competitive Matrix allowed us to identify our closest competitors as well as our position within a wider field of related industries. We focused on organizing our competitors by categories that consisted of two axes, one representing the income model, and through its purpose, and one focusing on how specialized its competitors are.

  • We paid special attention to NY Public library for being specific non-profit
    competitors;
  • Most of our competitors are very different in terms of their business model
    which implies higher incentive when competing for users’ attention.

Persona

Kelley is the best representation of all of our users. She will help us to understand our users’ needs, experiences, behaviors and goals.
We will keep Kelley in mind while making our designs decisions.

User Research

Based on Kelley goals and needs, and tests we performed focusing on the users like tree studies, Closed and Open Card Sorting tests and a Heuristic Evaluation, we were able to collected some insights.

And back in our Business Research when we used a Comparative Feature Analysis to identified and compare standard features and existing practices from our comparators, we found out that:

Important Insights

Revised Problem Statement

Design

A new Navigation System

  • Only 3 primary navigation (was 4); conducted a second round of closed card sorting with 5 participants to validate it
  • Added 9 new secondary navigation;
  • Sorted majority of the existent navigation links under the secondary navigation (as tertirary navigation);
  • Changed some label names for Kelley to easily understand them;
  • Added In Person and Virtual links for Events and Exhibits.
Proposed design layout.

Insights > Design

Prototype Demo

https://www.figma.com/proto/32GsHGWoPCIk9arlx1DO3z/P2-Prototype?page-id=0%3A1&node-id=1%3A4&viewport=148%2C389%2C0.0464511439204216&scaling=scale-down&hotspot-hints=0

Next Steps

  • Change on more labels to continue to make navigation more intuitive to the users;
  • More rounds of Tree and Card Sorting tests to discover better options to increase user’s direct success while performing tasks;
  • Explore more options on the proposed design of the website (colors, font, etc…).

--

--