San Francisco Public Library
Introduction
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:
- Find how to book the Auditorium
- Find if the library is closed on Saturday
- Find the FAQs
- Find a course to review your English speaking skills
- Find which library has the air conditioning
- Find where you can read information about the annual San Francisco literary event
- Discover if library facilities are accessible for wheelchair riders
- Find how you can become a member of the library
- Find where you can recommend the name of a book that the library does not have
- Find the closest library to your home
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:
Final tree test:
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
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
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.
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.
