Shipped, Feb 2024
Designing a unified online catalog
Brooklyn Public Library (BPL) is a beloved institution with 59 branches serving a vast and diverse community. Their responsive website and mobile app provide users with the ability to access and manage library resources from anywhere.
I collaborated closely with the Web Developer at 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.
Outcomes:
Developed a proof-of-concept that garnered leadership buy-in, propelling the project forward.
Leveraged the digital catalog experience to gather valuable insights from patrons and staff, enabling us to better understand their priorities and address their needs.
Inspired other local libraries to consider improving their own catalogs to make them more user-centered and accessible for a diverse group of users.
Opportunity
A tale of fragmented experiences
BPL patrons and staff currently use both a mobile app, managed by a third-party vendor, and a library catalog managed by BPL to meet their library needs. However, the templated nature of the app limits BPL's ability to add desired features, leaving app users without the functionality they enjoy on the responsive website.
This presents an opportunity to create a progressive web app that integrates the strengths of both the existing website and the mobile app, providing users with a unified, seamless experience regardless of their device or location.
Goal
Create an equally efficient experience for both desktop and mobile users to confidently navigate
The current designs of the responsive catalog and mobile app have usability issues that make certain features difficult to use. We want to improve both experiences so that users can easily access the catalog from anywhere.
Solution Highlights
A digital experience that integrates the strengths of the existing website and mobile app, providing users with a single source for their library needs
Booklists
We've revamped the list creation process to be smoother and clearer. Now, the button in the overlay simply says "Done" to reflect what's happening, and a confirmation message lets you know your list was added.
Search & Filter
Incorporated full-screen overlay to allowed for more explanation of each tab (category) while saving space. We also made filtering more prominent to make it easier for users to find.
My Account
Design and flow upgrades to checkout, hold, and booklist screens, helping users better manage their items, see their place in line, and when an item is due.
Process
How I got here
Research & Discovery
I used various research methods to identify the challenges and needs of library users
Research methodologies included:
In-depth conversations and usability tests with 13 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.
Audit of the website and mobile app. This revealed usability issues and opportunities for improvement.
Usability challenges create a disconnect between perception and action
Though patrons generally view our library's current catalog and app favorably, interviews highlighted issues with usability. These challenges hinder the patron experience, particularly when searching, filtering, placing holds, and using booklists. This friction not only reduces user confidence but also makes accessing valuable library resources less efficient.
Staff need advanced features for their workflow, while different types of patrons have varying needs. Most patrons are casual or novice users who just want to confidently achieve their goals without much friction.
Patrons struggled with understanding how to search and filter items. They lacked confidence in placing holds, adding to booklists, and many were unaware that mobile checkout was an option.
Users found the site and mobile app cluttered, outdated and visually confusing, with inconsistent design elements and placement of links.
Define
How do we move forward?
I facilitated a prioritization workshop to keep us on task. This is a fairly ambitious project, so I really wanted to ensure we solved the most pressing issues first.
We’ll optimize the mobile experience by prioritizing the most-loved features, considering both user impact and development effort. Mobile users are a key demographic, with at least 42% of our catalog users (excluding app users) accessing it on their phones. Our goal is efficiency, and our research showed us that, aside from the issues of a fragmented experience, there were other usability concerns we need to address to create an effective combined solution.
Using principles to stay on track toward the bigger picture
We want to ensure users feel safe, comfortable and confident using our resources. Before beginning my work, I compiled design principles to guide the process, based on insights from stakeholder interviews, user feedback, and BPL’s core mission and values.
Content-first, visual design as supporting role
The design should support and enhance the content, not compete with it. We will embrace a minimalist design appearance that prioritizes content clarity and ease of use.
Empower, inform, instill trust
Ensure accessibility and inclusivity across all aspects of the catalog. Users should easily understand how to interact with the catalog and its various functions. They should feel confident navigating the platform. Libraries are some of the most trusted institutions in the country, let’s maintain this.
Design
Starting broad, narrowing in, and trying not to overthink
Throughout the project, I found it challenging drumming up solutions that were equally beneficial to both staff and patrons. I'd question if an idea was "too simple for staff" or "too complex for patrons," leading to overthinking interactions.
To overcome this, we decided prioritize the needs of our primary user group: novice and casual patrons. After all, some of BPL's core values are equity, inclusion and accessibility. We want everyone, particularly marginalized and non-English speaking communities, to feel empowered and confident using our resources.
Visual Design Updates
The library recently received a streamlined color palette and UI refresh through a design agency's rebranding efforts. With this foundation, I built these screens using the new pattern library, adding components as needed. For accessibility, I swapped the catalog's colors to match the website's AAA-compliant palette for a more consistent user experience across both platforms.
Opportunity: Action
Improving the booklist and checkout experience while incorporating feedback loops
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
Swapped icon-only actions in search results cards to CTA buttons with accompanying icons. This provides additional context and cues for understanding, making it easier for users to identify and take action
Opportunity: Search
Reducing friction when using high- and low-level category filters
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?
Opportunity: Post-Interaction
Upgrading how patrons manage their holds, checkouts and booklists
My BPL allows patrons to manage checkouts, holds, and booklists, alongside editing their profiles. However, testing revealed usability issues – a clunky design and unclear information hierarchy hindered navigation. To address this, we revamped the checkout, hold, and booklist screens, maintaining a consistent design with minor variations specific to each function.
Testing & Iterations
Test, iterate, launch / test, iterate / (repeat)
Usability testing with patrons and staff revealed a generally user-friendly site, with a few minor hiccups. After launch in February 2024, real-world usage uncovered additional areas for improvement:
Disjointed Navigation: Users encountered disorientation when switching between the app and website.
Missing Features: Simplifying the app led to the removal of some advanced features valuable for staff. We prioritized frequently requested features such as pinning filters, pagination with specific pages for referencing results, and displaying call numbers for easy copy-paste into Sierra (their library management system).
To further refine the app, we've engaged a UX Design consultant for a deeper dive and gap analysis.
Stay tuned for more detailed usability testing results!