UI Design Course Project

As part of York University's UI Design course, I redesigned the UX/UI of the Toronto Public Library's (TPL) hold management system. This project addressed usability issues identified in a previous UX theory course. Leveraging my experience in archival and information system design, I aimed to improve the system's intuitiveness, empowering users to manage their holds more effectively. Testing participants were delighted with the design and continue to express their wish for its implementation at the library.

Design Preview

Card Design (5th iteration)

Design of item card from the library's hold management page including the book cover and hold status tracker.

Compared to TPL's current design, this redesigned item card clearly displays the item's status and key details, enabling users to manage their holds more easily and efficiently armed with improved contextual information.

Project Challenges

Before delving into the design process, it's crucial to understand the challenges I encountered.

These obstacles shaped my approach and informed my solutions throughout the key stages of planning and testing.

By contextualizing these challenges upfront, you'll gain a deeper appreciation for the strategic decisions and innovative solutions detailed in "The Design Process" below.

1. Personal Bias

I learned that one of the key challenges designers face is the tendency to design for themselves rather than the end-users. By choosing to redesign a system I use regularly, I was forced to go beyond my own perspective, ask the right questions, seek out the opinions of other users, a create and validate a design for those users.

2. Clarifying Terminology

Discovered through the heuristic evaluation, a significant portion of the hold terminology required clarification and elaboration. The task of grasping each term, understanding its associated function, and then translating it into user-friendly language proved to be quite challenging.

3. Visual Hierarchy

As a novice UX designer with limited visual design background, I faced challenges with visual hierarchy and consistency. Prioritizing elements to effectively guide users' attention across the page proved difficult. Additionally, maintaining visual consistency in elements such as typography, which also directs readers and highlights important areas, was a significant hurdle.

The Design Process

1. Planning

To prepare for the first class, a group sketching workshop, I developed a design goal that synthesized insights from an earlier heuristic evaluation (usability analysis), and identified opportunities, and stakeholder input.

While heuristic analyses alone aren't sufficient to support a comprehensive UX project, they provided a valuable starting point for this UI redesign.

I chose Toronto Public Library to leverage my archival expertise and apply my UX skills to a familiar system, laying the groundwork for future in-depth research.

Design Goal

Considering the problem areas, opportunities, and stakeholders detailed in the tabs below, I aimed:

To create a design that empowers users with the information and capabilities they need to effectively manage their holds, fostering a sense of control and efficiency throughout the process.

This goal emphasizes providing users with the right information at the right time, presented in an intuitive and accessible manner.

This empowers them to confidently navigate and take action, ultimately leading to a streamlined and satisfactory experience in managing their holds.

Heuristic Evaluation Findings

The hold information is not centralized or intuitive which requires recall that could frustrate users trying to managing their holds.
There is no in-context information to help users make informed decisions when placing and managing their holds which could fill users with uncertainty.
There are no emergency exits for placing a hold or most hold editing options which could lead to user frustration and error.

Challenge

Initially, I focused on the challenge of calculating hold times, but later recognized this as a personal bias.

I then broadened my perspective to consider how the identified issues could impact a wider range of user experiences and system functionalities.

To understand the value of this work, and to operate within a one week deadline, I quickly researched and vetted via AI the needs of library users and Toronto Public Library:

Users

Patrons who place physical items on hold
Motivated by access and convenience.
Characteristics: inquisitive and impatient.
Uses the library frequently.
Intermediate users who already know how to place holds.

Business

Toronto Public Library
Mission: to provide equitable access to services which meet the changing needs of Torontonians.
Vision: to inspire Toronto and it's communities to make Torontonians more resilient, more knowledgable, more connected, and more successful.

Considering the usability issues and the need to cast a wider scope, I crafted these statements to explore potential design opportunities:

How might we instill confidence in users that they have all the necessary information to manage their holds effectively?
How might we enlighten and guide users to manage their holds efficiently?
How might we give users more control over their hold management tasks so they can manage their holds more confidently?

2. Workshopping

Presenting my strategy to peers, we rapidly sketched to explore various solutions.

Here is a sampling of some of my sketches:

Pencil sketch of an item page with placeholders for the item cover and other contextual information.

In-context help links on pages where users place and manage holds, to support users.

Pencil sketch of the hold management pages with a list of items and their respective hold trackers.

A new hold management screen with a progress bar for each item, similar to those in online shopping.

Pencil sketch of a sample email notification.

Detailed notification about holds and checkouts, educating users about their function and potential fines.

Concepts

At the end of the session, I distilled those three sketches into three justified concepts:

1. In-context Help

A feature that provides in-context information for users when they are placing and managing their holds. By making the information readily available to users, they can discernibly place and manage their holds.

2. Hold Tracker

A feature that allows users to visually track the status of their holds. By illustrating a hold status, users can have more agency and effectively manage their hold's dispositions.

3. Relevant Notifications

A feature that allows users to receive notifications on all pertinent aspects of their holds. By notifying users on their hold status's, users can have more agency and effectively manage their hold's dispositions.

3. Wireframing

To select the most promising concept, I created user flows and wireflows for common hold management tasks.

