How We Redesigned the Library Website

After months of development and user testing, we recently launched the updated Florida State University Libraries website. Intuitively organized, easier to navigate, and more user-friendly, our refreshed site offers an improved experience for accessing our library resources and services. Interested in how our team planned and implemented these changes? Learn more about how we designed and measured our improvements based on user feedback. We encourage you to complete this brief survey on the new site and look forward to your feedback.

Planning & Establishing Goals

Due to an upgrade requirement (Drupal 7 was nearing end-of-life, requiring an upgrade to Drupal 9), the website needed to be migrated to a new infrastructure. This upgrade provided an opportunity to “refresh” the website to improve user experience and advance our interface to best meet the needs of the FSU community. A small Website Refresh Working Group proposed the redesign as a Libraries’ strategic initiative with four phases: feedback gathering & user testing, content review, design & testing, and infrastructure upgrade and implementation.

FSU Libraries Purpose Statement: The FSU Libraries website seeks to provide low-barrier access to library collections and services in order to support the teaching, learning, and research activities of Florida State University as well as effective and meaningful engagement with library staff, services, and tools.

Based on the purpose statement above, our group developed (and iteratively revised) the following goals for the redesign:

  • Improve frontend experience / more efficient tools and workflows for internal content creation & editing
  • Improve pages for language / less jargon ( with user-focused content), accuracy, and clarity
  • Reduce barriers for tasks our users most want to accomplish
  • Simplify/streamline navigation & search systems (with mobile, touch-screen in mind)
  • Seamless integration of services, resources
  • Explore design principles to improve website consistency and aesthetic

Usability Testing

Our users’ input was an essential part of our website refresh. Our Refresh User Experience (UX) group, made up of librarians and staff from all over the library, sat down to discuss what was important to them and their departments when updating our website. Gathering ideas and tasks for users to try, we then interviewed our patrons about the many facets of the new (and old) website. Providing Amazon gift cards for incentives, the UX group tested over 25 users (a mix of undergrad, staff, and faculty), exposing many underlying problems with navigation, content, and accessibility. Users were asked to show us how they found materials, booked study rooms, located tutoring, and what they thought about the new look of the website (as just as a few examples). This information was very important for making decisions about the flow and feel of the new website. 

Some interesting takeaways from the testing include:

  • The old room booking system was clunky and difficult to use: Switching to a simpler (and accessible) system streamlined the entire process.
  • Walls of text made information on the old website harder to find: Using a standardized system of nested headings helped users find information at a glance, and made the website more accessible, as well.
  • Users may prefer FAQs to search or chat help: Patrons went to our FAQs for information on everything from noise complaints to late fines. Keeping these up-to-date and embedded in the new website were key.

User testing is all about making small, inclusive, and reasonable changes and testing again and again, so we’ll be repeating this process every semester into the foreseeable future. You can find more information about our user testing process and results here.

Gathering Feedback

We began our efforts in gathering feedback internally with a library employee survey in December 2021, assessing employee experiences and frustrations with the past website. Using this initial data, we planned internal department open forums, completed in February 2022. Not only did this assist us in identifying website issues, but the open dialogue allowed our website team to establish strong channels of communication and working relationships. The data coding (seen in this spreadsheet in the Open Forums tab) presented the following takeaways for our team to consider:

  • Limitations of the content editor workflow and process
  • Inconsistency in design
  • Inaccurate information
  • Issues with library jargon
  • Lack of service presentation

We supplemented the internal feedback with two other forms of data: analysis from our Ask Us chat and email virtual reference service transcripts, as well as entries from our website suggestion form. Based on these sources, we identified the following issues and barriers:

This data analysis, along with conducting an informal library website comparison, as well as a review of the past three years of our Web Advisory Group work, was critical in efficiently and effectively planning our website redesign to best meet the changing needs of our users.

Content Review

