Libby
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
teams
Solo Design
tools
Figma, Procreate, Google Suite, Zoom
Timeline
4 weeks
Discover
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 current navigation bar impedes learnability, using unclear iconography with no labels identifying the navigational tabs.
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.
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.
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.
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.
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
tracking
Personalized recommendations
Requests to add a book to the catalog
Rating and reviewing books
Organized and efficient browsing
Browsing by category and author
Define
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.
design
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.
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.
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:
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
Deliver
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.
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.
I differentiated the “not in library inventory” notification from other action items.
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.
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.
retrospective
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.
