UX Case Study: Navigation Redesign of San Francisco Public Library
My Role: UX Designer
Project Duration: 10 Days
Project Status: Completed
In this case study, we will walk you through the steps and methods used to uncover problem areas in the information architecture of the navigation structure of SFPL and the proposed redesign
Our team was assigned to analyze every facet of SFPL’s homepage navigation structure and uncover areas where it might be improved.
We had 10 days to evaluate SFPL’s existing navigation, it’s usability and the market space in which it operates.
We conducted our research using the following methods:
- MISSION MODEL CANVAS
- COMPETITIVE MATRIX
- COMPETITIVE FEATURE ANALYSIS
- COMPARATIVE FEATURE ANALYSIS
- CARD SORTING (OPEN AND CLOSED)
- TREE TESTING
- HEURISTIC EVALUATION
- USER FLOW
- SITE MAP
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
The first step our team took was using the Mission Model Canvas to get a holistic view of SFPL’s business space, where it stands, who it serves.
- 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.
We then used the Competitive Matrix to understand SFPL’s closest competitors and to identify our strengths and areas we could potentially grow.
- 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 role in comparing features throughout different companies was to see if our company is falling behind and to see what our competitors are best practicing as well as what they are not.
- 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.
We deployed Comparative Feature Analysis in order to broaden our understanding of features that could improve Kelley’s experience beyond SFPL’s competitors.
- 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.
We were assigned with our persona, Kelley, who represents SFPL’s target audience. We conducted our tests based on Kelley’s needs and goals.
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.
Open Card Sorting
We followed this with Open Card Sorting. Participants were asked to group 30 cards into as many categories they felt the need of, and then name each category based on their own opinion. We wanted to learn how participants would categorize the labels of the existing navigation into groupings of their choice.
- 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…)
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.
- Most participants had low success with navigating to their selections.
- 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.
- The labels, catalog and classic catalog, confused the participants.
- There is definitely room for improvement for redesigning the navigation feature.
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.
We conducted the Heuristics for 5 pages, based on the interests of Kelley.
We observed some very important key problem areas:
- The website does not offer much in the way of ‘delight’ to it’s users.
2. Finding what you are looking for is a big pain point in our customers.
3. There is very little that the user can control while navigating through the website.
4. The font used in the Catalog page is too tiny for some of the users. And there is no way for the users to increase it. Thus making for a poor user experience.
5. Repetitive use of labels causes hindrance to the users and confuses them.
We created the sitemap of the current homepage of SFPL to better understand how the existing navigation system operates.
We created the user flow based on the goals and needs to our persona, Kelley.
The task was: “Due to Covid-19, libraries are closed. They do have a pick up service available. You want to read a critically acclaimed novel. How would you find it?”
We wanted to understand how Kelley would navigate the website to find what she is looking for. What would be the challenges she would face and how to then solve them in our proposed redesign.
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.
This brings us to our revised problem statement:
“How might we help our users to navigate the website and find what they are looking for in a timely manner?”
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.
Click here to view the prototype.
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:
- 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.
2. While in some areas we did see that the users had actually fared better, for instance, in the Books, Movies and Music category, users had success rate of 36.3% in round two, they did better in round one with 60% more success. This revealed to us that, SFPL’s current labels for Books and Media are appropriate and serve the users.
3. We saw a big jump in success rates of tabs such as Resources and Library Services.
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.