UCSD Library Research & Collections

As a Design and UX Assistant for the UC San Diego Library, I researched UCSD students’ pain points while using the library’s website. Throughout my 3 years in this role, my team and I worked on improving several digital experiences for the library, including this featured project.

Organization
UC San Diego Library

Year
2021-2022 (8 Months)

Team
Bella Chen, Hannah Yick, Lana Arcinas, Cindy Chang

two key screens of the research and collections page displayed on laptops

The Problem:

UCSD is a leading research university, however the Research and Collections section of the Library’s website was being underutilized by students and faculty, despite providing access to many valuable academic resources.

Our Goal: Understand why people might not be using Research and Collections and launch an improved design to increase usage rates and usability for all library patrons.

The Research:

After conducting 15+ stakeholder interviews with librarians and other library staff, we learned that the current structure of Research and Collections was confusing and out-of-date, with little highlight on the actual resources they provide.

Staff members wanted to transform the page into a usable resource for students and patrons who needed help getting started on writing research papers or finding sources to cite.

screenshot of the old library collections page, only text and no images

We interviewed 20+ students in the Library, who told us that the initial page (pictured) was too text-heavy, making the section look intimidating to use. If they didn’t already know what the page was for, they didn’t want to read so much to find out.

They were also unsure how relevant Research and Collections would be for them to use for schoolwork.

However, about two-thirds of the students we interviewed said that if they had known about the resources Research and Collections provides, they would want to use it for their work.

A/b test task with a prompt asking which navigation section you would expect to find best practices for publishing a paper

Based on our interviews, we understood we not only needed to redesign the page to be more visually engaging, but we also needed to restructure the information architecture of the section, so that users could easily locate the resources they needed.

For the latter, we conducted A/B tests with over 20 participants to figure out where each component fits into the Research and Collections section. A sample prompt we used is pictured.

menu structure 1 with a wider navigation

menu structure 2 with a nested navigation

Using the results from our A/B testing, we came up with 2 potential new menu structures for the Research & Collections information architecture which we proposed to library stakeholders.  

The Prototypes:

Based on our research, we began working on some lo to mid-fidelity prototypes of how we wanted the new pages to look like. We also created a dedicated “Find Books, Articles, Media, and More” page to help users locate the resources they needed in one centralized place.

wireframes for the about the collections page

We presented these designs to library stakeholders and staff, and used a Qualtrics survey to collect feedback. Based on their thoughts, we continued iterating on our designs until we reached a final product for launch.

sample survey questions asked to stakeholders, such as "how would you compare this prototype to the information about our collections currently available on our website?"

The Final Product:

Our final iteration of the homepage focuses largely on being user-centric and visually engaging, with many vibrant images and welcoming copy. We recognized many students were unfamiliar with the Collections, which is why we wrote a short description at the top of the page inviting the user to the Collections page, what it is, and what its mission is.

3 key screenshots from the newly redesigned about the collections page

screenshot of the collections strategy section of the new "about the collections" webpage

The Collections Strategists section highlights the people behind the Collections and uses accordions we coded ourselves using HTML and CSS. Although some survey respondents expected this to be at the bottom of the page, we wanted to spotlight the story of the Collections as much as possible and keep the experience human-centered. This is an example of how we balanced user opinions with our stakeholders' visions.

screenshot of the collections and research services section of the new "about the collections" webpage

We incorporated images into the Collections & Research Services section to create visual hierarchy. The images were chosen to relate to the work included in each of these Collections areas. This makes the section more distinct and skimmable. The yellow call-to-action buttons invite users to further explore the Collections easily.

screenshot of the new "find books, articles, media, and more" page, that includes sections like "expand your research, resource guides by format, and get help with your research

The newly-added Find Books, Articles, and More page is centered around the student experience of gathering references for a research paper or school project. The information hierarchy goes from with broad help (UC Library Search) at the top, to narrow help (Ask a Librarian) at the bottom.

The color blocking differentiates varying types of resources by separating the information visually.

The Takeaways:

This was my first project with a real-world implementation and it was so rewarding to see pages that we researched and prototyped for actually come into fruition after months of work. I learned how to host stakeholder interviews, conduct user research through surveys and A/B testing, and navigate feedback to iterate on a design and make it the best it can be! We learned HTML and CSS to implement the designs ourselves, which was also a huge learning curve, but was so fun to work on together!