Libby Redesign
I rekindled my love for reading during the 2020 COVID-19 shutdown. Unable to check out books from the library, I discovered Libby and enjoy the easy to use ebook and and audiobook interface. However, I found myself clicking the wrong icons prior to reaching the screen most important to me: the shelf, where my checked out books were. I wondered, how could I take an app that I enjoy using and make it better?
​
Role: Researcher, UX/UI Designer
​
Timeline: February 2023-May 2023
Design process
Problem
Discover
Define
Design
Deliver
Test
Problem
Libby is an app designed for book enthusiasts. It's a convenient way to access library resources and enjoy reading and listening on the go. The current iteration of the Libby app presents challenges arising from poor navigation, resulting in heightened human errors and a cluttered design. As a user myself, this prompted a redesign.
​
Objective: To increase time spent borrowing and reading books while reducing frustration and mistakes made in the process.
​
Discover
First, in order to guide and validate the need for a redesign, I gathered qualitative data from existing apple store reviews to explore challenges users currently face. Next, I ran a competitive analysis to look at the existing market to review strengths and weaknesses from other ebook/audiobook products, and a heuristic evaluation of the current product to explore existing pain points.
​
Competitive Analysis
Heuristic Evaluation
Define
After the discovery phase, I identified a user persona, Polly, to represent individuals who utilize Libby to explore titles and read books they check out. Through journey mapping, this user persona helped me define the needs and preferences of Libby's target audience.
By empathizing with and defining the user, I explored different pain points and opportunities, and ultimately identified 4 key problem areas and 4 key opportunities to address in my redesign.
​
Problem areas
-
Navigation structure- without labels or recognition icons, there is confusion and inefficiency for users trying to find the books that they are reading
-
Functionality of features-features and pages such as the homepage, timeline, and filter system clutter the app
-
Wait times-users are frustrated by the waiting period for checking out books
-
User interface-alignment, buttons, and use of color negatively impact overall design quality​
​
Opportunities​
-
Update the architecture framework, label navigation icons and clean up UX by reducing number of icons
-
Redesign a filter system and reading journeys that are familiar for users
-
Give opportunity to add libraries and toggle between searching and checking out books from multiple libraries
-
Improve overall UI
How might we...
How might we redesign the Libby app so that it prioritizes intuitive navigation, minimizes human errors, and updates the overall architecture and information hierarchy for a more user friendly experience.
​
Guiding principles: Efficient, simple, flexible (tolerance for error)
Design
Low Fidelity Wireframes
Visual Identity
Libby has an strong existing brand identity, so I chose to use the same fonts, colors, and icon design for the style guide. Additionally, I improved the UI concerns that were found during my heuristic evaluation to create a more visually appealing product.
Testing
I considered subtle design changes that would make an impactful difference to Libby's usability. I introduced a new bottom navigation bar, changed how users interacted with their saved libraries, and redesigned the notification center. I tested these changes with the two usability tests.
​
Initial iterations to identify new pain points​
My first usability test was conducted with a high-fidelity wireframe, testing with 3 patients who use the current Libby app.
Summary of findings
What works:​
-
Navigation with labels is clear and easy to use
-
Participants like opening to the Shelf page over the original home page (notifications and settings)
-
Participants enjoyed the ability to view their Shelf differently
-
Participants thought the drop down library toggle was straightforward
-
Participants were pleasantly surprised with the reading journey visual and reading goal feature
​
Areas for improvement:
-
Notification center is difficult to minimize and does not save old notifications
-
Library toggle with the search bar takes a lot of room on the screen and has an opportunity to be further simplified
Second round of iterations to validate redesign
For my second iteration, I created a new page for the notification center, which also acts as a timeline of books checked out, and simplified the Library toggle. The second iteration was tested with the same three participants from test 1, with the addition of two new participants who fit the demographic of users to validate changes made.
​
​​
Summary of findings
What works:​
-
Participants found the update to the notification center more informative and familiar, they appreciated the timeline worked into the notification center
-
Participants found the hamburger filter menu familiar
-
Participants found the drop down arrow adequate to change libraries. They liked the ability to switch libraries in the settings
Areas for improvement: ​
-
Improve UI or moments of joy with the filter page
-
Consider onboarding pages with instructions to switch libraries
​
Summary of design considerations
1
Navigation
To address the greatest pain point discovered during qualitative surveys, I simplified the lower navigation in four key ways. (1) I labeled and rearranged the icons, (2) combined the search function with the library page, (3) divided the home page into the personalized shelf and more settings, and (4) turned the timeline into a journey page to incorporate more motivational features.
Original
Redesign
2
Filter System
Libby's current filter system is less intuitive to users because it has a hamburger button and additional filter buttons on the search and home page. To reduce clutter and increase clarity, I simplified the design by removing the additional filter buttons and redesigning filter page.
3
Notification center
With a user that prioritizes reading over discovery, the Shelf page replaced the Homepage. With this change, the notification center was moved to the Shelf as well. From the first round of testing, users found the notification center to be useful, but distracting even with ability to minimize the notifications. With this feedback, I created a new page for the notification center and combined it with the original timeline feature. User testing showed a preference and faster understanding for this design modification.​
4
Library card toggle
To address was long wait times for books, I simplified the process to place multiple holds with more than one library card. The original toggle for the library card was on the search bar page and not the library page, so by combining the two pages, toggling libraries became more accessible. From the first round of testing, users found the drop down toggle easy to find and use in comparison to the previous cluttered bottom sheet, however, they felt that it could be further simplified. With this feedback, I reduced the toggle button to right of the library title. This choice was validated in the second round testing through of A/B testing.​
Original
Redesign
Original
Iteration 1
Iteration 2
Original
Iteration 1
Iteration 2
Deliver
Results
Redesigning Libby was a fun project where I took a well loved product and made it more user friendly. With this redesign, users won’t get lost while trying to access their books, and it unlocks an efficient way for users to interact with its features. During this project, I learned how both framework and minor design choices contribute to user error, and how to successfully fix them. While success of the design choices were confirmed during testing, app reviews and quantitative tests could be conducted to further measure success.
