Revising the page hierarchy, site navigation, and key features for a library reading app to increase system usability and user satisfaction.

My role

UX Designer and Researcher


Solo Design


Figma, Procreate, Google Suite, Zoom


4 weeks


Finding a first impression

In order to identify initial areas of concern, I conducted a heuristic evaluation of the current Libby mobile interface. This involved me interacting with the app and noting the areas that met, and didn't meet, common design principles.

Interface barriers harm usability

Throughout my evaluation, I encountered multiple issues that hindered my progress when trying to complete key tasks.
The original navigation bar for Libby.
The current navigation bar impedes learnability, using unclear iconography with no labels identifying the navigational tabs.
The original homepage for Libby.
Libby utilizes a non-strategic page hierarchy and labeling, which also makes it difficult to identify the purpose of each navigational tab. There are also unrelated pages and functions nested within each other.
The original book listing for Libby,
Action items are not intuitively organized. "Manage loan" houses multiple tasks including return early, renew a loan, reading method, reading journey, tags, share a title, and remove the book download.

Checking out the competition

In addition to my initial app analysis, I also compared Libby to two main competitors: Hoopla and Kindle. Hoopla is another library reading application, while Amazon provides both access to free and purchased reading through the Kindle app.
A feature inventory for a library reading app.
As shown, the core functions of these apps remained consistent, including offering books of various formats, search filtration, sampling of books, and general browsing. However, Libby lacked some key features offered by its competitors, including navigation labels, favoriting of books for later, personalized recommendations, and the ability to leave or read reviews.
When I noticed the absence of a favorite or save-for-later option during my feature inventory, I knew that this was a task I wanted to analyze further. I decided to compare Libby to its competitors in terms of saving or favoriting a book for later reading.
A task analysis for a library reading app.
As shown, Libby had nearly double the steps required to complete this key task due to the absence of a pre-established wishlist. Libby instead uses the term "tag," which serves a similar function but is less recognizable and expected than "lists."

What users are saying

When turning to the app store, critical reviewers longed for the intuitive functionality of the previous Overdrive app, stating that Libby is very difficult to learn and use. Reviewers lamented the loss of features like the ability to recommend a book for purchase by your library and book ratings.
User reviews for Libby.
Following these reviews, I conducted a survey of the target audience for this app, avid readers, to determine habits, wants, and needs that could impact my design. From my initial survey with 11 participants, 72% of users find books to read by recommendations, reviews, and favorite authors.

11 user interviews showed a need for features that allow

Book lists and

Personalized recommendations

Requests to add a book to the catalog

Rating and reviewing books

Organized and efficient browsing

Browsing by category and author


Envisioning the users

The research conducted painted a clear picture of user needs, wants, and the pain points of the current Libby interface. I synthesized these findings into key needs and problem statements for this redesign. User needs centered around intuitive navigation, rating and reviewing, and requesting a book for the library's inventory.

A map to success

From here, I created a revised site map for the app, outlining how my redesign would be organized based on page function and the grouping of common tasks. I drafted two key user flows, thinking about how users would go about requesting a book to add to their library’s catalog and leaving a rating on a book they just finished reading while finding their next read.
A user flow for a library reading app.
A user flow for a library reading app.


Sketching a solution

In my early sketches for this redesign, I focused my revisions on page hierarchy and the iconography of the navigation bar. I wanted to maintain the original app's branding but improve the interface's efficiency and adherence to expected design standards.
An illustration of two hands sketching out logistics.

Making the design digital

Keeping learnability in mind, I turned to Figma to digitize my initial designs. I focused on providing a broader visual overview of books and replaced "tags" with pre-established lists that typical readers track with the ability to create more personalized lists as desired. I also reorganized the navigation iconography by importance and added labeling to these navigational tabs.
Wireframes for a list function of a library reading app.
Wireframes for the search results of a library reading application.
I added key features, providing access to ratings and reviews and the ability to request titles to be added to their library’s catalog.

Time for a test run

I used my wireframes to create my first mid-fidelity prototype and completed usability testing with 5 target users. From these tests, I found that:
Usability test results for a library reading app.

4 Users
were confused by the lack of action feedback on the "add to list" function

2 users
missed the "not in library inventory" label when first viewing search results

1 user
was confused as to where account notifications were housed


Applying user feedback

With this feedback in mind, I adapted my initial designs to best meet user needs. I redesigned the add-to-list overlay to include a create new list action, save button, and confirmation overlay to ensure users understand their action is completed.
Changes to a list overlay for a library reading app.
I also added a notification button and re-prioritized the home page to ensure users are aware of where their notifications are upon app launch and certain of the purpose of the page.
Changes to the homepage for a library reading app.
I differentiated the “not in library inventory” notification from other action items.
Noticition changes for a library reading app.
I changed the interaction on the "my books" and "my lists" pages to reduce friction witnessed in testing. Instead of redirecting to three separate pages, tab sections are implemented allowing users to switch seamlessly between views.
Changes for a shelf page on a library reading app.

Designed for success

I successfully revised the mobile app experience of Libby by improving the: global navigation, page hierarchy, and organization of saved books. Additionally, I provided users with access to both necessary and desired features by including personalized recommendation options, the ability to request titles from their library, and access to a rating and review system. These improvements resulted in an increased System Usability Scale Score, taking Libby from 45 to 95.
Revised library reading app screen designs.


Time to reflect

I’m proud of how I was able to integrate the current branding, color, and typography while still making the needed improvements. The current Libby app interface was initially a bit overwhelming. Ultimately, I let the research guide me and was able to manage stress by focusing key improvements rather than adjusting every little thing. I was really confident of my redesign going into usability testing, and there were still errors! That just shows that interacting with users and user testing is so essential. I learned that I am super willing to take constructive feedback and use it to my advantage to improve the product and experience.
An illustration of a character on stairs with a pencil drawing her path upward.

Check out my other work