University Library Website Refresh
Refining online structure & strengthening access to library services
Role:
UX/UI Designer
Team:
Myself, Bob Liu (UX Strategist), Aly Higgins (Content Strategist), Developers Team
Tools:
Figma, Notion, Drupal (CMS)
Timeline:
Spring - Fall 2024
As part of redesigning the whole University of Arizona Library’s website which had started two years ago, the department page and the staff directory page were the few parts left to be redesigned. I took on this responsibility while working as UX assistant in the UX team.
The goal of this project was to redesign these pages so they would be compatible to the University’s design system and consistent with the other redesigned pages of the Library’s website.
Staff Directory and Departments Page before redesign
The first step in this process was to understand what features in the current webpages are working and what needs to be added.
Some user interviews were inducted with some of the library staff to better understand our main audiences’s pain points.
“Maybe there could be a different layout so it’s easier to see the descriptions of each department”
-Library Staff
“Peers would use the staff directory page for benchmarking and finding appropriate contacts.”
-Library Staff
Based on the key takeaways from the user interviews, I started analyzing other university library websites with the main focus being on Staff Directory and Department pages.
Low fidelity designs
Based on the gathered data, I started doing different designs with the idea of reflecting the items below in the new designs:
Easy to navigate
Consistent with the University’s guidelines
Intuitive layout
Mid fidelity designs
After doing mid fidelity designs and reviewing them with the design team, some designs were put aside because of various reasons such as accessibility issues with using accordions.
High fidelity designs
After reviewing all the design ideas, the designs with the card layout were selected to be taken forward.
Working with CMS (Drupal)
After doing some initial designs we realized we don’t have enough developer capacity to help us build our designs all the way from scratch, so we had to build our designs using our CMS tool (Drupal) and the build in features with the help of our developer’s team to add some necessary features if needed and learning how to work with Drupal was definitely a challenge!
Working with other departments
After getting close to the final implementation, there was some smaller details to be figured out such as: Default picture for the staff who don’t have a headshot, the thumbnail picture for each department in the Department Page and the short description for each department.
Previous default staff picture
Department Information before and after the redesign. Shortened description with a card layout.
After doing iterations on different areas of the final design, the final result was ready to go live.
Library Departments Page
Staff Directory Page
Staff Profile Page
Individual Department Page
In the early stages of doing research about this project, I discovered a recurring problem based on the user interviews that we'd done.
Staff members getting questions about unrelated subjects to their job title and having to constantly point the person to the correct staff member.
To resolve this problem I suggested having an "Ask me about" section on the staff profile so the staff members could list their expertise.
Early explorations for the "Ask me about" section
This feature wasn't prioritized at first because of having more important technical configurations to be figured out but after the project was done, it was agreed by the head of library departments to be added as a section to our CMS tool so the staff members could add it to their profile.
Making it more accessible
After our developers team agreed to implement this feature, we suggested them to also add it to each staff member's card on the Staff directory page so it could be more accessible and easily findable using a C+F command.
After getting done with the project, it was time to test out our designs, so I tried to conduct a simple and easy A/B testing. I grabbed two pickle jars, one for the old design and one for the new design and went to the end of the year staff meeting. I had both versions of the website up on my laptop, went up to staff and asked them to go take a look and decide between the two.
The most common response I received from the staff who liked the old design better was: I am used to working with the old interface.
I also had the opportunity to present the new design and the changed that have been made to the whole Library Staff.
Working in a cross-functional environment
This was my first time working in a cross-functional environment. It was really exciting to talk to to the other teams as part of the process. Talking to the developers team, ask them for help. Talking to the marketing team to make sure everything is aligned with the University’s guidelines. I learned that although this going back and forth between teams might make the process longer but it’s what makes the end result valuable.
Not every idea makes it’s way to the end product!
When I started the design process, I had a lot of ideas that I thought might make the design better but along the way I realized lots of things are at stake when it comes to design. A lot of ideas were hard to implement because we didn’t have the whole developers team to work only on this project. The knowledge behind the designs that were done with the CMS tool (For the staff profile) had to be easily transferrable so that every staff member could do it on their own.
I learned that you have to always figure out a way around restrictions even if it means you have to learn a new tool and you always have to keep the end user in mind.