Redesign of library guides website
As part of the styling strategy project for the University of Arizona Libraries’ third-party websites, we updated the navigation and branding of the LibGuides website to create a cohesive user experience and improve ease of site maintenance.
I led the redesign work and hosted usability testing sessions for the project.
July 2024 - Present
Web Design, UX Research
The Problem
The original design of the LibGuides website, the University of Arizona Libraries’ hub for research databases and course guides, mirrored the Main Library website’s navigation and visual design. However, this approach in the library’s third-party websites caused issues with usability and maintainability. The complex and inconsistent navigational structure disoriented users and increased necessary labor for website editors. I targeted these concerns in the redesign project, focusing on creating a simplified and standardized navigation and branding in LibGuides to improve content visibility and streamline maintenance.
Competitive Analysis
Prior to my work on the LibGuides redesign project, a former member of the library’s UX team conducted a competitive analysis of 8 other institutions’ LibGuides platforms, focusing on their navigational structures. Most competitor websites use a simplified navigation menu with tabs specific to LibGuides content, include breadcrumbs throughout the site, and use a condensed footer or eliminate the footer altogether. The library’s UX team at the time implemented these findings into a third-party styling strategy for the external websites.
Pain Points
I prioritized the key issues identified in the third-party styling strategy when redesigning the LibGuides website.
Internal navigation: Page-level navigation patterns are inconsistent across each page, with some using a top navigation menu and others using a left sidebar. The pages lack breadcrumbs to navigate between guides and back to the home page and several guides are “orphans” as a result.
Site maintenance: The complex visual design replicated from the Main Library website causes issues with maintainability as dedicated troubleshooting for the external sites is limited. Coordinating updates to the main website’s navigation, header, and footer with the third-party websites requires additional labor.
Original LibGuides home page with mirrored header and top navigation
Original footer mirrored from Main Library website
Project Details
Collaborators
I led the redesign work for the LibGuides desktop and mobile website based on the initial research from the library’s former UX team. I later facilitated usability testing sessions for the designs with my colleague and fellow UX student assistant, Arshia Amin. Arshia and I met with administrative stakeholders to share design updates and research findings and to prepare for developing a CSS style guide for LibGuides.
Redesign Goals
Improve navigation within LibGuides
Simplify the connection between LibGuides and the Main Library site to reduce editing labor
Add branding that follows UA brand standards while being distinct from the library website
Personal Goals
Build leadership skills by leading a design project, facilitating communication with stakeholders, and coordinating usability testing
Design Decisions
Home Page
Based on the identified areas for improvement, I created two sets of mockup design options for the LibGuides home page following a basic template created by administrative stakeholders for the third-party websites.
The first set of mockups structures the guides on the home page in a card format similar to the original design. I created this refined version close to the current design to reduce cognitive overload in users who have visited LibGuides before and minimize disruptions to established site maintenance workflows. I then designed a second set inspired by many other websites examined in the competitive analysis with guide categories structured in accordions. I explored this option as a possibility for improved and more efficient navigation as the accordions provide direct access to more guides and better align with industry standards, appealing to user expectations. I initially explored and presented both design options to stakeholders to determine the best method for efficient navigation and site maintenance.
Redesigned desktop home page with original card layout
Redesigned desktop home page with accordion layout
I decided to remove the top navigation bar and replace the footer content mirrored from the Main Library website in both versions. The simplified structure targets issues with site maintenance by reducing complex cross-platform troubleshooting requirements and refocuses content back to LibGuides, encouraging efficient internal navigation. I raised the search bar from the bottom to the top of the home page to improve visibility of search functions and support faster task completion. I also added filtering options next to the search bar to view guides by type, improving discoverability of guide options and streamline navigation to specific guides.
Navigation
In the early design stage, I questioned the need for a top navigation bar and footer replicated from the Main Library website as the links in these features were irrelevant to the LibGuides content. I decided to remove the top navigation bar altogether to eliminate excess visual components and simplify the navigation options, as well as to target issues with site maintenance and complex cross-platform troubleshooting. In doing so, I identified several key pages within LibGuides that were only discoverable several clicks in and opted to include these on the home page. Links to these key pages replaced the footer content in the first version of the home page and were placed in a side menu in the second version to increase discoverability and provide navigation to relevant content.
Redesigned desktop subject guides list page
Redesigned desktop guide page
I then placed breadcrumbs on each page, allowing efficient navigation back to the LibGuides landing page as well as the Main Library home page as just under 50% of users access LibGuides from the main site. The third-party template featured a header specific to LibGuides and a smaller banner for the Main Library, allowing navigation to either landing page from here as well. I stuck with a left side menu in internal pages for consistent navigation across each page.
Styling and Branding
I updated the features across the LibGuides website with components from the updated design system for the refreshed Main Library website. These components provide a cleaner look while staying consistent with the University of Arizona Libraries visual branding. I limited excessive use of color, opting for white or gray for common features such as repeating cards/accordions or secondary buttons and signaled important options with bolder colors such as blue or red.
Redesigned desktop librarian profile page
Redesigned desktop research databases list page
Usability Testing
I shared the initial designs with stakeholders, who preferred the version with a card layout similar to the original due to restrictions with our content management tool. However, it wasn’t clear yet if eliminating the mirrored navigation menu and header and footer content was beneficial as stakeholders wanted to ensure efficient navigation between the Main Library and LibGuides sites. Therefore, we chose to conduct A/B testing of two versions of the LibGuides home page—the version I proposed without a top navigation and a version with the replicated top navigation.
We proposed the following research questions to test the usability of a top navigation bar:
How do users navigate between LibGuides and the Main Library website?
How do users navigate within LibGuides?
Which navigation pattern is more usable?
I led a series of A/B testing in the library to test each version on desktop and mobile. We spoke with 11 participants for desktop and 11 for mobile, with 5 viewing Version A (no top navigation) and 6 viewing Version B (original top navigation) for each interface. We recruited random individuals at the library, selecting 21 students and 1 staff member.
Version A without top navigation menu
Version B with original top navigation menu
We asked participants to complete a series of tasks and find specific pages within LibGuides, as well as navigate between LibGuides and the Main Library website. We found that:
45% of all desktop participants and 36% of all mobile participants were unable to locate the list of research databases
Another 27% of desktop participants and 36% of mobile participants indicated they would use the search bar to find it
Several participants commented that they “wouldn’t expect to find [research databases] in the footer”
Participants using Version A experienced an 84% success rate on mobile and 76% success rate on desktop across all 5 tasks
Participants using Version B experienced a 67% success rate on mobile and desktop across all 5 tasks
Each participant used the top navigation menu for 2 or 3 out of 5 tasks; of these, the participants averaged 1-2 more clicks than Version A participants to complete the task and some tasks were not completed
Two participants asked what “the difference is between this website and the Main Library website”
Participants using both versions and interfaces responded positively to breadcrumbs and easily navigated between LibGuides and the Main Library website using either breadcrumbs or the header
Research Analysis
Usability testing validated my original decision to remove the top navigation menu as participants with access to it relied more on it, resulting in more time and clicks per task to find the right information. Participants without the top navigation menu explored more of the LibGuides site and completed tasks more efficiently and with less confusion.
Most participants did not navigate to the footer to locate the research databases and librarian profiles pages. Therefore, these key pages will need to be presented higher and more prominently on the page to allow clearer navigation to them.
Participants easily navigated to the Main Library website using the new breadcrumbs and adjusted header. Removing the top navigation menu, original header, and footer content did not hinder this connection and created clearer distinction between LibGuides and the Main Library site.
Design Implications
I created an updated home page design that aligns with the original redesign goals and implements the findings from the usability testing. This design:
Improves internal navigation with a clear breadcrumbs system and consistent structure
Reduces editing labor, clears visual clutter, and creates distinction by eliminating duplicated features from the Main Library website
Allows for clear connection between LibGuides and the Main Library website with breadcrumbs and a distinct header
Follows University of Arizona branding by implementing components from the Main Library design system
Highlights key pages by placing them in the header, reflecting common practices of competitor institutions’ websites
Updated desktop home page design
Original desktop home page design
Next Steps
We are currently awaiting stakeholder review and approval before moving forward with the updated design.
Personal Reflection
My first full semester as a UX student assistant was largely dedicated to getting to know LibGuides as a service, brand, and reflection of the work we do at the University of Arizona Libraries and making this small piece of the puzzle not only my own, but accessible and enjoyable to every library user. While I gained valuable knowledge in leading a project through this process, I also improved my understanding of viewing a project through the user’s perspective by being more intentional about designing for the specific needs we identified rather than sticking to the things I like. This is certainly an area I see myself continuing to improve on in the future and I look forward to seeing how LibGuides evolves when presented to the public.