User flows are diagrams that map out the steps users take to complete a task, while wireflows combine these steps with basic screen layouts to show how users interact with the interface.

This approach helped me visualize necessary screens, assess feasibility within the project timeline, and identify solutions with the greatest potential impact on addressing user problems.

Mapped user tasks and associated concepts included:

Place a Hold: in-context help.
Inactivate a Hold: in-context help and hold tracker.
Respond to a Hold Notification: in-context help, tracking, and notifications.

For a walkthrough of the user flows and wireflows see tabs below.

Birds eye view of prototype development via wireframes.

Screenshot of zoomed out wireframes showing development from user flows, to wireflows, to prototype.

Place a Hold

Inactivate a Hold

Respond to a Hold Notification

4. Prototyping i

After careful consideration, I chose to focus on the "Inactivate Hold" flow, incorporating the hold tracker and in-context help concepts.

I then created the interactive prototype (pictured below) for development and user testing:

Birds eye view of wireframe of screens and interactions of users inactivating a library hold.

Concept Justification

While the notification flow addressed aspects of all three concepts, the inactivation flow best met the opportunities to:

Instill confidence in users that they have all the necessary information to manage their holds effectively.
Enlighten and guide users to manage their holds efficiently.

Although notifications can be helpful, they tend to be more reactive than proactive.

In line with the brief's objectives, I wanted to develop a feature that would give users more control over their hold management process.

5. Testing i

With a one-week deadline, I recruited five frequent TPL patrons and conducted user testing to validate two key aspects of the redesign:

Do users have all the necessary information they need to manage their library holds effectively?
Does the redesign instill confidence in users to manage their holds?

I recorded my observations in a rainbow spreadsheet (pictured) to help me visualize patterns.

Excel spreadsheet of a list of study observations colour coded per participant.

I learned:

All five participants valued the contextual information provided about holds.
Information transparency helped demystify the holds management process.
Participants experienced a cognitive dissidence between the information and the process from the informations lack of discoverability and clarity.

From these insights I created recommendations and ran an a/b test to refine the hold options terminology for clarity.

See details on my methodology, insights, recommendations, and further testing in the tabs below.

1. Hold Status Confusion

None of the participants could locate the "active" hold status on the holds management page. All participants confused disposition (e.g., ready for pick-up) with hold status due to the prominence of the tracker. Knowing their hold status is crucial for users to manage their holds effectively.

2. Holds Information TMI

For the inactivation display, most participants relied on the dialogue box information to understand what inactivation means. This information appeared only when attempting to inactivate an item, causing delays as users took time to read it.

3. Options Mixup

Most participants did not need the help page to perform tasks but struggled to understand hold options from in-context information and lacked confidence in finding additional help. When prompted, they had difficulty locating the help page and finding answers.

4. Help not needed, but still not discoverable

Most participants struggled to distinguish between inactivating and suspending holds, with one unable to complete the task due to confusion.

Study Details

45 minute moderated sessions via Zoom and Figma
Prompt: Use TPL'S hold system to suspend "The Shining" by Stephen King from February 19 to March 4, 2024.
11 questions crafted to collect feedback on how the new design meets the test objectives.
Rainbow Spreadsheet to measure how well the design worked and create specific improvements based on observations.

A/B Testing on Hold Options Terminology

To refine the hold options terminology, I used A/B testing to compare two two sets of hold options to identify an effective solution.

Below are the two versions I presented to a peer:

Version A

Sample A of the hold management screen with different menu options.

Version B

Sample B of the hold management screen with different menu options.

Findings:

Version B was perceived as more intuitive.
Fewer and clearer options preferred.
Distinction between "pause" and "timed pause" still deemed unclear.

Recommendations:

Simplify menu options.
Further clarify difference between statuses (e.g. inactive vs. suspended).
Consider alternative terms: eg. dormant/idle (for inactive), temporarily halted/paused (for suspend).
Align menu options with chosen status terminology.
Evaluate necessity of "change expiry date" option.

Next steps:

Refine terminology based on feedback and conduct further testing to ensure clarity.

From each insight, I developed recommendations aimed at addressing the identified issues.

1. Hold Status Confusion

Label and Positioning: Label the information as "status" and position it to the left of the tracker to leverage its prominence and accommodate left-to-right readers. Item-Level Status: Include the status with each individual item to prevent users from needing to explore other areas of the page. Consistent Color Coding: Use consistent colour fills to distinguish different statuses, making them easily findable. Hold Actions Menu: Include all hold actions in the hold options menu, greying out and making unelectable any actions that cannot be performed based on status and disposition.

2. Holds Information TMI

Hover Box Definitions: Add hover boxes over "inactivate hold" and other hold actions in the menu, allowing users to read brief definitions and make informed decisions before acting. Terminology Rewording: Reword hold action terminology to match user language (e.g., "inactivate" to "pause" and "suspend" to "pause for a specific time") for intuitive understanding of options.

3. Options Mixup

