Libby
Timeline 4 weeks
Team Claire Peckham
Roles UI Designer, UX Researcher, Visual Designer
Tools Figma
Intro
The main purpose of the Libby app is to allow library users to access the wealth of content public libraries have to offer digitally. 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 visual design that seems targeted at a much younger audience.
Our goal in this redesign project is to identify where Libby went wrong, and, implementing the principals of inclusive design, create an app that allows library users to listen, read, discover and enjoy with ease.
The Problem
Solution
Creating a fluid experience that was intuitive resulted in cutting out several screens from the original Libby app. On top of that, we changed the colors to be WCAG and A11Y accessible to users. We focused on creating a similar reading experience to other popular e-readers, following Jakob’s Law. After doing user testing, we adjusted our app accordingly.
Research & Synthesis
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. We picked out some reviews that really stood out to us that we could focus on.
Focus Points
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.
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.
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.
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.
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.
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
Mapping it Out
In order to guide our design system, we created a map to help us out. Libby’s original design was overloaded with pages that didn’t serve any solid function. Our redesign aims to smooth the friction users are currently having trying to find and read books.
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. These colors are A11Y and WCAG friendly.
User 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.
A-Ha!
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. We thought this would be simpler.
However, it was just confusing to the user. 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.
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
Claire and I decided to redesign Libby at a very odd time in our lives. We had just graduated design school in a time when the design world was suffering severe layoffs. Job hunting was not turning out to be the user experience I thought it would be, so when Claire reached out, I was more than happy to take a stab at Libby with her.
In fact, you should really check out her case study here.