Cat Janky

Queens Public Library

App Redesign

Overview

The Queens Public Library (QLP) app allows patrons to search the catalog, reserve books, find programming and look-up local branch hours. The original app looked dated, and basic tasks, such as searching the catalog, were cumbersome. I conducted a heuristic evaluation and researched library industry reports to identify three main redesign goals. I then interviewed users, drew wireframes, tested my prototype and created an updated design system for the final high-fidelity version.


Timeline

September 2019 - December 2019

My Role

  • User Research
  • UX Design
  • Wireframing
  • Prototyping
  • User Testing

Tools

  • User Interviews
  • Adobe XD
  • Illustrator

Process

The UX design process I followed is represented by the buttons below. Use these to jump to a specific point or scroll down to follow my process.

Heuristic Evaluation

1. Visual design interferes with functionality.

  • The overlay effect on the home screen and on the fly-out menu disrupts navigation.
  • The search results pages are uninspiring.
  • The overall look is dated and out of touch with competitor apps.
Screenshots of original QPL app: Home Screen, Flyout Menu and Search Result Example.
Screenshots of original QPL app: homepage, fly-out menu overlay and search result.

2. Catalog search is not intuitive.

  • Users must know if they want an e-book or physical book before searching the catalog as they are accessed by two separate buttons.
  • The e-book catalog search is locked behind a login screen.
  • Physical books are accessed through the eyeglass icon, which was mistaken for an icon to search the app and not the catalog.
Screenshot of original QPL app homepage. "E-books & More" searches the e-book catalog only. Physical books can only be accessed through the eyeglass icon.

3. Useful features are not included.

  • The user has no actions that can be taken for books that are currently unavailable.
  • Users do not have a way to add materials to a wishlist.
  • There is no option to change the app language setting.
An example of a book that is currently on loan. Without any available buttons or information this entry is unclear for the user. In addition, if a user would like to later check out the book, they are not alerted when it is available or a quick way to find it again.

Audience Research

To discover who uses the QPL app I consulted library industry reports, demographic data from the QPL website, Queens County census data and user reviews of the app.

Key Demographics of U.S. Public Library Users:

  • Women
  • Parents with young children
  • Age 16-69
  • Income $50-$75K
  • Bachelor's degree or higher

Top Materials for QPL Patrons:

  • Print materials are more popular than electronic materials.
  • Children’s materials account for ⅓ of items lent.

Queens County Demographic:

  • 54% or residents speak another language other than English
  • Of that population, 24% speak Spanish

App Reviews:

  • “Please change age rating to 12+ so my daughter can use the app” -Apple Store
  • “Please add a wishlist feature” -Apple Store
  • “It would be great if the app gave notification of when a book is almost due.” -Google Play

QPL Tagline

At the time of my research, QPL had recently updated their tagline to "We speak your language." The library chose this slogan to reflect the diversity of languages spoken by their patrons. As part of this campaign, library branches invested in tablets loaded with Google Translate to help staff communicate with non-English speakers. Given the library's emphasis on connecting with the whole Queens community, it seems appropriate for the QPL app to offer a way to change the language setting.

Image source: QPL website

QPL App Target Audience:

  • 1. Women age 16-69.
  • 2. Parents of young children.
  • 3. Individuals who may want or need a language setting other than English.

User Interviews

I conducted three interviews, two with QPL patrons and one with a UX designer who an avid patron of her local California library. During the interviews we walked through a scenario of requesting a book from the QPL app. My questions focused on how the interviewees felt about the process, the type of materials they would check-out, and their general feelings about QPL and public libraries. These discussions were imperative for finding pain points and understanding their expectations for the app.

Key Pain Points

The look of the app is uninspiring.

-Jennifer (QPL patron)

The home page looks bland and unappealing.

-Ann (QPL patron)

The search button is not clearly understood as the catalog search.

-Christina (UX Designer)

Additional Findings

  • 1. Jennifer uses the app to locate electronic materials but prefers to find physical books through browsing the library stacks in person.
  • 2. Ann compared her borrowing experiences at QPL to shopping at Barnes & Noble in person. At B&N, she likes the sections of curated books and the emphasis on browsing and discovery.
  • 3. Christina wanted a way to request books that were presently unavailable.

Redesign Goals

  • 1. Update the visual design to make the app more engaging to patrons.
  • 2. Simplify the catalog search and provide the user with options for browsing and discovering items.
  • 3. Add desired features such as a wishlist, holds, and language settings.

User Personas

I constructed two personas that were reflective of the QPL target audience research and user interview results.

User Flows

Task 1 | Change App Language Settings to Spanish

Camilla wishes to change the language settings of the app to Spanish. Although she is fluent in English, her preference is to look through the QPL app in Spanish.

Graphic representing user task flow 2 titled, Change App Language Settings to Spanish.

Task 2 | Locate the Highest Rated Historical Fiction E-book and Save to Wishlist

Amara is unsure which book she would like to read, but does know she is interested in a historical fiction novel. She would like the app to recommend relevant titles to her.

Graphic representing user task flow 2 titled, Locate the Highest Rated Historical Fiction E-Book and Save to Wishlist.

Wireframes & Testing

After identifying two tasks important to the app users, I moved on to the initial design and testing.

Medium-Fidelity Wireframes

Screens from Amara's user flow: homepage, categories pop-up, explore-by-categories result and book detail.

User Flow Test Results

Next I tested the medium-fidelity prototype. Participants were asked to complete Camilla and Amara's user flow tasks.

App Homepage


Test Feedback:

The difference between “Search” and “Explore” was unclear. These two buttons read like a single button. Participants were also uncertain about the functionality of the "Explore" button.

Changes:

I changed the label of "Explore" to "Filter by Category" to better align with the button function. This was placed underneath the search bar to create distinction.

"Explore" Results Page

Test Feedback:

The explore results page did not specify which categories users had selected.

Changes:

A section was added at the top to display the user's selections.

A/B Test Results

Browse-by-Category Button Preference

  • During the first iteration of medium-fidelity testing, I found that participants were uncertain of the functionality of the "Explore" button.
  • I tested if the label of "Filter by Category" or "Browse by Category" held a clearer function for users and the majority preferred “Browse by Category.”

Homepage Preference

  • I tested which size of books participants preferred and they unanimously picked the larger size.
  • During testing of the first iteration, many noted that the icons were too big and the calendar icon was unclear. I tested these two options and participants preferred the size on the screen on the right hand side.

Visual Design

Mood board

Design System


Before & After

Visual Design

  • Key sections of the app are accessible through icons at the bottom of the screen and are aligned with contemporary design patterns.
  • The layout of the redesign emphasizes the photos of the book covers.
  • The updated typefaces create a clearer visual hierarchy.

Catalog Search

  • In the redesign, users can access both digital and physical materials from the same catalog via "Search" or "Browse by Category."
  • The redesign highlights browsing and discovering previously unknown items.

New Features

  • Users can change the language setting of the app.
  • Unavailable books can be added to the user's wishlist.

High-Fidelity Prototype

I created a high-fidelity prototype with Adobe XD. The following videos show the steps users would take to complete the user flow tasks.