As we continued with the backend work to upgrade the infrastructure, including a feature review in Github, a Content Review Group embarked on the content review stage of the redesign process, in order to review our website content with the goal of assessing and improving our overall content for clarity, accuracy, voice & jargon, and design, as well as determining “ownership” of pages. We reviewed content with the website purpose and user goals in mind, developed the workflow to score each page to determine what should be moved, improved and retired. The review process involved:

  1. Developing scope of content and architecture review (based on main goals and purpose of the website)
  2. Reviewing content groups
  3. Using Google Analytics to create a list of highly trafficked, medium traffic, low traffic, or no traffic pages
  4. Auditing content (move, improve, retire) based on criteria; identify duplicate content
  5. Developing a list of pages to be retired, improved, or moved, as well as recommendations

In order to keep the scope of our review manageable, we did not asses our LibGuides, tutorials, digital collections, blog posts, social media, or associated applications. After hours of sprints, our group scored the top 500 pages of our website, which we documented on this spreadsheet. This work also directly lent itself to planning the new structure of our internal, cross-divisional website and online application work where we are reimagining our Web Advisory Group as a more engaging and proactive Website Coordinating Committee.

Reconsidering the Information Architecture & Navigation

Redesigning the website allowed the team to reconsider the information architecture of the library website. In short, information architecture (or IA) is the creation and organization of the structure and hierarchy of the website and its components in an intuitive and scalable way. Much like cleaning and organizing a house, this meant going through all of our content on the old site and putting it away into drawers (categories or patterns) in a way that makes it easy to get to later. This process is one of the key foundations of good UX, since a good IA helps users form their own mental model of the site without too much effort. As humans, we love to organize information, so when we go to a website our brain starts keeping track of where we are in relation to the home page and the other pages we’ve visited and how they’re all related. Our new architecture seems to be a success: we’ve heard from both students and librarians that the new site is “more intuitive” and “easy to navigate”. You can see our information architecture drafts and brainstorming here.

Based on the results of the content review stage, our team began to move content over, utilizing our improved information architecture and implementing a more intuitive navigation. We built the site from a true user-perspective, as opposed to organizing our content around our internal structure and workflows. This method guided users based on what users’ needed or sought from the website. While high-scoring content required a straight-forward move, some of our moderate- or low-scoring content required a full rethinking or redesign, providing the Website Refresh Working Group an opportunity to collaborate with stakeholders around the Libraries to improve pages and navigation. We developed the navigation and the menus based on our information architecture as we worked through the content move, creating a seamless user experience that represented the relationship and hierarchy of content and better connected our resources and services.

Designing the New Site

The last stages of the redesign process were the new website design and content move. The new site needed to align with the FSU Web Style Guidelines and Resources. We installed the Strata Three design into our Drupal 9 framework. Our next step was establishing goals for the design and feel of the redesign to ensure visual consistency. We established style parameters that allowed for content editor flexibility. Some of the past issues identified with our website design included inconsistent use of icons, line weight, and colors, non-stock images, and generally varying visual elements that were not cohesive throughout the site. A uniform color scheme was established and template page layouts were developed for different page types. Furthermore, we implemented a mobile first design strategy. All of our design improvements were optimized for mobile experience with responsive design features. All of these standards will be reflected in our Web Style Guide for internal content editors.

Redesign in Action

As we prepped to launch the redesigned site, we held internal open forums with library staff, announced the changes via campus-wide announcements, and encouraged feedback through a brief survey, making iterative changes as needed. New features and changes from our current website are based on user feedback, content assessment, and usage data. They include:

  • A streamlined homepage with quick access to OneSearch and popular links
  • An updated information architecture for improved navigation
  • Seamless integration of resources and services with redesigned pages for popular services
  • A ‘Getting Started’ page to guide you through our many services and information resources
  • Improved accessibility for a better website experience for all
  • Responsive design across the entire library website
  • Updated and simplified content throughout the site
  • An upgraded architecture and improved experience for content editors

We hope you are enjoying our refreshed site as the enhanced online experience to discover all of Florida State University Libraries’ collections and resources. As we move forward, we plan to continue our assessment and measure success through fewer reported website issues and improving success rate or task-completion in iterative user testing. We encourage you to complete this brief survey on the new site and look forward to your feedback!

One thought on “How We Redesigned the Library Website”

Leave a ReplyCancel reply