Libby App

Usability Improvements

Goal

Identify and eliminate areas of friction.

Methods

Heuristic review, usability test, low & high fidelity wireframes

Contributions

Conducted heuristic review
Organized remote moderated usability study with 9 participants
Created low and high fidelity mockups using Figma

Overview

Libby is a fantastic source to check out books from your local library, but unique quirks make it difficult for first time users to navigate.

The Libby App update offers:

Redesigned homepage
Improved search & filter
Improved text and reading controls
New profile and checkout

1.0 Heuristic Review

Discovery

I used a mobile based heuristic review and Nielsen's severity scale to identify the main problems and formulate focus areas for the usability study.

2.0 Usability Study

Discovery Validation

Usability testing with 9 participants identified 26 usability issues. Valuable findings included improvements for first time users, better search & filter, easier reading, profile and checkout.

"Overall it's a good app, it's not super complicated, but there are some complications and little idiosyncrasies that make you wonder what you are supposed to do next." -participant 8

3.0 Low Fidelity Designs

Discovery Validation

This phase focused on the structure of the app. About 62 changes were made including search & filter, navigation, profile, page order, page function, icons, placement, and font size.

Old Design

Home Page & Navigation

I added a profile and search button to the navigation and updated the play bar to follow established conventions.

I also revised the recommended books section to include swim lanes.
‍

Search & Filter

I added tags to the filter section and made affordances for the drop down menu items. I also changed confusing language such "compatibility" to "reader type."

On the search page I aligned the text to the left instead of the center. I also added a filter option.

Reading & Controls

I added labels to the reading control icons. I also revised the listening section to act as a pull up menu.

On the reading page I added visible controls to see the pull up menu.

Profile & Checkout

I created a profile section and moved the "change download rules" to this area.

I re-named "my shelf" to "my books." Here I made the buttons to renew or return a book more visible. I revised the icons and play/read buttons.

4.0 High Fidelity Designs

Discovery Validation

High fidelity designs implemented changes that were made in the low fidelity designs. I created a style guide that includes colors, fonts, drop downs, buttons, and icons.

Home Page & Navigation

The home page now features easy access to popular links and a space for recommended books. It utilizes swim lanes to help users more easily browse through books. I have also standardized the nav bar for easy access.

Better Search & Filter

A major point of confusion came from the search & filter functions. They have been revised and streamlined.

Easier Reading & Clearer Controls

The reading layout has been improved to allow users to more easily access controls when reading on Libby.

Profile & Checkout

I added a profile page to store information about the user's account in one place. I also increased visibility for the checkout and renew loan buttons.

Limits & Challenges

Limitations

Zoom Limitations- after testing several setups I found it was easiest for participants to join thorugh zoom and share their screen. A limitation of this was that I could not see their hands or face as they were interacting with the app.
Future opportunities would include a card sort and tree test to resolve some confusing navigation.

Challenges

Adaptation for Mobile- heuristics and best practices were adapted for mobile use.

Results &
Reflections

Results

The revised Libby app has improved features that make it easier for first-time users to understand and adopt the app.
Although the updated design looks more modern, the text on the blue Libby-branded color may not be accessible. If I were to do this project again I would run the designs through color-contrast and color blind filters to test accessibility.