Condense, Clarify, Construct: Three Key Steps to Increase User Engagement for a Library Landing Page

Client

School of Visual Arts Library

Collaborators

Product Designer and Web Developer

Skills Applied

Eyetracking Research, Heatmap Analysis, Gaze Plot Analysis, Usability Testing, Interviewing, Thematic Coding, Moderating, Affinity Mapping, Mockups

Problem

How might we improve usability so that users can find content faster and rely less on in-person assistance?

Timeline

6 weeks (Mar 2025 - May 2025)

Impact

  • Condensing sections reduced scroll length by ~50%, directly lowering drop-off risk on mobile

  • Condensing sections resulted in a faster scroll time

  • SVA Libraries reported that our findings comprehensively addressed all of their website-related concerns, providing clear guidance to inform strategic improvements and enhance the user experience

The Process

Tools used to collect and analyze the data we were interested in to make the project successful.

Tools used

  • Tobii Lab for Eyetracking

  • SUS Calculator

Data Types Analyzed

  • Heatmaps

  • Gaze Plots

  • Gaze Replay

  • User Quotes

  • Task Time Completion

  • System Usability Scale

Recruitment

Flyers, email list servs, and tabling events sent out to recruit 44 qualified participants that met these requirements:

  • College student at School of Visual Arts

  • Regularly used library services

Goals

Discover why users abandon the SVA Library website before completing tasks

Deliver actionable, constraint-aware recommendations

Uncover why users may give up from using the SVA Library website

Through eye-tracking and retroactively asking questions about their eye-patterns, we aimed to evaluate usability issues within the landing page to better understand why users may end their times prematurely while using the site.

Create actionable recommendations with respect to constraints

After testing, we aimed to synthesize recommendations by redesigning the page for mobile and desktop. We aimed to stay within the constraints provided and be as faithful as to what design changes were possible based on the original site.

Through eye-tracking and retroactively asking questions about their eye-patterns, we aimed to evaluate usability issues within the landing page to better understand why users may end their times prematurely while using the site.

After testing, I aimed to synthesize recommendations by redesigning the page for mobile and desktop. I aimed to stay within the constraints provided and be as faithful as to what design changes were possible based on the original site.

The Three Key Steps to Increase User Engagement

My Recommendations

Consolidate

12/12 participants found structure/IA doesn’t match their expectations

“By scrolling through many times I was able to complete this task. Maybe I got so accustomed to the sight”

We restructured certain information within sections to meet user expectations. For example we made it easier for users to differentiate between forms and services,

Before


After

Clarify

8/12 participants found wording confusing and were unclear about the purpose of certain features

“I look at the top of the page to figure out what the page is about”

We set the intention of the page at the top. Headings, especially actionable headings like "Research + Discovery" guides users about possible actions they can take and thus reducing cognitive load.

Before


After

Condense

12/12 of participants felt there was information overload

“Certain things need to be condensed. It’s a lot of scrolling on mobile”

We collapsed the sections to minimize single scroll by almost 50% of it's previous length.

Before

After

Presenting our Findings Leads to High Praise

The client was elated with our recommendations, noting that our findings "hit every box" as it addressed all of their key concerns. They emphasized that our work provided them with the comprehensive insights needed to confidently implement meaningful changes with the larger web design team. They exclaimed that I "gave them everything [they] needed in order to make the proper changes." Additionally, they praised our approach for balancing creativity with feasibility, demonstrating an ability to deliver innovative solutions that aligned with practical constraints.

The client was elated with our recommendations, noting that our findings "hit every box" as it addressed all of their key concerns. They emphasized that our work provided them with the comprehensive insights needed to confidently implement meaningful changes with the web design team. They exclaimed that I "gave them everything [they] needed in order to make the proper changes." Additionally, they praised our approach for balancing creativity with feasibility, demonstrating an ability to deliver innovative solutions that aligned with practical constraints.

Create a free website with Framer, the website builder loved by startups, designers and agencies.