New York Public Library
Simplifying Access to the New York Public Library on Mobile
Notice: This case study is still under construction. In the meantime, feel free to interact with the demo below.
What is the New York Public Library?
The New York Public Library is the second largest library system in the United States. They have a mobile application that lets users browse and borrow from their vast collection of media, view and register for events, and access a selection of their e-resources.
My Role
This is Personal Project so all visuals and screens are a result of me, Figma Make, and Codex.
Challenge
The New York Public Library mobile app offers a wide range of features, but lacks clear prioritization of core user workflows. The experience feels more like a collection of features than a cohesive product, making it difficult for users to quickly accomplish common tasks.
As a frequent user, I often found myself navigating multiple screens to complete simple actions, or defaulting to the website instead. This highlighted an opportunity to create a more intuitive, workflow-driven experience that not only supports key user needs, like borrowing and managing media, but also encourages deeper exploration of what the library offers.
Approach
This project was an exploratory redesign focused on improving usability and workflow clarity. Rather than conducting formal research, I grounded decisions in a close evaluation of the existing app and my own experience as a user, identifying friction points and opportunities for simplification.
I began by mapping a simplified information architecture and defining a core set of workflows. From there, I designed an initial homepage and outlined a lightweight product requirements document to clarify scope and direction.
The redesign centers on media borrowing as the primary workflow, with improvements to renewal, discovery, and saving items for later. I also introduced functionality that was available on the web, but not currently available in the app, such as the ability to save media for future access. I decided to leave potentially impactful functionality out that would not be possible with the library's current data structure, such as directly linking to books in the catalog from their blog posts.
After generating initial concepts in Figma, I refined the designs through multiple iterations and developed a coded prototype to validate interactions and feasibility, using Codex to help manage complexity and accelerate development.
A quick rundown of the process in Codex's own words
At a high level, we built out the main app structure page by page:
• added a real Home screen with
Checkouts, Holds, and Saved
• created an Account page, Scan page, Events page, Blog/article flow, and E-Resources page
• reworked Catalog so the default state is NYPL Blog content, while search results live behind the search interaction
• kept the bottom nav, header, and overall app shell consistent across screens
We also spent a lot of time tightening the component system so the demo feels intentional rather than stitched together:
• standardized book rows across Home, Holds, Saved, and Catalog
• refined chevrons, button sizing, spacing, and typography
• introduced a reusable modal pattern for flows like
Renew Items, Leaving App, and Cancel Hold
• reused a shared detail sheet for books and events, then added light context-awareness so book actions can change by source page
A big part of the work was replacing placeholder/demo-only visuals with more realistic content:
• switched the app to real local assets for header icons, blog heroes, and the library card
• sourced actual book covers, then localized them into the repo so the demo no longer depends on Open Library at runtime
• expanded the dummy content significantly with more books, blog posts, and events
• replaced a few blog-list books so every visible recommendation could use a real downloadable cover
We also made the prototype more usable in presentation contexts:
• added mobile full-screen behavior so it doesn’t show a phone inside a phone on real devices
• added Framer-friendly embed modes, including optional framed and unframed embeds
• deployed it through GitHub + Netlify
• added dark mode with a settings toggle and persistent theme state
So the overall construction was really:
1. build breadth across the main app pages
2. unify the design language and shared interactions
3. replace fake/temporary content with more credible assets and covers
4. make the prototype portable for case studies, embeds, and live sharing
