Libby Redesign
Redesigning how people access their library content.
The Challenge
The main purpose of the Libby app is to allow library users to access the wealth of digital content public libraries offer. However, the current app design often confuses library users more than it helps them with a combination of convoluted information architecture, an array of features few users actually find useful, and a visual design that seems targeted at a much younger audience.
Our goal in this redesign project is to identify where Libby went wrong and create an app that allows library users to listen, read, discover, and enjoy.
The Problem
A combination of convoluted information architecture and a multitude of undesired features make Libby confusing to use.
The Outcome
We redesigned Libby with a streamlined structure and only kept the necessary features.
Research
User Reviews
We compiled thirty reviews of the current Libby app to gain insight into our users’ biggest pain points. User issues fall into three main categories: navigation, searching, and accessibility settings.
Key Takeaways
There are too many pages in the navigation that either don’t serve a distinct purpose or aren’t liked/used by most users.
The search function isn’t intuitive.
Accessibility settings are limited, which excludes readers who need adjustments.
Navigation
The current navigation bar comprises Search, Library, Timeline, and Tabs. In our research, we discovered few users liked or used the Timeline and Tabs features, so we decided not to include them in our redesign.
Also, because the Search and Library pages performed very similar functions, we decided to combine them into a single homepage.
“It’s super confusing to navigate especially if you have multiple libraries. I have up and started going to individual websites to try to search for things because time after time I wasn’t getting any search results when I knew the library had it.”
Search
The Search function in the Libby app strangely searches ALL content, including materials unavailable to the user through their library. Several users commented that this was frustrating, and wished the app would do them the courtesy of excluding content the library didn’t even own.
Users also reported that they often had to “deep” search. This “deep” search included turning on several very hidden filters in order to find books that should’ve otherwise appeared in a search related to the novel.
“The search function and download functions require so many unnecessary clicks that it can make you forget what you were doing in the first place.”
Accessibility Settings for Reading
While Libby does have accessibility options, they’re fairly limited and tend to be tethered to the device’s native settings. This limits the length of time people can read on a device, and may prevent some users from reading altogether.
We decided to include a larger range of accessibility settings in our redesign.
“It was very hard to set accessibility. After all, I read on a tablet because of vision problems. Shouldn’t it be easier to include a larger range of settings?”
User Archetypes
In order to ensure we kept the needs of our users at the core of our design process, we established 2 user archetypes and identified a main Job to be Done for each.
The Casual Reader
This user reads and listens to books occasionally, but not often enough to be immediately familiar with the common UI patterns of reader apps to jump in seamlessly every time.
Job to be done: to find new books as easily as possible.
The Avid Reader
This user is always reading a couple of books at a time. For the e-books they read, they want to adjust the size, font, and layout for an easier read.
Job to be done: to read with an accessible and enjoyable interface.
Design Process
Information Architecture
Libby’s original design comprised way too many pages that didn’t perform their expected functions (Library took you to a collection of curated book lists from your library, for example). Our redesign offers a streamlined structure that ensures each page serves a distinct and needed purpose.
Design System
We decided on a text-centric visual design for Libby, since it is an app dedicated to the written word. We chose a fairly subdued color scheme with a bright pop of color to emphasize CTAs.
Usability Testing
We tested our mid-fi prototype with four lovely people. While overall their experience of the app was intuitive, a couple of features stood out as confusing.
Having action options for books as a popup was unexpected.
Users expected tapping on a book cover to take them to a page dedicated to that book.
Ah Ha Moment: How do You Interact with Books?
We Tried to Make it Simpler
Our initial idea for how users would access actions for books (i.e. placing a hold, returning, opening), was via a pop-up menu. Our intention behind this design was to cut down on the number of pages and taps users would have to perform in order to access content since that was such a recurring theme in user reviews.
...But We Made it Confusing
Although it was a good design in theory, in practice it didn’t work. Our user testers weren’t sure how to interact with our pop-up menu button, and when they did manage to open it were unsure how to proceed. They said they’d expected tapping on a book cover to take them to another page dedicated to the book, and encountering these actions outside of a page like that threw them off.
And Finally We Made it Functional
Realizing our pop-up menu idea was causing more problems than it was solving, we scrapped it for a more conventional model. Tapping book covers now sends users to pages specifically about those books as a standard, and, additionally, on the home screen we changed the “Recent Activity” section to a “Continue Reading” section. This way, users can tap on their current reads and open the e-reader directly.
Task Flows
Browsing
Browsing begins on the homepage, which includes a summary of your recent reading activity, and several curated lists based on your recent reads.
Searching for a Book
The search function contains a more concise list of filters (the original Libby included over 100!), and draws on the UI patterns of online shopping. We found during testing that our users were most familiar with these UI patterns, making their experience of our design more seamless.
Changing Accessibility Settings
In the reader view, users can always access accessibility options via a top nav. In our accessibility menu, we’ve included options to accommodate different reading preferences and accommodations. Specifically, we’ve included Comic Sans, and several colored tints to accommodate for dyslexic readers.
Reflections
My teammate Max and I did this project in the midst of an economic recession when applying for jobs felt more like a cosmic joke than a worthwhile activity. Doing this project together helped keep our sanity alive, and I think also pushed us to refine our designs to a new level of professionalism.
As Libby enthusiasts ourselves, it was a pleasure to puzzle out where the original app had faultered, and brainstorm solutions.