UX Case Study: Navigation Redesign of San Francisco Public Library

Project Overview

Our team was assigned to analyze every facet of SFPL’s homepage navigation structure and uncover areas where it might be improved.

  • MISSION MODEL CANVAS
  • COMPETITIVE MATRIX
  • COMPETITIVE FEATURE ANALYSIS
  • COMPARATIVE FEATURE ANALYSIS
  • CARD SORTING (OPEN AND CLOSED)
  • TREE TESTING
  • HEURISTIC EVALUATION
  • USER FLOW
  • SITE MAP

Our Client

San Francisco Public Library system was established in 1878. Currently it has 27 branches and serves a population of 870,887. It serves the community by offering services in education, entertainment, social engagement, etc.

Mission Model Canvas

SFPL’s Mission Model Canvas
  • Our client provides a wide range of services, from lending books to offering job resources and holding virtual events;
  • Its value can be measured in cultural and educational contributions, as well as in entertaining and social opportunities it provides.
  • SFPL’s financing is entirely non-profit based and its costs are covered.
  • It’s services are provided in-person and remotely.

Competitive Matrix

Competitive Matrix of SFPL
  • Pay special attention to NY Public library for being specific non-profit competitors;
  • It allowed us to understand that most of our competitors are very different in terms of their business model which implies higher incentive when competing for users’ attention.

Competitive and Comparative Feature Analysis

  • The majority of our competitors don’t include any calendar or any mention of a calendar feature which would be very helpful in promoting events and author readings for people like Kelley.
  • Apple Books, Netflix, and City Lights Bookstore do not focus on online learning or providing online learning resources for their users, which would be very helpful. Our other competitors do focus on this feature which in fact is very helpful.
  • Some of the comparators placed their event calendar functionality in a prominent position in the center of their homepage.
  • Our comparators have more advanced ADA features that offer sound options.

Target Audience

We were assigned with our persona, Kelley, who represents SFPL’s target audience. We conducted our tests based on Kelley’s needs and goals.

Card Sorting

Closed Card Sorting
Test was performed with the purpose of helping our team to analyze the information architecture, workflow, menu structure, and navigation paths of our current website. Participants were asked to group 30 cards into 4 categories named after the primary navigation system currently existent on the SFPL website home page. This test was performed online and unmoderated.

  • Only 48% of participants placed the right cards under their current right categories.
  • Most users were confused by words such as services and resources.
  • Many didn’t know what Biblio Boutique meant.
  • Most participants grouped the cards with the word virtual or starting with lower case “e” (e.g. eMagazines & eNews) in a category titled Online Services/Resources;
  • Cards containing the words Services and Resources were often grouped together;
  • Cards containing the words Calendar and Events were often grouped together;
  • Task cards like Get a Library Card were grouped with other task cards (e.g. Suggest a Title, Reserve a Computer, Ask a Librarian…)

Tree Testing

We used Tree Testing to understand how our test participants think, what their ‘mental model’ is. Our goal was to assess the efficiency of the existing navigation of the SFPL.

  1. Most participants had low success with navigating to their selections.
  2. The task where users had to find classics, in this case, a Jane Austen book, none of the participants were able to get to the appropriate destination.
  3. The labels, catalog and classic catalog, confused the participants.
  4. There is definitely room for improvement for redesigning the navigation feature.

Heuristic Evaluation

We conducted the Heuristic Evaluation based on the Abby Method. We used this to validate the usability of the existing website of SFPL and uncover any problem areas the users maybe encountering.

  1. The website does not offer much in the way of ‘delight’ to it’s users.

Site Map

We created the sitemap of the current homepage of SFPL to better understand how the existing navigation system operates.

User Flow

Key Insights Gained From The Testing

  • Users are confused by the primary and secondary labels of the navigation system of SFPL
  • There are repetitive labels that bring the user to the same page.
  • Users had trouble differentiating between Research and Learn tab and Support and Services.

Existing Navigation of SFPL

Proposed Navigation of SFPL

Redesign of Proposed Navigation

With our proposed navigation we made the following changes:

  • We renamed the Primary Labels as we found that the users were unclear about the previous labels, which created confusion and ended up in extra clicks to get to the location that they were seeking.
  • We also added more Primary navigation tabs to ease the confusion. This way more information could be visible to the users.
  • We added more secondary navigation labels to give more choice to the users on one page. This avoid the hassle of going on pages that they did not want to visit.
  • We displayed more user friendly labels that users are more likely to associate.

Hi-Fidelity Prototype

Hi-Fidelity Prototype of the Proposed SFPL’s Navigation structure

Conclusions

Once we created the proposed sitemap, we started to test it with users to assess if we were able to fully understand their problems. We did another set of Closed Card sorting and Tree Testing. A few takeaways from the second round of tests revealed the following points:

  1. Compared to the first round, in the 2nd round of Closed Card sort, participants were successful by about 12.9%. This validated our research that users were confused by the naming method of the navigation labels.

Recommendations

Moving further, we will do more testing to refine our navigation. Adding more controllability and delight to the design would make for a enjoyable user experience for Kelley.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store