Case studies

Information Architecture Redesign
Information Architecture Redesign

San Francisco Public Library

San Francisco Public Library

From 68% → 96% task success, validated across two rounds of user testing.
From 68% → 96% task success, validated across two rounds of user testing.
From 68% → 96% task success, validated across two rounds of user testing.

Focus:

Focus:

Information Architecture, UX Research

Role:

Role:

UX Designer

Date:

Date:

April 2026

OVERVIEW

OVERVIEW

SFPL's website, the only front door many residents have to ten branches, buried its most-needed resources three or more levels deep behind inconsistent navigation. This case study covers the research, redesign, and validation that fixed it. Completed for Berkeley's UX certification, not a commissioned SFPL engagement, with design translation carried out independently. Scope runs from research through validated wireframes.

PROBLEM

PROBLEM

Buried Three or More Levels Deep

A site users couldn't navigate
A site users couldn't navigate

SFPL is a city department with ten branches. For many residents, its website is the only front door they'll ever use. But the existing site had multiple navigation patterns, inconsistent labeling, and duplicated content across sections. Some of the most-needed resources were buried three or more levels deep, effectively invisible unless you already knew where to look. The goal was straightforward: audit the site, identify where it falls short, and propose something better.

SFPL is a city department with ten branches. For many residents, its website is the only front door they'll ever use. But the existing site had multiple navigation patterns, inconsistent labeling, and duplicated content across sections. Some of the most-needed resources were buried three or more levels deep, effectively invisible unless you already knew where to look. The goal was straightforward: audit the site, identify where it falls short, and propose something better.

Same site, three navigation systems — "Support & Services" disappears into an "Educators & Parents" mega-menu on one version, then resurfaces as "Volunteer & Job Opportunities" on another.

CONTEXT

CONTEXT

Carlos and Sarah

Two personas with nearly nothing in common

Carlos, a recent immigrant from Colombia navigating the U.S. job market, needs ESL resources, career help, and a library card, but faces language and familiarity barriers. Sarah, a tech program manager who just relocated with her toddler, wants community and activities, with little patience for anything that isn't fast and easy to find. Their needs have almost nothing in common. Given SFPL's dual mandate as both a government-funded and community-supported institution, that's exactly what made the problem worth solving well.

RESEARCH

RESEARCH

Task Audit

Task Audit

10 business-critical tasks, real gaps surfaced
10 business-critical tasks, real gaps surfaced

24 tasks that people commonly come to the site to accomplish were mapped across six categories, with ten flagged as business-critical. Auditing the full set against the existing site surfaced real gaps: one task had no corresponding page at all, and several high-priority tasks (homework help, language learning) were buried three or more levels deep.

24 tasks that people commonly come to the site to accomplish were mapped across six categories, with ten flagged as business-critical. Auditing the full set against the existing site surfaced real gaps: one task had no corresponding page at all, and several high-priority tasks (homework help, language learning) were buried three or more levels deep.

Tree Test

Tree Test

68% success, below threshold
68% success, below threshold

To validate those gaps with real users, I ran a tree test with 8 participants across the same ten business-critical tasks. The overall success rate came in at 68%, just under the acceptable 70% threshold. The specific failures below became the clear targets for the redesign.

To validate those gaps with real users, I ran a tree test with 8 participants across the same ten business-critical tasks. The overall success rate came in at 68%, just under the acceptable 70% threshold. The specific failures below became the clear targets for the redesign.

DECISION

DECISION

Open Card Sort

Open Card Sort

A clear, consistent mental model
A clear, consistent mental model

To understand how people naturally think about library content, an open card sort ran with eight participants across 30 tasks. The result was a clear, consistent mental model: Books & Media and Help & Services had strong consensus, while Events & Programs naturally expanded to include things like ESL and book clubs, a direct signal for where those underperforming tasks needed to live.

To understand how people naturally think about library content, an open card sort ran with eight participants across 30 tasks. The result was a clear, consistent mental model: Books & Media and Help & Services had strong consensus, while Events & Programs naturally expanded to include things like ESL and book clubs, a direct signal for where those underperforming tasks needed to live.

Seven-Section Structure

Seven-Section Structure

Grounded in what users said
Grounded in what users said

The card sort produced a seven-section structure grounded in what participants actually said, not in how the library internally labels things. Every label was then evaluated against five criteria (well-known, easy, real, brief, representative), and several, including "e-Learning," were replaced with clearer alternatives.


The card sort produced a seven-section structure grounded in what participants actually said, not in how the library internally labels things. Every label was then evaluated against five criteria (well-known, easy, real, brief, representative), and several, including "e-Learning," were replaced with clearer alternatives.


Navigation Options Tested

Navigation Options Tested

Two-tier header wins
Two-tier header wins

