Restructuring Geisel Library’s online help space

Helping Library users effectively utilize online help channels.

Background

UC San Diego’s Geisel Library offers many resources through its virtual space, library.ucsd.edu. Users can seek help through several help channels, including: online chat, email, phone call, tutorials, and 1-on-1 consultations. Under the guidance of Geisel’s UX Librarian, Suhui Ho, I and several other members of the Fi @ UCSD team focused on identifying and resolving pain points with the site’s help channels.

My Role

UX Researcher
UX Designer

Team

Fi @ UCSD

Tools

Figma
Miro

Duration

May - Aug. 2019

 
 
 
 

The Process

 
 
Process.png
 
 
 
 

The Problem

We observed 4 primary frustrations with the original “Ask Us” page:

 
 
 

Users encounter issues with the general usability of the site before they find help.

The three main user groups, undergraduate students, graduate students, and faculty, find site instructions to be unclear and ineffective.

 
 
 

Users aren’t utilizing help channels as often as we think they do.

Based on survey data, roughly 36% of users do not utilize the provided help channels. For those within this non-user group, the help channels are often more time-consuming and inefficient than they are helpful.

 
 
 

Users prefer methods outside of traditional help channels.

When presented with a hypothetical scenario, 57% of users revealed that their first instinct when seeking help would be to utilize a search engine or ask in person, rather than utilize an online help channel.

 
 
 

Help functionality on the site is insignificant and ineffective.

Performing an expert review of the Library site revealed major issues with the site’s help functionalities, including its universal search function, call-to-actions (CTAs), key help features, and help efficiency.

 
 
 
 

Design Opportunity

 
 

Through an analysis and revamp of the Library’s virtual help space, I can empower users to better utilize Library services.

 
 
 
 

The Solution

I broke down the solution into five parts:

 

1. Create a central hub for finding help

To promote the “Ask Us'“ page as the Library’s primary online help hub, I redesigned the “Ask Us” page with centralized user flows for each help channel. Now, users can complete all requests for help on this page instead of being redirected to a different page.

 
 
Redesign.png
 
 

2. Improve the accessibility of help functions

My redesign features a condensed layout for the help channels, all visible on one page without scrolling, under “Ask a Librarian Help Channels.” The new visual hierarchy serves to more effectively display the help channels and resources available.

 
Help channels.png
 

3. Add tips/dialogue to explain different resources

New Library site users, such as undergraduate students, found it difficult to understand some of the language used in Library resources. To resolve any confusion and also prevent cognitive overload, each help channel includes a short explanation about its usage upon click (via a “pop-up” form).

 
Interactions.png
 

4. Design new search implementation

Our surveys and interviews revealed that search engines were a commonly preferred method of finding help. Because the Library’s search functionality was outdated, I refreshed the visual look of this functionality in alignment with the new designs for the help channels.

 
 
Search.png
 
 

5. Promote cohesive physical and virtual space models

So that users can expect the same quality of help in both the physical and virtual Library spaces, our solution scope included alignment of these spaces. We communicated often with Suhui Ho, the Library’s UX Librarian, and presented our research findings and final design Library faculty.

 
 
 
 
 

Complete Research Findings

Our full project findings and research are organized into this 17-page UX audit.

 
 
 
 

Competitive Analysis

For part of the research phase, I conducted market research to review best practices seen in other help hubs, such as Evernote’s and Airbnb’s. Some things we noted to focus in our solution scope were:

  • Clear call-to-actions (CTAs) for help in both sites

  • Help topics separated by user type

  • Clear search functionalities at the top of the page

 
Evernote Airbnb.png

User Flow Analyses

To better understand users’ frustrations about the inefficiency of the Library’s help channels, I mapped out the user flows for several help-related tasks on different university library sites. Two such tasks were finding an email and phone number to contact for help.

From the difference in length of user flows, it became clear that completing the same task on other library sites, such as Harvard University’s and UCI’s was easier and more efficient. After noting this, my team and I took closer note of how we might redesign the Library site help flows in a similar, more efficient way.

 
 
Flows.png
 
 
 
 
 

Final Design

final_design_placeholder.png
 
 
 
 

Takeaways

This was an exciting project for me to work on because it was directly related to my university experience! 👩‍🏫 There was very real potential for my work to have an impact on the peers and faculty around me. I thoroughly enjoyed working with the Library faculty and brainstorming with fellow peers to design solutions around site limitations and for very relatable users.

Next Steps

Some feedback I received on my prototype was that the visual design was lacking and could be greatly improved through changes related to color or typography. Thus, if provided more time, I would’ve liked to conduct usability testing with my prototype to test the effectiveness of my design’s layout and interactive elements and further iterate on the UI components.