• Project
  • My role
  • Methods & Tools
  • Methods & Tools
  • Team project
  • UX Designer
  • Research, Peronas, Gap Analysis, Card sorting Analysis, Site Map, Navigation design, Tree testing analysis, Wireframes. Paper, Pencil, Figma, Illustrator, Google Workspace

Project Overview

SF Public Library is dedicated to provide the community with hundreds of free resources and services. Many people who never had a chance to become a member have no idea how much libraries have to offer. With all the complexity of available information and a new business strategy in our hands SFPL website needed some re-evaluation.

As a part of 5 years strategic plan “Reinvesting and Reviewing for 21st century” SPFL has launched a redesigned website in January 2020. Now, in 2021 the library reached the last stage of the plan where they keep increasing digitalization and robustness of their resources to address the changing literacy and learning needs in the 21st century.

The Challenge

New version of the website launched one year ago was intended to create a seamless and intuitive user experience but somehow users kept failing to complete basic tasks on the website.

How might we help users easily find and use library resources and programs on sfpl.com?

Initial Research

Business needs

To make sure we have a clear understanding of business goals and realities we began by looking at library annual reports and strategy plans. We got very lucky to access SFPL's 2016-2021 Strategic Plan. In that plan, SFPL outlines their major goals for its patrons, and how the library can contribute to the community.

Targeted goals for the project:

  • Provide accessible library facilities to meet the needs of all SF.
  • Provide robust collections, services and programs that support and promote reading and address changing 21st Century Literacy.
  • Engage youth in learning, workforce and personal growth opportunities.
  • Collaborate with Friends of SPFL to secure strong fundings to support library programs

User needs

We also had found SPFL's "User needs” study conducted by the library a few years ago. It provided us with tone of useful information we could use to understand users better.

The study had 490 participants where most survey respondents, 95.3%, were members of the library, while 4.7% were not.

Understand & Ideate

Target personas and tasks

How does current version perform?

To evaluate an existing structure we conducted the first round of tree testing. Participants were asked to complete 10 tasks using existing website tree.

Key takeaways:

  • Participants had troubles completing basic library tasks - like find a book recommendation, reserve a computer, register for event.
  • No participants skipped a task - task scenarios were well written.
  • In 5 out of 10 tasks participants first clicks were distributed across multiple categories - top level navigation labels have too many overlapping categories.
  • 4 tasks showed significant drop between first click success score - second level labels are not properly categorized.
  • Zero task had direct success >75%; on average it took 55.20 sec for participants to complete a task - labels don't perform well.

What are users expectations?

To better understand users' mental models and create better content organizanization we conducted open card sorting with 10 participants. Study was unmoderated and held through Optimal Workshop.

Some of the of the results were a complete surprise for our team but it helped us to understand users' mental models much better.

Key takeaways: 

  • Participants expected eResources to be in a separate category - majority of participants grouped similar items into ‘Online Library’ category.
  • New perspective - 71% of participants grouped ‘school prep tests’, ‘online highschool diploma’, and ‘career resources’ together.
  • Label “Facilities’ has a strong information scent - 72% of participants grouped tasks like ‘reserve meeting room’, ‘reset a computer’, and ‘submit a print job’ together using the same label - Facilities.

Testing new navigation options

To explore navigation options we decided to take 2 completely different directions and test it with users to see what works better for them.

First navigation option - wide and shallow. Second navigation option - narrow and deep.

Create & Validate

The winner -

Wide and shallow navigation testing results looked much more promising comparing to current SPFL website navigation.


  • User may be able to spot the keyword they’re looking for immediately, without having to click down a level.
  • Created using users feedback from card sorting study.


  • Lots of headings can make it harder to keep them all clear and distinguishable.
  • Too many headings may make it hard to fit them all in the site’s navigation bar.

Uncovered opportunities for improvement:

Let's cross-check

It was time to verify if the created solution supports both of target personas and business needs.

Both of targeted personas pain points and needs were addressed and met. All missing opportunities identified during the gap analysis were bridged.


To establish relationships between elements and general user flows we built wireframes for key pages of the website.

Final Solution

Current version

Proposed version

What have I learned?

Stakeholders interviews important - while a 5 years strategic plan was an amazing opportunity to anchor our research and insights it wasn’t an ideal method of research. I would prefer to work more closely with SFPL leadership, librarians and other stakeholders to gather more information about their realities. 

Recruit more participants for studies -  to allow user behaviors emerge and minimize the impact of any unmotivated participants who provide poor-quality data it is important hire enough # of participants for a study. 

Testing with users early on in the process - it definitely helps to see things from users perspective. It provides an amazing opportunity to change design directions if needed before committing time and effort into something that would not work.