One was a conventional mega-menu: familiar and highly discoverable, but with no dedicated entry point for new users. The other was a two-tier header with audience-based entry points, "Getting Started" and "For Kids," alongside a cleaner primary nav. The second option won, because it directly answered both Carlos's and Sarah's needs: Carlos gets a clear front door through Getting Started, Sarah through For Kids, and ESL, homework help, and newcomer services all get their own visible landing points.

One was a conventional mega-menu: familiar and highly discoverable, but with no dedicated entry point for new users. The other was a two-tier header with audience-based entry points, "Getting Started" and "For Kids," alongside a cleaner primary nav. The second option won, because it directly answered both Carlos's and Sarah's needs: Carlos gets a clear front door through Getting Started, Sarah through For Kids, and ESL, homework help, and newcomer services all get their own visible landing points.

VALIDATION / IMPACT

VALIDATION / IMPACT

Second Tree Test

Second Tree Test

68% to 96% success
68% to 96% success

A second tree test validated the new structure: success rate jumped from 68% to 96%. All ten tasks now passed the usability threshold, up from six of ten in the first round, including the three Research had flagged as the biggest failures: Homework Help climbed from 25% to 100%, ESL Courses from 37.5% to 100%, and Online Renewal from 37.5% to 100%.

A second tree test validated the new structure: success rate jumped from 68% to 96%. All ten tasks now passed the usability threshold, up from six of ten in the first round, including the three Research had flagged as the biggest failures: Homework Help climbed from 25% to 100%, ESL Courses from 37.5% to 100%, and Online Renewal from 37.5% to 100%.

DESIGN TRANSLATION

DESIGN TRANSLATION

Wireframes

Wireframes

The IA translated into a navigable interface
The IA translated into a navigable interface

With the IA validated, the structure moved into wireframes: the homepage and the Getting Started audience view, the first visual translation of everything the research surfaced. Both screens reflect the two-tier navigation and bring every IA decision into a single interface.

With the IA validated, the structure moved into wireframes: the homepage and the Getting Started audience view, the first visual translation of everything the research surfaced. Both screens reflect the two-tier navigation and bring every IA decision into a single interface.

Home Page

Home Page

Two-tier header keeps audience switchers visible
Two-tier header keeps audience switchers visible

On the homepage, the two-tier header separates utility tools (language, search, donate, find a branch, login) from primary navigation, keeping the audience switchers (Getting Started, For Kids, For Teens) persistent rather than buried in a menu. A location banner gives fast access to branch info, event cards carry audience tags and branch filters, and the footer reorganizes into four sections: Explore, Help, About, Support, mirroring the new IA instead of the site's old groupings.

On the homepage, the two-tier header separates utility tools (language, search, donate, find a branch, login) from primary navigation, keeping the audience switchers (Getting Started, For Kids, For Teens) persistent rather than buried in a menu. A location banner gives fast access to branch info, event cards carry audience tags and branch filters, and the footer reorganizes into four sections: Explore, Help, About, Support, mirroring the new IA instead of the site's old groupings.

Home Page key design decisions

  1. Two-tier header separates utility tools from primary navigation

  2. Audience switchers, For Teens, For Kids, Getting Started, persistent in the primary nav

  3. Language selector supports SFPL's multilingual user base

  4. Persistent location banner provides quick access to branch info

  5. Hero carousel leads with featured community content

  6. Event cards include audience tags and branch filters

  7. Footer reorganized into four sections: Explore, Help, About, Support

Getting Started View

Getting Started View

Trust signals address Carlos's barriers
Trust signals address Carlos's barriers

The Getting Started view, where the audience switchers land, uses an active nav state so users always know which view they're in. Trust signals (free, fast, available in multiple languages) address the exact barriers Carlos faces, a persistent "chat with a librarian" widget stays available on every page, and services are grouped by category rather than listed flat.

The Getting Started view, where the audience switchers land, uses an active nav state so users always know which view they're in. Trust signals (free, fast, available in multiple languages) address the exact barriers Carlos faces, a persistent "chat with a librarian" widget stays available on every page, and services are grouped by category rather than listed flat.

Getting Started key design decisions

  1. Active nav state clearly indicates the current audience view

  2. Trust signals address key barriers: free, fast, multilingual

  3. Persistent Chat with a Librarian widget available on all pages

  4. Page sections organized using a Category scheme, grouping entry-point services into a scrollable view

The Wireframes Confirm the IA Holds Up in an Actual Interface


The research translated cleanly, and audience-based entry points with plain-language labels are the most visible decisions on screen. Metadata, the fifth building block of information architecture, is only lightly represented here, and is an area to define more explicitly in future iterations.

Design systems, UX, and the judgment that connects them. Let's talk.

Connect on LinkedIn

Home

Case studies

About

© 2026 Leon Os Design

Design systems, UX, and the judgment that connects them. Let's talk.

Connect on LinkedIn

Home

Case studies

About

© 2026 Leon Os Design

Design systems, UX, and the judgment that connects them. Let's talk.

Connect on LinkedIn

Home

Case studies

About

© 2026 Leon Os Design