Brooklyn Public Library
Developing a progressive web app to cut operational costs and improve user satisfaction of the digital catalog
CLIENT
Brooklyn Public Library
TEAM
UX Designer (Me), Web Developer
DURATION
10 Months
DELIVERABLES
Desk research, Heuristic Evaluation, User Interviews, Task Flows, Wireframes, Prototypes, Competitive Analysis, Card Sorting
Overview
I collaborated closely with the Web Developer at Brooklyn Public Library (BPL) to transform the mobile digital catalog into a progressive web app. I led the design process, starting from research and problem identification, all the way through design and handoff.
Additionally, I took on the role of Product Lead, where I led prioritization workshops, devised sprint plans, and oversaw backlog management.
Context
BPL is a beloved institution with 59 branches serving a vast and diverse community. Their responsive website (managed and developed by BPL) and mobile app (managed and developed by a third-party vendor) provide users with the ability to access and manage library resources from anywhere.
Impact
Pioneered a proof-of-concept that garnered leadership buy-in for the BPL team, propelling the project forward.
Leveraged the digital catalog experience to gather valuable insights from patrons and librarians, enabling us to better understand their priorities and address their concerns.
PROBLEM
BPL's current digital catalog experience is fragmented across two separate platforms: a responsive website and a mobile app
While users appreciate the convenience of the mobile app, it lacks the features they find valuable on the website. Conversely, although users enjoy the features of the website, it's not as accessible on the go. This forces them to choose between the two platforms or switch between them constantly, creating friction and frustration.
Mobile App
1
2
3
Search results screen on the mobile app
1
Users cannot narrow down their search results unless they click into ‘Advanced Search’
2
Users must click into item detail page to place a hold
3
No labels on icons make them harder to identify
4
5
6
Item detail page
4
A lot of information in a small viewport
5
‘Request Item’ is a CTA but shares same treatment as ‘Item Details’ which is a static header
6
Overall, UI feels cluttered and outdated. Does not incorporate BPL’s updated primary brand colors.
7
Screen shots of app reviews from the Apple store
7
App does not have booklist feature, which is something many users value
Mobile Responsive Website
2
1
3
Search results on mobile responsive site
1
Search bar and filters take up most of viewport
2
In user interviews, participants were unsure what these filters meant
3
Users uncertain what icons mean. Place a hold, in particular, is not obvious to users.
4
Recording of catalog filters
4
Filter dropdown: Long scroll and lots of content to shift through
5
Recording: adding a book to a booktlist
5
Add to booklist: minor feedback loop caused friction and low confidence during usability tests
Goals
Improved user satisfaction
Users would have a more consistent and enjoyable experience across all devices and platforms.
Increased engagement
A more user-friendly digital experience would encourage users to engage more actively with the library's resources and services.
Reduced operational costs
Consolidating the mobile app into a single platform would yield efficiency and cost savings by eliminating the need for separate systems.
Focusing on access patterns, we chose leisure patrons (mobile-first) as primary users and BPL librarians (desktop-dominant, occasional mobile) as secondary
Leisure Patrons
Goals:
Browse the catalog, exploring different genres or popular titles
Use more surface level features, like borrowing items and mobile checkout
Needs:
Curated booklists
An easy way to browse, search & filter, and place holds while on the go
E-readers and audiobook options
Personalized recommendations
Considerations:
Design for mobile-first
Prioritize popular features
Optimize for small screens and quick interactions
BPL Librarians
Goals:
Help patrons find materials and educate them on how to use resources
Needs:
Advanced search capabilities
Ability to create booklists
Detailed information about resources
Seamless integration with a Library Management System (LMS)
Considerations:
Allow desktop functionality on mobile
Provide access to full resource data
Offer options for bulk actions and customization
RESEARCH
Through extensive research, I gained valuable insights into the challenges and needs of library users
My research included:
In-depth conversations and usability tests with 10 leisure patrons, staff members, and people who haven't used the library yet. This allowed me to gather firsthand information about their experiences and pain points.
Analysis of insights from key stakeholders. This provided valuable perspective on the library's goals and priorities.
Review of previous UX research conducted by BPL. This helped me identify existing knowledge and build upon past findings.
A comprehensive audit of the website and mobile app. This revealed usability issues and opportunities for improvement.
Photo of in-person usability test of mobile app (left) and screenshot of research plan (right)
Challenges with filtering, confidence completing tasks and concerns with the user interface were the top takeaways from research
Filtering and Searching:
Challenges: Users struggled to narrow down search results and were unaware of alternative browsing options.
Opportunities: Enhance filtering options, provide clear instructions on browsing without keywords, and emphasize awareness of these features.
Task Completion Confidence:
Challenges: Users lacked confidence in placing holds and adding books to booklists, often making errors due to unclear instructions or confusing user flow.
Opportunities: Improve clarity of instructions for key tasks, streamline user flow by minimizing unnecessary steps, and provide visual cues for placing holds and adding to booklists.
User Interface:
Challenges: Users found the website and mobile app cluttered and visually confusing, with inconsistent design elements and placement of links.
Opportunities: Implement a cleaner design, ensure consistency in color, style, and layout, and improve information hierarchy.
STRATEGY
Figuring out the next step
The research revealed a wealth of UX opportunities, but with limited resources, we needed to prioritize. I facilitated a workshop with BPL's web developer, where we identified critical issues with the highest impact and feasibility. These areas became my primary focus for the duration of my contract. As BPL developed designs, I provided continuous feedback and collaboration to ensure quality throughout the process.
DESIGN PRINCIPLES
Ensuring solutions embody the values that matter most to users and the Library
By listening to stakeholders and users, I was able to unearthed core concerns that became the foundation for our design principles.
Content first design:
Design should support and enhance content, not compete with it. We will embrace a minimalist design approach that prioritizes content clarity and ease of navigation.
Make me feel included:
Ensure accessibility and inclusivity across all aspects of the catalog. Users should be able to easily understand how to interact with the catalog and its various functions.
DESIGN OPPORTUNITY #1: BOOKLISTS
How might we reduce user anxiety and uncertainty about adding items to booklists?
Changed the primary action in the overlay from "Create new list" to "Done" to match user mental models and provide a more intuitive experience
Added a toast/snackbar that confirms the action to increase confidence that an item has been added successfully
Utilized the full screen to give patrons more space to see booklists
Evolved icon-only actions in search results cards into CTA buttons with accompanying icons. This provides additional context and cues for understanding, making it easier for users to identify and take action
Before
After
DESIGN OPPORTUNITY #2: FILTER
How might we enhance the filtering experience?
Filtering through content is one of the bigger user pain points that we determined is high effort-high-impact, with two core issues to address:
How might we visually reinforce the dynamic nature of filters, making it clear that their behavior and options are dependent on the currently selected tab?
How might we enhance the search narrowing experience to minimize user overwhelm caused by excessive scrolling and information overload?
❌ Option 1: Partial screen overlay.
We needed even more space to see what’s available. Not enough real estate to add categories.
❌ Option 2: Accordion embedded within the page.
Usability testing showed that scrolling between filters and search results was an issue.
👑 Option 3: Full-screen overlay
Allowed for more explanation of each tab (category) while saving space.
DESIGN OPPORTUNITY #3: My Account
How might we minimize user confusion and facilitate effortless navigation?
My Account - Home
❌ Option 1: Button like tabs combined with a hub and spoke model within the page. Didn’t feel very intuitive.
❌ Option 2: List form. Not all high-level categories were visible without the user scrolling. Format didn’t feel engaging or reflective of the BPL brand.
👑 Option 3: Improved tabs with engaging metadata (e.g. number of checkouts). Familiar file-folder tabs mirrors traditional web menus, feels more intuitive.
My Account - Holds
❌ Option 1: Top portion takes up too much real estate. In usability testing, participants misunderstood Filter buttons.
❌ Option 2: Top portion still takes up a lot of real estate, number of physical holds vs digital holds is not the most important information.
👑 Option 3: Simplified, condensed top portion and de-emphasized physical vs digital holds. Since filter & sort options are limited, these options were pulled out for easier access.