Out With The Old, In With The New: Revamping the Cooper Union Library Website

Type

Research Project. Optimize Current Library Website and Present UX Design Solutions

Client

Cooper Union Library

Duration

2 months

My Role

UX Design
UX Research
UX Consultant
Wireframing
Prototyping
Visual Design

Tool

Figma
Figjam
Tableau

Team

5 Designers
Chiu(me), Pujan,
Shihka, Minh, Qiaochu

Overview

Client Brief

Cooper Union is a prestigious college in New York City renowned for its focus on art, architecture, and engineering. In this project, we worked for Cooper Union Library to help evaluate the usability of their library website, which was updated with a new version of catalog search interface recently.

Our Goal

Our main goal is to explore students' understanding and expectation of the search-navigation flow on the Home and Search Results pages and deliver UX recommendations regarding the findings.

Also, the Director of Cooper Union Library, Lisa and the team members, are willing to gather insights regarding the website's intuitiveness, feedback on aesthetics, ease of use, and general thoughts from students.

Let's get back to where it starts...

Analyze current system and Learn how other Library Websites work

In our first meeting with clients, we learned that PrimoVE is a front-end catalog commonly be used in Library systems and NYU, NewSchool and Cooper Union have a shared database system of their libraries.

We did cognitive walkthrough on Cooper Union's library website and went on peer analysis on other universities' library websites, to gain more knowledge on common user interface patterns and navigation flows, etc.

What's first?

How should we learn Cooper Union Students' thoughts of their library website?

We planned to conduct Moderated usability testing that allows for more direct interaction with participants and deeper insights into users' thoughts and behaviors.
Firstly, for the usability test, we structured the interview script and a series of 5 tasks:

Get Ready...

Let' do the usability testing!

To recruit participants, we visited Cooper Union's Library in-person, and at the same time, reached out nearly 85 Cooper Union's students online, seeking students who are willing to join the moderated testing.

Evaluate the understandability of UI elements

Also, We have Gained 35 Respondents from the Icon survey

Our clients specifically mentioned that they hoped to validate the choice of icons and indicators. So, other than usability testings, we also sent out a Google Form survey to students to understand their expectation from the website’s iconography.

View All Survey responses here

After gaining all findings...

Converge everything and Analyze!

We started analyzing the data and findings gained from research by using affinity diagram and visualizing data:

View What we've found and Our UX Recommendations

Key findings #1

13/15 users found the Home page is visually busy and uncommunicative

We discovered not only which information students prioritize while entering the homepage but also common issues that mentioned by them:

15/15 users had difficulties understanding certain wordings

Users fails finishing one task which is about searching resources across other partner school (NYU &The New School) because they do not understand the option which is called "Consortium" in the search bar's dropdown.

Recommendation #1

Home page: Let's revamp it!

View the prototype here.

Make it "not grey!"
‍We decided making a good use of Cooper Union's beautiful visual identity guideline, creating a more energetic and less text-heavy visual homepage.

A Better heiriachy
Reorganized the information displayed on the homepage that fit students' preference at the same time. For instance, we moved the opening hours to the top-right of the page, which is more obvious position to users.
Design with User Needs
From the testings, we learned the needs of tracking the due dates of books students have borrowed leads to the add of this section in the redesign.

Less confusing, more understandability
We changed the word "Consortium" Libraries to "Partnership" libraries based on the feedback from students, making the search experience more intuitive to them.

Key findings #2

Research result indicates that at least 4 Icons are not intuitive or understandable to users

Usability testings and survey results bring solid finding, indicating which icons are difficult to understand to users while navigating the library website.

Recommendation #2

Search Results page: Updating design elements for an Easier Search Flow

View the page!

Choose the right icon to represent the function
One issue we found is that the pin icon in every search result maintains "selected" state by default and the function of the icon is closer to "Save" the result instead of pinning the result.

If icons do not work, use text!
We replaced the icons that represent "find sources citing this / find sources cited in this" with text "Cited by / Cites."

Key findings #3

12/15 users easily ignored UI elements

An obvious issue is that users have difficulty seeking help because the visibility of the "Ask for help" button is really low. Even users noticed it, some thought that it is a mailbox button instead of a live chat button with librarian.

Recommendation #3

"Ask a Librarian" Button: Replace and Redesign the chat box more welcoming and discoverable

View the optimization here.

Button placement matters
Replace the button from top-right to buttom-right which is a more intuitive and discoverable positions for users while looking for live buttons.

User-Centered design hits difference
By just adding an avatar of the librarian, green dot on the button and changing the wording to LIVE CHAT help emphasizing the live status of the button and create a more accessible experience.

Final - Client Presentation

Presenting our findings and recommendations

Finally, after 7 weeks, our team delivered a comprehensive presentation of our findings and final recommendations in prototype to our clients. They expressed a strong inclination towards implementing the proposed design solutions, responding with positive feedback as follows:

— “For the limited amount of time you guys had, this is incredibly impressive.”
— “You guys turned our issues into words and visuals in such a small timeframe.”
— “Surpassed our expectations!”

View our final presentation slide here. (Visual Design by me!)

What I’ve learned from an usability evaluation project

Learnings

Recruiting might be challenging!
During the project, we ran into some unexpected hurdles when trying to find people to participate in our tests. Despite our best efforts, it was harder than we thought to get participants. And even when we did get people on board, they might end up not showing up, which is one common situation we have faced. Despite the obstacles encountered, the process of overcoming these challenges provided valuable learnings from recruiting testers.

A great presentation add value on your design
I learned so so much on skills of presenting, including team work, tone, energy, content organization, volume, are all crucial to engage audience throughout the presentation, fostering a connection and keeping them actively involved.