Libby App Redesign

Ensuring a User-Centered Redesign

Design process

Defining the Task

Task flow selection

The task flow we decided to evaluate and redesign was the process of checking out a book based on a user's preferences, as this is a core function of the app.

1. Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Problem

There was no change in state when the user tapped "Apply Preferences."

Solution

Designed visible changes in active states for all buttons.

Problem

No current use of system status colors.

Solution

Included colors for text related to system status.

2. Match Between System & the Real World

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

Problem

While some language is clear, certain words do not provide a clear understanding and can appear technical.

Solution

Switched the term “Tag” to “Favorites” to provide more clarity and context.

3. User Control & Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Problem

Users can return to the previous page they were on, however, the back button is not static, therefore forcing users to scroll up to go back.

Solution

Designed a fixed back button that's visible at all times.

4. Consistency & Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Problem

External inconsistencies included icon placement and labeling. It's typical that most apps only place an emphasis on the middle icon when it is a primary action and in this case, it is not. It's also standard to title uncommon icons for easier recognition.

Solution

Created labels for icons and rearranged the placement of the icons to better follow industry standards.

5. Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Problem

No confirmation to identify if a user is sure about their decision to wait and place a hold for an audiobook that has a waitlist.

Solution

Included a modal that asks users to confirm their decision when placing holds.

6. Recognition Rather Than Recall

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Problem

There is no header to tell the user which screen they're on, no indication of which screen is currently selected in the tab, and the meaning behind some of the icons is unclear since no labels are present to provide more context.

Solution

Designed page headers, highlighted selected icon, and labeled navigation icons.

7. Flexibility & Efficiency of Use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Problem

Users are unable to edit or delete existing guides. Ability to save and edit only one preferred guide.

Solution

Designed the ability to add, edit, or delete guides based on users’ frequent actions and preferences.

Problem

Help and documentation modal is repeated each time that you minimize a category. The message can appear up to 17 times on the same screen causing the user to become annoyed.

Solution

Decreased the total number of interactions needed to minimize categories.

8. Aesthetic & Minimalist Design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Problem

What may be the home screen (there's no clear distinction), does not keep content and visual design focused on the essentials that can help support the user's primary goals.

Solution

Created a home screen with a simplified layout with all of the essentials a user would like to see in order to use the app more efficiently and intuitively.

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

Problem

Error message is inaccurate because it implies that collections matching a user's preferences do exist in the catalogue, however, none are being shown.

Solution

Provided a clear error message that offers a suggested solution.

10. Help & Documentation

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

Problem

If needed, help and support is not easily accessible.

Solution

Applied a clear and easily accessible help icon on the home screen.

Design Impact

How design decisions impact Libby's users and business