Homepage Redesign

3D concept of a laptop computer surrounded by several holographam screens and futuristic images

Kelvin Smith Library


Executive Summary

Client

Case Western Reservere University, Kelvin Smith Library Leadership Team:

  • Yolanda Cooper, Vice Provost and Lindseth Family University Librarian
  • Roger Zender, Associate University Librarian, Creation and Curation Services
  • Gina Midlik, Director

Opportunity

Kelvin Smith Library Leadership commissioned a refresh of their homepage based on a UX evaluation from the University Marketing and Communications Web Content Management department.

Goals

  1. Create and launch a “refreshed” homepage based on research data and client feedback.
  2. Balance client priorities with user needs.
  3. Keep end-users at the center of design decisions to ensure the site’s designs and information architecture meet users’ needs.

UX evaluation

  • Analytics review
  • Peer & User Research
  • Usability Testing

Timeline

Project Start: Feb. 2023


Launch: Dec. 2023

Tools

  • Figma
  • Optimal Workshop
  • Google Applications Suite
  • Drupal Content Management System

Deliverables

  • Data reports and presentations
  • Wireframes
  • High fidelity mockups
  • Development prototypes

Results

Usability tests showed a dramatic increase in usability metrics including:

  • Time to task completion decreased from an average of 6mins to 2.5mins.
  • Interaction with the client’s priority elements (events/news) increased by 13.7%.
  • Users reported increased satisfaction with the website including easier navigation, better tools to reach their goals, and easier access to useful information.

Process

Introduction

The client, Kelvin Smith Library (KSL) Leadership team, requested a comprehensive user experience study of the homepage for the Kelvin Smith Library website.

A UX study was conducted in 2018 leading to a redesign of the Kelvin Smith Library (KSL) website. This was done under different library leadership whose goals and priorities differ from the current client. Therefore the client has commissioned a UX evaluation and homepage “refresh”, beginning with a survey conducted in March of 2023.

Current Library leadership wishes to prioritize news and events on the homepage, while minimizing the prominence of the search bar and other core features of CWRU templates. However, it is not possible to fully meet these asks without compromising user needs.

Original Homepage Layout

Scroll to view full page

Screenshot of the original hompage layout

Step 1: Define

1.1 Background and Data

A study was conducted in 2018 by the University Marketing and Communications (UMC) and the Kelvin Smith Library project team. The study inlcuded user research in the form of on-site usability tests, virtual usability tests and an online survey.

Online Survey (2018)

The online survey ran for approximately two weeks. The objective of this survey was to gather information about the library website, how users are currently using it, and how the user experience can be improved.

In total, 53 individuals completed the survey (faculty members, undergraduate and graduate students).

The following results were obtained from the original survey:

  • The majority of respondents visited the site weekly, or more.
  • Most respondents visited the site to access commonly used research resources links such as the library catalog.
Usability Tests (2018)

Usability tests were conducted in the physical library location in February of 2018 to assess the usability of the web interface design, information flow and architecture.

A total of 10 participants were recorded as they used the current KSL website. The recordings captured their comments, navigation choices, task completion rates, overall satisfaction, questions and feedback.

Combined Recommendations from Studies (2018)

Based on the issues participants encountered during the usability testing sessions, the following changes were recommended:

  • Create a site-wide search feature (implemented in redesign)
  • Highlight the Public Event Calendar (implemented in redesign)
  • Improve the Database Search system (implemented in redesign)
  • Create comprehensive library staff profiles (implemented in redesign)
  • Revise the architecture and content placement (implemented in redesign)
  • Include library hours on the homepage (implemented in redesign)
  • Highlight the login for the "My Library Account" by moving it higher on the homepage (implemented in redesign)

1.2 Goals

Create and launch a “refreshed” homepage based on research data and client feedback by:

  1. Ensuring users can find most sought information and complete essential tasks
  2. Market library offerings including events, services, etc. (client priorities)
  3. Balance client priorities with user needs
  4. Keep end-users at the center of design decisions to ensure the site’s designs and information architecture meet users’ needs.

1.3 Scope

The Kelvin Smith Library Website homepage will undergo a redesign based on the results of User Experience Evaluation and Stakeholder Goals.

Note: This project will focus solely on the homepage. Any proposed changes will not interfere with current information architecture, database, or other core features of the site.

1.4 Research (See Step 2 Below)

User Experience Evaluation Overview:

Analytics
  • Current Heatmap (2023)
  • Site Usage (From Google Analytics and Looker Studio Reports)
User research

Survey user groups to understand:

  • Primary and secondary audiences
  • User goals when visiting the current site
  • Pain points and possible hindrances to accomplishing these goals (if any)
Peer research:

Conduct an analysis to understand how peer schools approach information architecture and design layout

  • Carnegie Mellon University Library
  • Washington University in St. Louis
  • Emory University Library
Usability testing

A/B testing of the current homepage and refreshed homepage, comparing results and weighing the client's satisfaction of final design implementation.

Increase in usability metrics such as:

  • Time to task completion
  • User satisfaction
  • Interaction with the client’s priority elements (events/news)

