San Francisco Public Library


Project type

Personal project

October - December 2019

Optimal Workshop (Tree testing and Card sorting)
Sketch (Low fidelity and high fidelity wireframes)
InVision (Clickable prototype)
My role

Secondary Research, User interviews, Tree testing, Card sorting, Wireframing, Prototyping.
Problem and Objective
Have you ever navigated a website that made you confused and disoriented?
The San Francisco public library website is one of them.

When my friend opened it for the first time she couldn’t find the information she was looking for, and when she tried again it took so long before discovering it.

The language was not clear, the design of each page was not coherent and part of the website was text-heavy.

The goal is to redesign a more intuitive information architecture and efficient interface to better connect with its audience.

I decided to take care of the main pain points of the website, and since the project duration was short (2 months), I focused on 2 key pages: the homepage and the Staff picks page.
Current website - Homepage

The important content, such as contact information, is hidden, there are many categories in the navigation bar, and the language used is not intuitive.

Image that shows the homepage of the current website
Current website - Staff picks page

This page is text-heavy and the information is not discoverable easily.

My approach
I approached the problem employing a thorough methodology and going through three specific phases: Research, Define, Design.


Secondary research
User interviews


Initial tree test
Card sorting test
Final tree test


Low fidelity wireframes
Style guide
High fidelity wireframes
Clickable prototype


Through secondary research and user interviews I discovered the main users’ needs. This phase completed with the definition of two personas.

Users’ needs

Users need to find relevant information easily and want to be engaged with the library community.
Laura is a retired literature professor and she would like to apply for a computer class and meet new people with the same interests.
Image that shows the first persona of this project
Emily is an international student and she would like to borrow some books for the school and participate in interesting events organized by the library.
Image that shows the second persona of this project
The personas I created reflect people’s needs that I found out through secondary research and interviews. This step helped me have a holistic vision of the main actions that users do on the website, what information they want to gain, and how similar goals they have, despite the age difference.


Initial tree test

I conducted the first Tree test online asking 9 participants to read the navigation bar of the original website and complete 10 tasks, the most common performed, according to my research.
This test helped me realize these main pain points:

Information about Classes, the San Francisco literary event One City One Book, the Library Map, and the air-conditioned centers is challenging to find.
The following pie trees show that participants were unsure where to look for the correct information and followed the wrong path before finding the right answer.
Pie treeLegend of the Pie Tree
Legend of the Pie Tree
Card sorting test

I conducted the Card sorting test both in-person and online. I gave 30 cards to 8 participants, I asked to sort them into groups and rename each category according to their preferences.

The Best Merge Method Dendogram and the Similarity Matrix show how how information was most commonly grouped by participants.
Card sorting example
The Card sorting test has produced three new categories: Events & Classes, Reserve & Borrow, and Resources.

The most relevant category is Library, which contains all the tasks related to the library, including questions to ask the staff. Most of them on the original website belong to other groups.

After the test, I analyzed my data and created an abstract structure following Well-Known, Easy, Real, Brief, and Representative criteria.
Final tree test
I conducted the second Tree test online asking 13 participants to complete the same tasks as the first test, but with the updated structure.


Library hours and Closed days have to be on the same page as well as Suggest a title and Staff picks. The results were very successful: people discovered correct information in half the time.
First tree test:







Final tree test:








The second test demonstrated that the updated structure is more intuitive and easier to follow. Based on these insights, I created a sitemap that shows the structure of my redesign.

The bar navigation now is composed by 7 different groups, and each one contains all the information related to it, the language is simple to understand at glance and users find the right content in less time than before.
Sitemap of the San Francisco Library website
After the sitemap, I created low fidelity and high fidelity wireframes.
Low fidelity wireframes
On the top, I added important calls to action, helpful for the library to gain more clients.
I decided to place the bar search at the center, along with the most common tasks, so that users can find them immediately. The layout is based on photos that guide people towards their goals, and on the footer I added some contact information, helpful to build trust.
Style guide

I combined the blue #0965F1 and the citrine #F7B500 as primary colors to transmit stability and energy respectively.
Both colors are bright to draw users’ attention
Primary - Blue
RGB 9 101 241
CMYK 82% 62% 0% 0%
HEX #0965F1
Primary - Citrine
RGB 247 181 0
CMYK 2% 31% 100% 0%
HEX #F7B500
Secondary - Red
RGB 224 32 32
CMYK 6% 99% 100% 1%
HEX #E02020
Secondary - White
RGB 255 255 255
CMYK 0% 0% 0% 0%
Secondary - Black
RGB 0 0 0
CMYK 75% 68% 67% 90%
HEX #000000

Texts are black #000000 and white #FFFFFF to create contrast with the other colors.
To have a clear information hierarchy, I created 6 different styles and weights of Helvetica, the font used throughout the website.



Helvetica Bold / 40px /#0965F1



Helvetica Bold / 30px /#000000


Navigation Bar

Helvetica Regular/ 22px /#000000


Helvetica Regular/ 20px /#000000 #FFFFFF


Helvetica Regular/ 18px /#000000 #FFFFFF


Helvetica Regular/ 15px /#000000

I designed three typologies of buttons: the primary is used for the main actions, the secondary is for functional use and it helps not to distract users from relevant information, and the active gives visible feedback to users who interact with the button.

High fidelity wireframes
The purpose of this design is to make people focus on the content of the website. For this reason, I chose a white background that optimizes legibility given to the contrast with the black simple style of the Helvetica font and the colorful images. Moreover, the bright primary colors make the website engaging and friendly.
High fidelity wireframe of the homepage
Staff picks page
High fidelity wireframe of the Staff Picks page
Clickable prototype
Finally, I created a clickable prototype to show how the website flows and how to interact with it.


Meeting goals and needs
The website redesign gives the chance to find and read clear content on more user-centered pages. The second tree test, in fact, demonstrated that users, thanks to the updated structure, can find the information they look for in half the time.

Key learnings
This project exposed me to information architecture practices for the first time. I learned how important this discipline is and how much it can affect the user experience. I learned to analyze the structure of a website and its content, conduct tree tests and card sorting tests, and apply all the feedback and data received in the final design.

Next steps
I propose to conduct usability tests and keep iterating my final design as well as designing other pages.