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 and simplify the footer 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
I identified several key pages that are only discoverable several clicks from the home page and explored options for increasing their visibility. I elevated the research databases list and librarian profiles pages as they provide essential functionality for research exploration and support. In the first version of the home page, I placed links to these pages in the footer to provide access to these core features from anywhere within LibGuides. I replicated the standard structure of competitor sites by listing these options to the right of the accordion navigation in the second version, elevating visibility of these services.
Redesigned desktop subject guides list page
Redesigned desktop guide page
I introduced breadcrumbs to each page, allowing efficient navigation back to the LibGuides home page as well as the Main Library website as nearly 50% of users access LibGuides from here. The third-party platform template features broad header for LibGuides and a smaller banner for the Main Library, supporting navigation to either website’s home page. I standardized internal navigation with a left sidebar for structural consistency with the Main Library website.
Styling and Branding
I updated the styling of the buttons, navigation menus, search features, and cards across the LibGuides website with design system components for the Main Library website for a cleaner appearance and consistency with the University of Arizona Libraries visual branding. I indicated primary actions with bold colors such as blue or red to increase visibility of call-to-action functions and styled secondary options with a toned-down gray shade to decrease cognitive overload of common buttons.
Redesigned desktop research databases page
Redesigned desktop librarian profiles page
Usability Testing
I shared the early designs with stakeholders, who preferred the card layout similar to the original design due to restrictions with our content management tool, so I stuck with the first version for ease of site maintenance. However, it was unclear if eliminating the mirrored navigation menu, header, and footer improved internal navigation while ensuring efficient external navigation with the Main Library website. Therefore, I collaborated with my colleagues on the library’s UX team to conduct A/B testing of two versions of the LibGuides design: the initial version I proposed without a top navigation and a new version maintaining the mirrored top navigation.
We proposed the following research questions to test the usability and effectiveness 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 recruited 22 passersby in the library, randomly selecting 21 students and 1 staff member. 11 participants used the desktop version and 11 used mobile, with 5 viewing Version A (no top navigation) and 6 viewing Version B (original top navigation) for each interface.
Version A without top navigation menu
Version B with original top navigation menu
We tested efficiency and usability of internal and external navigation by asking participants to complete a series of tasks, finding specific pages within LibGuides and navigating 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 same task and some tasks were left incomplete
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 in Version B relied heavily on it, resulting in more time and clicks per task to find the right information. Participants using Version A without the top navigation menu explored more of the LibGuides site and completed tasks more efficiently with less confusion.
Most participants did not navigate to the footer to locate the research databases and librarian profiles pages. Therefore, I will present these key pages higher and more prominently on the home page to increase their visibility and improve navigation to them.
Participants easily navigated to the Main Library website using the new breadcrumbs and shortened 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
Elucidates 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
High-fidelity desktop prototype video walkthrough
Next Steps
I am currently awaiting stakeholder review and approval before moving forward with the updated design. In the meantime, my colleague Arshia and I are starting to develop a CSS style guide for LibGuides following my in-progress designs.
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.