Milton Public Library

Overview

During the last semester at iSchool, I worked with a team of six to redesign the Milton Public Library (MPL) website, including the information architecture and the most popular user journey for finding and borrowing a book online.

My Contribution

UX research, user interviews, experience mapping, information architecture, prototyping, web design

Date

Jan - Apr 2021

Milton Public Library Project with Screen

I. Context

The Milton Public Library has been an integral part of the Milton community since 1855. Since the pandemic hit in March 2020, online access has increased by 40%. However, the website does not undergo a significant redesign when MPL changed its branding.

II. Goal

The project's primary goal is to evaluate the website's usability in the area of general user experience and make recommendations for the best practices. Due to a time constraint, we focused on the MVP scope, i.e., starting at homepage, finding, and requesting a book, aiming to improve the experience of the most popular user journey on the MPL website.

III. Research

After the kick-off meeting with the MPL stakeholders, we started conducting primary research and secondary research. We collected 21 survey responses, interviewed 12 participants, conducted heuristic evaluation, reviewed Google Analytics reports and publications about the digital transformation in the wake of COVID-19, particularly regarding the GLAM (galleries, libraries, archives and museums) sector.

Key Findings

1. Over 70,000 people visit the MPL website annually to look for books, movies, events, and programs.

Milton public library project user research 1

2. The two most common complaints are that it is time-consuming to look for a new book on MPL website, and there is no return confirmation so they have to check their account consistently.

Milton public library project user research 2

3. The main issues that cause users to have an unpleasant experience are insufficient search function, cluttered navigation menu, inconsistent page layout, and unclear information, such as services and hours.

Milton public library project user research 3

IV. Define

1. Persona

Based on our research, we came up with Iris to help empathize with our users.

Iris is a frequent library goer before COVID-19. She enjoys visiting the library, attending community events, and getting books for herself and her children. However, when everything moves to online, she has a hard time navigating through the MPL website.

Milton Public Library Project Persona

2. Empathy Map

We created an empathy map to illustrate Iris's attitudes and behaviors. It helps us understand the users and prioritize their needs.

Milton Public Library Project Empathy Map

3. As-Is Experience Map

The detailed outline documents the current process of checking out a book on the MPL website. It clearly presents the major painpoints, touchpoints, and opportunities during each phase.

Milton Public Library Project As-is Experience Map

V. Ideate

Based on the needs and painpoints, we focused on 2 major problems distilled from the use research and analysis, set 2 goals for the website redesign, and started brainstorming for solutions.

1. HMW Questions

🚀 How might we help users like Iris quickly find what they are looking for?

😌 How might we make the borrowing process easy and intuitive?

2. Goals

Iris can find and borrow a book she is interested in within 5 minutes of coming onto the MPL website.

Iris can learn all the information about a book she searches and view available formats on an organized and legible page.

3. Prioritization

🔎 Search Function

Allow users to select search "Everything", "Catalogue", or "Events".

🧭 Navigation Menu

Rearrange the navigation menu, create subgroups, and add headers.

🗂 Combined Listing

Group different formats, such as books, ebooks, and audiobook, of the same item together.

📚 New Arrivals and Collections

Provide book recommendations, such as new titles, staff picks and books of the month.

VI. Design

1. Information Architecture

We conducted a card-sorting study and re-designed the information architecture to improve the clarity. Some of the significant changes on the IA schematic were:

  1. Separated sub-items under "Books, Movies& More," "Events," and "Library Services" into groups based on category and added a header, such as "By Audience"and "By Format" in the dropdown menu
  2. Incorporated buried library services information in the top navigation menu
  3. Moved the "About" section from the less visible footer to the top navigation menu

3. Lean Usability Testing

We presented the mid-fidelity prototypes to 4 participants and asked for their feedback. Each of them has tried out all 3 flows and shared their thoughts though think-aloud method and post-task interview. Below are the actionable insights.

ℹ️ Availability

Add availability status to the New Arrivals and Collection pages.

🔖 Category selection

Include popular genre categories under New Arrivals on the homepage.

💥 Visibility

Make buttons and links more visible.

HOMEPAGE

Find new books, collections and events

The redesigned homepage serves as an information center for both new and returning users. We want to make it easy for people to find what they are looking for by creating a much more organized navigation menu and revealing contents that were previously hidden throughout the page. With clear labels and distinctive design, users can quickly find the area that serve their current goals and accomplish the task with ease. 

 Milton Public Library Homepage
SEARCH RESULTS PAGE

Filter and sort results

The new filtering system is more intuitive. The most used filters are unfolded, showing popular product filter options and providing a show more button to represent the rest of the filter options. When a filter is selected, it will display itself directly above the search results, giving users the option to remove one or all at a time.

We also grouped different versions of a particular title under one listing, making it easier for users to browse through search results.

ITEM DETAIL PAGE

Read full details from reviews to recommendations

We significantly improved the legibility and readability of the book detail page by dividing the content into several sections and adding a straightforward title to each section to increase clarity.

Users can find valuable information about the item from availability, genre, and reviews to collections featuring the title, similar titles, and similar authors on one comprehensive page so that they don't need to depend on a third-party website to learn about the item.

 Milton Public Library Detail page Milton Public Library Detail page
availability AND REQUEST

Request the item within 4 clicks

The availability status of the selected format is shown on the right side of the page. Users can quickly determine if the format is available or not with the green or red labels below the format button.

When users request the book, they can enable the single-click request. It will save the users' preferred pickup location and allow users to finish their requests in a single step in the future.

BOOK RECOMMENDATIONS

Browse New Arrivals and Collections

We improved the “New Arrivals” page and added the “Collections” page to amplify book recommendations. Like the “Search Results” page, we included a simplified filter on the “New Arrivals” page to help users find what they are looking for. Users can toggle to the list view to see more information about each title.

The collections are curated lists of books surrounding one theme or audience they want to target. Created by the library staff, the collections are updated regularly so returning users can always find new titles. 

 Milton Public Library Collections and New Arrivals Page

VII. Reflections

1. You are not the user.

It is easy for designers to assume the users will behave the same way as they do. With solid user research, we learned that we are designing for a wide variety of audiences of different ages, have different mindsets, and have varying computer skills. We used persona, empathy map, journey map, needs statements, etc., to help us empathize with the users and leave our presumptions behind.

2. Your design cannot include everything

Since we only redesigned a small part of the website, we conducted lean usability testing, potentially overlooking some issues. Despite that, we knew that we could not address all the issues. We had to think critically about what problems to focus on and solve the correct problems. Given the time constraints, we worked on the problems on which most participants reflected. More usability testing is needed to validate the reiterated design.

3. Adapt to changes during the particular time

Due to COVID, we conducted our user interviews and usability testing online. Some of our participants were not familiar with novice online meeting tools. Although we have an interview script, there are unexpected problems, and each of us has to react during our individual meeting with the participants quickly. It is essential to give clear and concise instructions to guide the participants with a calm voice, making them feel safe and welcomed. Every detail matters, especially during a particular time like this, to adapt to changes and improve communication efficiency quickly.