Separate Action Flows: Create distinct flows for inactivating and suspending under hold options to streamline the process and differentiate actions. Hover Box Definitions: Implement hover boxes in the hold options menu to provide clear definitions, enabling informed decision-making. User-Friendly Terminology: Consider rewording actions to match user language (e.g., "inactivate" to "pause", "suspend" to "pause for specific time") for intuitive understanding.

4. Help not needed, but still not discoverable

Help Link Placement: Reposition the help link near the left margin of the account holds page for better visibility to left-to-right readers. Instruction Placement: Place "how to manage holds" instructions near the top of the page and accompany them with a video for better findability and comprehension. User FAQs: Collaborate with customer service to collect real user FAQs and add them to the help page. Hold Options Matrix: Create a matrix to compare and define hold options, aiding users in making informed decisions.

6. Prototyping ii

To develop more detailed and functional prototypes, I took a break from the data and started to look at UI elements by creating a mood board for the design and then a comprehensive style guide to ensure design consistency and serve as a reference point.

Utilizing the insights, recommendations, mood board, and style guide, I then created a detailed, interactive prototype with animations as the 4th iteration.

I chose to focus on the hold management screen and all related interactions, as well as concentrating on building key hold management actions, expanding from the original wireframes.

This approach enabled me to thoroughly explore essential user interactions within the hold management system.

For details on the mood board, style guide, and prototype focus see tabs below the prototypes.

In the options menu, users can defer a hold indefinitely or set a specific deferral period.

To give users control, they can reactivate any deferred holds, the option only available for deferred holds.

Users can cancel all holds regardless of their status and can access their holds by dispositions.

Contextual dialogue boxes provide pertinent information, including the consequences of each action.

This mood board included sources inspiration, colour palette, typography, and other elements.

Mood board featuring prospective typography, colouring, and design elements.

For the style guilde it was difficult to establish consistency and hierarchical relationships of new typography elements not provided on existing site.

Developing a style guide at the project's outset would have provided clearer direction and improved overall design coherence.

Style guide featuring all the prototypes design elements.

Next Steps:

Implement style guide creation as an early-stage deliverable in future projects.
Focus on refining typography hierarchy for all levels of typography needed.
Use this experience to enhance future design processes and outcomes.

Hold management screen and all related interactions.
- Omitted the logon process, as non essential to my design goal.
- Removed the help page because participants did not require it.
Concentrated on building key hold management actions, expanding from the original wireframes:
- Defer a hold (originally inactivate)
- Defer indefinitely
- Schedule a deferral (originally suspend)
- Reactive deferral (originally make active)
- Cancellation

7. Testing ii

To vett the latest design, I conducted a round of usability testing to evaluate whether the design empower users with information to effectively manage their holds.

I crafted specific tasks to test user ability to complete them successfully. Task success depended on the clarity and accessibility of hold information.

The design proved to be successful, as all participants completed the tasks as related to the success criteria.

However, there were instances where participants took a long time to complete a task or deviated from the user intended paths.

See tabs for details on test methodology, insights, and recommendations to streamline the process for the ease of users.

Heatmap showing where participants clicked to reactivate holds. They took an average of 1 min 29.1 seconds!

I conducted testing with the same participants from the first round of testing to foster interest via co-creation.

I used online usability testing tool UseBerry to test completion of tasks informed by these success metric:

Success Metrics

Participant can find their holds by disposition.
Participant can schedule a hold deferral.
Participant can reactivate a hold.
Participant can cancel a hold.
Participant understands the available options for editing their holds in different dispositions.
Participant does not require help information to manage their holds.

Project Outcomes

In order to understand how I moved forward with the design, here are the project outcomes to situate the newest 5th iteration.

Although I didn't establish specific success metrics for the project as a whole, an oversight even if the course focus was on UI, I gauged success based on the design goal: to empower users with the information and capabilities they need to effectively manage their holds, fostering a sense of control and efficiency throughout the process.

User Empowerment

User testing revealed positive feedback:

"[The hold options] provide me with more control to be more choosy about [library] items to prioritize them. The information with hold estimations is helpful so I don't end up with a bunch of books at the same time."

- Participant 1, male aged 61-70

"The TPL system can be confusing, even for someone who uses it a lot, but this new design enabled me to set my own parameters in a way that was easy and straightforward."

- Participant 4, female aged 31-40

8. Iterating

Building on this strong foundation, I am currently developing the fifth iteration of the design.

This latest version incorporates design adjustments and instructor feedback, focusing on two key areas:

Streamlining the user interface.
Ensuring consistency with real-world UI elements.

It's important to note that this latest design still requires validation through user testing.

Design Changes

Added an "All Items" tab alongside the other disposition tabs to match user expectations.
Reduced excess white space between cards to match the UI with table functionality.
Made cards and dialog boxes more scannable by streamlining information and using hierarchy to highlight the most important details.
Spaced similar-looking buttons apart to minimize the risk of user errors.

Newest dialogue box for inactivating a hold.

Next Steps

Simplify typography by limiting number of body styles and adding caption styles.
Consider how this web page will look on mobile devices.
Consider whether if a book changes status how it will behave? will it update live?
Test this iteration.

Newest design iteration of the hold management screen.

UI Design Course Project

Design Preview

Project Challenges