A Redesign of the San Francisco Public Library’s Navigation Structure

Our Goal

Our goal is to understand how we can help users have a better online experience navigating the San Francisco Public Library’s website, while being mindful of the library’s mission.

Methodology

We used several different techniques to evaluate the libraries strengths and pain points.

• Business Model Canvas.
• Competitive Matrix and Feature Analysis
• Abby’s Heuristics Method
• Tree Testing and Card Sorting

Hypothesis

Library users need the San Francisco Public Library to have a usable website to locate information for their educational and entertainment wants and needs.

Problem Statement

How might we improve the San Francisco Public Library’s website navigation so the users can better explore and discover information of their interest?

RESEARCH PHASE >>>

Business Model Canvas

We used the Business Model Canvas to get a deeper look into the current status of our clients business goals, resources.

Competitive Matrix

Overview

To better understand the SFPL’s position in the competitive media and educational landscape, we plotted the competitors and comparators based on their direct or indirect relationships with the library and whether they’re an emerging or legacy company.

Feature Analysis

Overview

Feature analysis help us identify features and best practices amongst websites. They also help us find areas where we can innovate and differentiate the redesign of the website.

Competitive Feature Analysis

Takeaways

All competitors have a search bar, a user account page, and virtual library. These are found in the Navigation, which enables users to find them easily. Through noticing consistencies such as these, we are able to confirm which current features are important and which ones may be under scrutiny to be restructured.

Comparative Feature Analysis

Takeaways

Content reviews are featured across the board, and according to our persona, award winning and top rated books are important and a quick way to show high reviews is something to keep in mind during our redesign

Site Map (Existing Website)

Tree Testing (Existing Website)

Overview

Tree testing helps use determine how users are currently navigating through the website. We wanted to understand the logical sequence of the navigation, as well as make sense of the labeling involved in that process.

Methodology

Participants were given 3 scenario task that required them to click through a simplified version collapsable version of the existing navigation to complete each task. If participants competed the task correctly, without viewing any non related pages, it’d be considered a direct success. If participants do view non related pages but ultimately complete the task correctly, it’d be deemed a indirect success.

Takeaways

Participants weren’t able to easily complete task due to the current language used in the navigation. Many of the titles do not clearly represent the content that exist on the page, leaving participants to guess the meaning of items.

Card Sorting Overview

We wanted to evaluate the user’s understanding of the existing information architecture. Participants are asked to categorize “cards” given to them. This method gives us insight into how users intuitively organize items and whether or not items are named appropriately.

Closed Card Sorting (Existing Website)

Methodology

Participants are provided with both primary and secondary navigation choices to group together. Participants were to place secondary navigation cards under the primary navigation category they deem appropriate.

Takeaway

Here we see the percentage in which participants placed the correct cards inside their corresponding categories based on the existing navigation structure.

Open Card Sorting (Existing Website)

Methodology

Participants were provided all the secondary navigation items and were tasked with creating their own labeling for the primary navigation categories, as well as then sorting cards into those new categories.

Takeaways

Participants tended to group cards together that have similar functionality. They also grouped cards together with similar wording despite content similarity.

Heuristic Evaluation (Existing Website)

Overview

We used the Abby’s Method for heuristic evaluation to evaluate the library’s website. There are 10 areas in which we evaluated for best practices of design.

Methodology

Each area was ranked on a scale of 1(major problem) to 4(meets best practice). We then averaged all the results and could then clear see where the website need that most work: Clarity, Communicativeness, and Usability.

DESIGN PHASE >>>

Site Map (Proposed)

We conducted a 2nd round of testing, to determine if our proposed changes improved the websites functionality. Again, we used Tree Testing and Closed Carting Sorting to evaluate performance.

Tree Testing (Proposed Changes)

Takeaways

• Task 1: There was a 49% decrease in Success, 60% decrease in Directness and a 10.8 second increase in time on task. This is more tan likely due to the change in the task assignment. By making the task more personalized “that interest you,” we added to the confusion, invertantly.
• Task 2: There was a 66% increase in Success, 20% decrease in Directness and a 1.72 second decrease in time on task. We improved the users likelihood of find the correct destination and shortened their time to do it but users are still getting lost navigating.
• Task 3: There was a 47% increase in Success, 16% increase in Directness and a 1.83 second decrease in time on task. We improved the users likelihood fo find the correct destination, shortened their time getting there.

Closed Card Sorting (Proposed Changes)

Takeaways

We learned that with our proposed navigation structure, we improved users ability to correctly identify where certain information may be located. The is particularly highlighted in the Calendar, Resources and Help categories. We failed in improving the intuitiveness of the Books & Media and eLibrary, which is the primary function of library.

Recommendations

1. Use language that communicates to more than just those who frequent the library. Users also understand actionable phrasing, rather than a generic label.
2. Organizing page content, and condensing when necessary, will help users pinpoint exactly what they are looking for. Too much information can cause confusion.
3. Grouping elements that appear similar and /or have similar functionally. Keeping organization logical will build user familarity.

High Fidelity Prototype

Screen capture of the proposed navigation change.

Click this statement for link to the functional prototype.