SFPL Website Navigation Redesign

Branko Lalic
4 min readMay 16, 2021

Roles: Research/Design&Prototyping/Client Facing

Project Duration: Two Weeks

Project Status: Complete

Project Overview

Our team was assigned to analyze San Francisco Public Library’s website and come up with a better UX solution in terms of IA and task flows.

Scope of Work

Our starting point was Kelley, a persona that represents SFPL website users, based on previous research. We conducted our own research of SFPL’s business environment and evaluated current website task flows and pages using Mission Model Canvas, Competitive Matrix, Feature Competitive Analysis, Heuristic Evaluation, Tree Study, as well as Open and Closed Card sorting. With research results in hand we could proceed to the design stage where the expected deliverable was a high fidelity prototype. Lastly, we needed to present our results in an 8 minute long presentation.

Initial Problem Statement

How may we assist Kelley get recommended reads from one destination, and help her always be updated on upcoming events so she wouldn’t miss an event she’d want to go to?

Business Research

Goal of research

We defined the goal of our first phase of research to better understand our client, all the moving parts that define its business goals, relationship with customers, with wider society, and its competitors.

Methodology

We used Mission Model Canvas as opposed to Business Model Canvas given our client’s non-profit business model. We also used Competitive Matrix to better understand relationship that the SFPL has with its competitors from other non-profit institutions to some of the most dominating forces of the profit driven sector. After these we compared our website’s features with those of competitors’ websites and apps.

Key Takeaways

What Mission Model Canvas shed light on was the very nature of SFPL’s value to the cultural and educational uplift of San Franciscans, channels used to provide value to customers as well as gratitude by the city of San Francisco: a dedicated fund that is making sure the library is well funded and able to fulfill its mission. It’s closest competitor is NYPL, while most of other competitors are for profit companies which have different incentives and are always worth comparing to.

This is exactly what we proceeded to do — compare our website’s features with theirs. This helped us realize subpar usability of our newsletter, and lack of utility of our ADA feature.

Heuristic Evaluation

Overview

For Heuristic Evaluation method we used Abby Method which allows us to view our website from different angles and find where in needs most improvement. We established that its delightfulness was its weakest point.

Methodology

By using the Abby Method, we were able to analyze the current website’s overall features rating the website’s findability, accessibility, clarity, communication, usability, credibility, controllability, valuableness, learnability, and delightfulness.

Key Takeaways

After essentially scouring our website we found out that more than any other aspect, it’s delightfulness is where it lacks the most. We came out of Heuristic Evaluation with some recommendations such as enhancing Search functionality and making sure that all external links open in new tabs.

Information Architecture Research

Goal of Research

We focused on SFPL website’s structure in order to find flaws in user flows relevant to Kelley.

Site Map
One of Kelley’s User Flows

Methodology

We focused on the website map and Kelley’s user flows. We conducted a Open and Closed Card Sorting to find out more about mental model of our audience as it relates to website navigation as well as a Tree Test Analysis that would show us where there’s room for improvement when it comes to Kelley relevant tasks such as booking an event and finding a classic or critically acclaimed read.

Key Takeaways

Open Card Sorting helped us discover a pattern where participants had a tendency to group all the various pages which are related to recommendations. This notion was confirmed in 2nd round of Closed Card Sorting where we created a category called Recommended Reads and users positively responded to it. We have reconfigured the site map accordingly.

Recommended Site Map (changes are in blue)

Prototype

We have redesigned the San Francisco Public Library’s website navigation with our research results in mind. The new navigation features simpler design, improved Search and ADA features, a new primary navigation item Recommended Reads as well as generally more appealing look and experience.

Redesigned Navigation for the SFPL Website

Additional Recommendations

Additionally, based on our research of the rest of the website we recommended.

  • Bringing Catalog pages under global navigation.
  • Removing Classic Catalog page.
  • Simplifying user flow when it comes to subscribing to a newsletter.
  • Redesigning home page to have less colored rectangles which make the website seem a bit retro, and doesn’t help with information hierarchy.
  • Make sure that all external links open in a new tab.
  • Rename Awards page to Critically Acclaimed and
    bring it up to tertiary level of navigation.

Thank you!

--

--