Overview
Libby is a public library e-Reader app that connects to your local library. Libby is powered by OverDrive, an online platform that helps libraries archive digital collections of their resources such as eBooks and audiobooks. As of now, Libby is one of few book apps that is completely free. It has become popular among teachers and students as well as the avid bookworms who use it frequently for reading and listening to audiobooks without subscriptions or fees.
►Problem Background
Upon some investigating, I have learned that a lot of these users have complained about Libby’s current user interface. It has become clear that Libby is in need of some new feature updates, as well as a complete UX redesign. I decided to take a look at the problem and see what I could do to solve these problems.
MY ROLE
UX Researcher, UI Designer, Prototyping
PROJECT DURATION
2021 - Three Weeks
TOOLS
Figma
Research
Research was conducted to discover the users’ pain points while using Libby to search for books and tag them.
My goal focused on under covering underlying commonalities between different user groups that may help me define the problem most users experience
My target research groups would be new users, average users, and avid users
Contextual Inquries
I asked the users to perform specific task and documented their actions and comments about the proccess, then arranged the results into an affinty diagram using Miro.
Commonalities
I then arranged the affinity map into “Commonalities” between the user groups to identify problems most user’s are expeirencing
UX Audit
I followed up the affinity session with a short UX audit to look deeper into the commonalities the different users groups were experiencing
Commonality One | Looking for a Book
“Preferences” and “Refine” are redundant while searching
Both filters offer similar or exact same options
It’s unclear how filters will work in juxtaposition
Commonality Two | Creating New Tags
You can only create a new tag when you find a book
You can only manage your tags separately in your shelf
You can’t create new tags, which is what users expected
Commonality Three | Navigating Libraries
Once you add a library, you can’t access the digital collection until you go get a library card
User misunderstands “I would Like a Card” to sign them up for one
You can only browse one library at a time, increasing the amount of work a user needs to perform to find a book with an appropriate wait time
Commonality Four | Confusing Iconography
The iconography does not follow any common design patterns to help users recognize its function.
There are no labels associated with the icons that could help users navigate the product easier
Research Insights
Users feel mislead when “adding a library card”. They hate having to go to the physical library to get a library card.
Users are annoyed by how the libraries work. They want to search all libraries at once rather than one at a time
The current tagging system is confusing for both new and avid Libby users. They want to be able to organize their books all in one place.
Overall users felt the current interface is confusing and difficult to navigate.
Defining
Now that I know the scope of the problem, it was time to define the problem in way that would allow me to brainstorm on potential points of intervention for optimizing the user’s experience
Problem Statement
“Libby’s current users want to browse multiple libraries at once without the hassle of going to different libraries to get a library card. They want to be able to apply for a library card while using Libby as well as organize their content all in the same space.”
Persona
To drive my iterations, I developed a persona based on the research to highlight the pains, needs, and goals of the end-users.
User Journey
I developed a user journey to identify opportunities for optimizing the user’s experience during each step of tagging books, searching, and adding new libraries to their Libby
New Suggested Task Flows
Using the opportunities I discovered from my user journey, I created three new task flows that would help as I began conceptualizing how the new screens would integrate with the existing Libby architecture
Interaction Design
Quick sketching sessions allowed me to explore how the user would interact at each step of the new suggested task flows, what the screens might looks like, and how to overall optimize the user’s experience.
Design Solution
Search Multiple Libraries at Once
My first stop was to think about how a user could use Libby to “Apply for a Library Card”. I began wireframing screens and eventually decided that simply including an option to select all libraries from the main screen was the simplest solution.
Design Solution
Search for a Library - Apply for a Library Card
Having the ability to “Apply for a Library Card” was important to all users. Determining the point of entry for this task was the most difficult. I had to think about how the user would add a library card, when would they need to add a new library, It only makes sense that you would apply for a library card only once you searched for a library
Design Solution
Redesign “Tags” into “Lists”
Tagging in Libby is confusing. Determining what I learned during my contextual inquiries, the user really wants the ability to organize their shelves by interest. So, instead of tags, I explored possible solutions under the shelf to introduce Lists. Users would be able to create, add, edit, and remove lists, in the convenience of their personal shelves.
Prototyping and Usability Testing
UI Branding
Another step before I began the high fidelity prototyping was to consider redesigning some of the current UI in Libby. It is clear that a lot of Libby’s current UI does not follow any design patterns that can be recognizable by new users to the app. I decided to redesign some smaller UI icons and modules to make them more recognizable to users
Usability Testing
Usability tests were facilitated with three participants using Figma Mirror.
Goals:
1.) Test if the user can locate how to apply for a library card using Libby.
2.) See if the new “List” in the Shelf is recognizable and easy to use
3.) Test if the user can recognize how to browse multiple libraries at once
Testing Takeaways:
100% of participants found the new “Lists” feature more recognizable and useful than the previous “Tagging” system
75% of participants could discover the “Search All Libraries” under the “Current Libraries” tab. The other participants tried using the filter to discover “Search All Libraries”.
User’s looking to “Apply for a Library Card” frequently tried to use the Account in the bottom navigation, which was an unintentional response. They did not recognize the “Current Libraries” as an entry point to complete the task.
Reiterations
Considering the unintentional response to the new “Apply for a Library Card” feature, I decided to reiterate the feature and include an optional flow that allows the user to access “Apply for a Library Card” through the account
Learnings and Takeaways
Incorporating new features into existing products requires a deep understanding of the current product. I learned that conducting thorough audits of the current product is essential to know how the features can be incorporated and how they will affect other features.
Also, knowing what users expect the product to do Is crucial. Confirming assumptions through contextual inquires and interviews gave me the insights to design new features that are intuitive to the user and function in a way that is familiar to them and recognizable to newer users.