San Francisco Public Library

Introduction

Project Type

Personal project
Time

October - December 2019
Tools

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.

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.

Research

Secondary research
User interviews
Personas

Define

Initial tree test
Card sorting test
Final tree test

Design

Sitemap
Low fidelity wireframes
Style guide
High fidelity wireframes
Clickable prototype

Research

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.
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.
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.

Define

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.
Tasks:
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.
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.
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.

Insights:

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.
Results
First tree test:

9

Participants

8.41

Minutes

50%

Success

Final tree test:

13

Participants

4.50

Minutes

75%

Success

Design

Sitemap
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.
After the sitemap, I created low fidelity and high fidelity wireframes.
Low fidelity wireframes
Homepage
Style guide
Colors

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%
HEX #FFFFFF
Secondary - Black
RGB 0 0 0
CMYK 75% 68% 67% 90%
HEX #000000
Typography

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.

H1

Titles

Helvetica Bold / 40px /#0965F1 #F7B500
H2

Headings

Helvetica Bold / 30px /#000000 #FFFFFF
H3

Navigation Bar

Helvetica Regular/ 22px /#000000
H4

Subhead

Helvetica Regular/ 20px /#000000 #FFFFFF
Body

Text

Helvetica Regular/ 18px /#000000 #FFFFFF
Body

Descriptions

Helvetica Regular/ 15px /#000000
Buttons

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.

Primary
Secondary
Active
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.
Homepage
Staff picks page
Clickable prototype

Finally, I created a clickable prototype to show how the website flows and how to interact with it.

Conclusion

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.
Other projects: 
USER RESEARCH | UX STRATEGY
UX DESIGN
VISUAL DESIGN | UX DESIGN