Step 2: Research

2.1 Current Heatmap & Site Usage (2023)

Review of current site usage via Google Analytics and heatmaps.

Heatmaps

Heatmaps collect usage behavior and visually maps all the elements users interact with. The heatmaps show that the most interacted with pieces of content on the homepage are:

  • Search box
  • Quick links to ‘Library Hours and Access’ and ‘My Account’

Site Usage Analytics (2023)
  • Search engines are the main origin of traffic
  • The majority of traffic is viewed on a desktop
2023 Top 10 Pages Visited:
Page Title URL Page Visits
Kelvin Smith Library (home) case.edu/library 59,655
Reserve a Seat or Room @ KSL case.edu/library/spaces/reserve-space 8,457
Hours https://case.edu/library/about-us/hours 7,915
Search and Find case.edu/library/research/search-collections 4,210
Fair Use: An Exception to Copyright case.edu/library/services/copyright/fair-use-exception-copyright 3,403
Borrowing Privileges for CWRUStudents, Faculty, & Staff case.edu/library/services/borrowing 2,899
Ask a Librarian case.edu/library/research/research-librarians-library-advisors 2,168
Interlibrary Loan case.edu/library/services/borrowing/interlibrary-loan 1,588
Staff case.edu/about-us/staff 1,576
2.2 User Research

A user survey in 2023 provided data from 87 participants including faculty members, undergraduate and graduate students.

The survey was conducted to:

  • Understand primary and secondary user base (faculty, student, staff. etc)
  • Determine user goals and tasks
  • Discover audience participation and possible barriers to use
  • Understand how users navigate to their goals
  • Learn about user interaction with news and events
  • Determine what changes to the home page, are needed to increase user satisfaction and goal completion
Survey Questions for Reference:
Peer Research

Peer research was conducted to compare common design patterns and features of sites with similar user bases including:


Step 3: Data Analysis

2023 Online Survey Findings
  • Search box
  • Quick links to ‘Library Hours and Access’ and ‘My Account’
Slide-deck of Findings Presented to Client
Heatmaps

  • Search box
  • Quick links to ‘Library Hours and Access’ and ‘My Account’
Site Usage Analytics (2023)
  • Search engines are the main origin of traffic
  • The majority of traffic is viewed on a desktop

Step 4: Design

4.1 Design Sketches (wireframes)

The iterative process of UX (User Experience) design is a cyclical approach aimed at continuously refining and improving a product or service based on feedback and testing. It involves several stages that are repeated multiple times throughout the design and development lifecycle. Below are images showing the iterative process of wireframing beginning with low-fidelity rough sketches, higher-fidelity figma wireframes and mockups.

Rough sketches of ideas for hompage layout options
Rough sketch of wireframe for the homepage main content areas Rough sketch of wireframe for the homepage main content areas Rough sketch of wireframe for the homepage main content areas Rough sketch of wireframe for the homepage main content areas
Iteratations of wireframes in Figma (interactive)

Use gestures and controls to zoom and move wireframes

4.2 Design Implementation: Figma

After receiving feedback from the KSL leadership team, home page design wireframes were first sketeched out (see photo grid right) and then mockups created in FIGMA.

The following elements were prioritized in the new design:

  • "My Account" navigation button to the secondary navigation up in the blue header above the primary navigation.
  • Insertion of new main navigation item for "Search Collections" that allows users to access the search bar and search information from any page of the website.
  • Adjustment of the search bar size and location to ensure users can access it easily - similar implementation to Emory University Library's home page.
  • Created a "promotion area" that can easily changed by the library team within Droopal CMS.
  • Created an area to highlight key exhibits at the library as well as moving library events to the front and center for users to easily access.
  • Determine what changes to the home page, are needed to increase user satisfaction and goal completion

After several rounds of feedback from University Marketing and Communications team experts, client requests, and internal reviews, the final mock-up design (below) was presented to the client for approval

Hompage Mockup

Screenshot depicting design process of the high-fidelity mock-up in Figma

Screenshot of Figma screen displaying process of building mockup pages
Final Mockups Presented to Client

Final Homepage Mockups in Figma (interactive)


Step 5: Prototyping

The development team created a development-specific site to allow for a/b testing of the new design against the current website.

Step 6: Testing

Usability testing was conducted with 7 participants including graduate and undergraduate students as well as faculty.

Usability tests showed a dramatic increase in usability metrics including:

  • Time to task completion decreased from an average of 6mins to 2.5mins
  • Interaction with the client’s priority elements (events/news) increased by 13.7%
  • Users reported increased satisfaction with the website including easier navigation, better tools to reach their goals, and easier access to useful information.

Step 7: Launch

The new site design launched on November 1st of 2023.

Side-by-side comparison of old vs. new design.

Homepage screenshot from Oct. 2023

Homepage screenshot from Nov. 2023


Step 8: Future Testing and Iteration

Though several rounds of iteration occurred during the initial design process, further testing post-launch will be conducted on a regular basis in order to best meet user needs.

Homepage screenshot April 2024