This case study details an evaluation and redesign of VPL's Android App. We found issues regarding a lack of feedback, poor visual hierarchy, and generally an unintuitive user flow when placing a hold on a book. With our redesign, we resolved some of these usability issues while modernizing the look and feel of the app, abiding by VPL’s current branding.

Partner:
Timeline:
Context:
Roles:
Tools:

Corinna Jin
2 weeks
Academic
Researcher & UI Designer
Figma

What's VPL?

VPL is the public library system for the city of Vancouver, consisting of 22 branch locations and serves close to 7 million visitors per year. Vancouverites look to VPL for all their reading, information and lifelong learning needs. To our surprise, VPL is actually the most-visited major urban library per capita in Canada across all it's locations.

VPL's mission: A free place for everyone to discover, create, and share ideas and information.

Why Redesign VPL?

During our brainstorming, we found that we wanted something that stands by something we both value: lifelong learning. Initially we looked into online learning platforms, but realized we also wanted to tackle an in-person experience that was relevant to our immediate community.

We found that VPL has close to 7 million visitors a year, making up a large proportion of Vancouverites. Given the organization’s value for the whole city and mission, the experience of borrowing and placing holds on books should be highly accessible.  As of February 2022, the Android app has a rating of 3.5/5.0, and about 50,000 downloads.

We wanted to improve the number of users on the app, and looked to current user reviews to get a better picture of what could be improved:

"This app is terrible. It is sorely outdated."

"clunky, but serviceable. does basic functions as intended. not outstanding in any sense, but not lacking much in terms of core functionality either."

It seems very unfinished and I recommend using the website (which you will be redirected to soon enough in the app anyway)”

"Good concept, UI needs improvement, ability to manage multiple accounts would make it better"

Our Evaluation Process

To guide our usability evaluation, we took inspiration from Nielson-Norman’s 10 Usability Heuristics and looked at what could be improved when following the user flow of booking a specific book and placing it on hold.

The Task: Place a hold on "The Design of Everyday Things"

  1. Look for the physical book "The Design of Everyday Things"
  2. Find the nearest library branch that it is available at
  3. Place the book on hold for pickup at the nearest branch

A video demonstrating the task flow on the current VPL app

The Usability Offenders

As we performed a cognitive walkthrough of our task flow, we noted down any violations of the 10 usability heuristics, and ranked them based on their impact on usability, ranging from a 1 (cosmetic problem) to a 4 (usability disaster).

We found 10 violations in total, with the biggest offenders to be on these heuristics:

Heuristic 1: Visibility of System Status (3 violations)
Heuristic 4: Consistency and Standards (3 violations)
Heuristic 8: Aesthetic and Minimalist Design (3 violations)


Design Prioritization

With these usability violations identified, it was time to tackle the redesign. Before that, we wanted to first map out which violations should be prioritized based on the effort and impact it would have given our project time constraint. As a result, we first focused on the top left quadrant, before moving into the other two quadrants as time allowed.

Staying On Brand

While one of our goals was to modernize the visual feel of the app, we made sure to work under the constraints of VPL’s current branding. Looking at their current website showed a night and day difference in terms of the visual design, and we hoped to incorporate this into our mobile redesign.

A screenshot of VPL’s current desktop landing page

With this, we laid out the start of the design language we'd use to style the redesign.

A style guide for our UI elements, showing the colors and fonts used for our app redesign

Presenting the Redesign

Below is a video showcasing our redesigned task flow of placing “The Design of Everyday Things” on hold. Due to our time constraints, we were only able to develop the “happy path”, or ideal case, of this task flow. Below the video is a detailed breakdown of the changes we made for each screen to address respective issues.

1. Opening the App

Before

After

Violations

  • Upon opening the app for the first time, users are presented with a confusing orientation and logo
  • Login screen is presented later on in the user flow instead of when the app is opened for the first time

Improvements

  • Users are instead shown a login screen which smoothens the process for future actions
  • A quote is added to invoke exploration, speaking to VPL's mission

2. Exploring your home page

Before

After

Violations

  • It is not immediately obvious how to access other app functionality, such as checking current holds
  • Little information hierarchy to guide the user
  • Button text can be made more legible

Improvements

  • Added carousels to increase scannability and enhance exploration
  • Added a navigation bar to make other functions more visible
  • Renamed and added subheadings to categories to establish clearer information hierarchy
  • Moved “Globe and Mail Bestsellers” to the top to highlight this selection

3. Searching for a book

Before

After

Violations

  • No major violations, but opportunity to utilize empty whitespace to support users

Improvements

  • Added “Recent Searches” and “Explore Popular Genres” sections to help backtrack or search by genres
  • Changed “Refine” to “Filter” to be more consistent with other mobile apps
  • Changed “Refine” to “Filter” to be more consistent with other mobile apps

4. Getting book information

Before

After

Violations

  • Icons are confusing and don’t communicate actions well
  • Book description is hard to read and overwhelming
  • “Community Activity” label can be confusing

Improvements

  • Created buttons with clear labels
  • Created a collapsible option for the book description
  • Renamed “Community Activity” label into “Book Reviews”

5. Finding the nearest available location

Before

After

Violations

  • Upon tapping on their respective icons, both the map and list view of branch showed incorrect information
  • Button to find nearest location is could be made more discoverable

Improvements

  • Combined both map and list views of branch locations, showing available locations sorted by distance by default
  • Added a button to help filter locations for user flexibility

6. Placing the hold

Before

After

Violations

  • Buttons lack visual hierarchy and can be made more distinct
  • User flow is disrupted by having to log in before placing hold
  • No immediate feedback on placing a successful hold

Improvements

  • Distributed available actions in the book detail page
  • Added a modal to help place a hold at their desired branch
  • Added a confirmation modal upon successfully placing their book on hold
  • “Cancel hold” button is added to show the action and communicate that the book is currently on hold

Design Impact

With this redesign, we were able to:

1. Modernize the look and feel of the app to fit VPL’s current branding, helping their presence to be felt more in the digital space and be consistent with their desktop site, and

2. Improve the visual hierarchy to not only create a more intuitive and consistent experience throughout the app, but help their mobile app promote their mission of “A free place for everyone to discover, create, and share ideas and information.

Key Learnings

1. Practicing good communication of ideas is crucial to success. Because this wasn’t a solo project, we both learned what it’s like to work when you’re not the one solely in charge of a project. Being clear and transparent about our ideas would not only help with working with other designers, but in working with developers, project managers, and other stakeholders.

2. Experience working with existing branding guidelines. With this project, we needed to consider whether our proposed changes would conflict with both the current UI’s existing mental models, and the branding constraints placed by VPL.

3. Keep it simple and focused. Throughout this project, it was important for us to keep in mind that we were not responsible for a rebrand, but rather to examine any issues that could negatively impact the usability. We also had to keep in mind that by only focusing on one key task flow, we can put all our efforts into improving one key functionality, instead of going into other areas of the app.

Next Steps

1. Explore other user flows within the app. Examples of these can be checking on current borrowings, scanning a library card, and checking and existing fees.

2. Testing, testing, testing. Conduct usability testing and user interviews to validate the redesign concept, making sure that we are including different types of users.

3. Examine the accessibility of the app. With VPL’s focus on inclusivity, we would look to see how we may include different language options, especially to accommodate for Vancouver’s diverse cultural scene.

4. Extend the range of features to provide for the community. Consider include listings of community events to support VPL’s mission.