Eye-Tracking the Future:

Eye-Tracking the Future:

SVAs Research Guides

SVAs Research Guides

A bold, scroll-based website concept celebrating SVA’s creative identity through motion, storytelling, and type

A bold, scroll-based website concept celebrating SVA’s creative identity through motion, storytelling, and type

Project Type

User Research, Eye Tracking Study, Usability Testing

My Role

UX Researcher

Project Timeline

4 Month

Scope

Think-Aloud Protocol, SUS, Heuristic Evaluation

Software Used

Tobii Pro X2, Tobii Pro Lab, Adobe Premier, Figma

SVAs Research Guides

The School of Visual Arts (SVA) is a art school with a wide array of online resources tools and archives aimed to supporting the needs of art and design students. However, user feedback indicated that these platforms despite being rich in content were difficult to navigate, lacked visual clarity, and didn't align with students' natural browsing behaviors.
To address this, our team was brought in to evaluate and enhance the usability of these digital tools through eye-tracking, usability testing and heuristic evaluation.

Problem Statement

The SVA Library was overwhelmed with repetitive queries and needed a more intuitive way for users to access help on their own. While research guides existed, they were underutilized—mainly because the library lacked insight into how students actually navigated the site.

How might we make it easier for students to find the right resources in research guides?

Our Team

Me!

Me!

Sakshi Rane (ME!), Sophia Liu, Yuri Minami, Riley Knowles

Three Pronged approach

Eye-Tracking for Task Completion

Eye Tracking
Survey

Eye-Tracking for Task Completion

Eye Tracking
Survey

System Usability Scale (SUS)

+42%

System Usability Scale (SUS)

+42%

Deeper insights and inform solutioning.

Deeper insights and inform solutioning.

We tested these two sections to learn how students use them and find ways to improve the experience.

Online Resources

This is the go-to page for SVA students, and because it’s where most people land first, it has the biggest chance to make an impact.

Scenario

Imagine you are a student writing a paper on the history of American fashion.

Task

Find resources you could use to source fashion magazine photos to serve as the topic of your paper.

Research Question

How effectively and quickly can users understand the purpose of SVA research guides and what they can do with them?

Fragments OS

Design Archives

This page lists design archive resources and was chosen by the client as the key template for broader use.

Scenario

Imagine you are a graphic design student designing a movie poster.

Tasks

Explore the page to find suitable typography resources for your project.

Research Question

What’s the best way to organize research guides so they’re clear and easy to navigate?

What Worked

Finding the Relevant Resource

83 %

Participants successfully completed the task by finding relevant resources

Students used headings like “Magazines” and known publication titles to guide them.


Strong visual hierarchy and helpful images

75 %

of students identified keywords such as “font” and found at preview images helpful when locating their resources

I saw the word ‘Typography’ and immediately knew where I’d go.” participant


Tabs and filters helped students narrow options.

Participants discovered and used the top navigation tabs on the Design Archives page to quickly focus their search.
The tab helped participants narrow down their options and find the relevant database.

Testing and Analysis

We used multiple data sources to build a clear picture of user behavior and key issues.

We used multiple data sources to build a clear picture of user behavior and key issues.

Starting with a rainbow sheet, we mapped behavioral patterns and RTA feedback to identify core findings. We then layered in quantitative metrics, eye-tracking data, and user quotes to form a complete story. Eye-tracking showed what users did, quotes explained why they did it and revealed their needs, and quantitative data measured the impact and severity of each issue.

The rainbow sheet acted as the starting point, leading us to the insights that shaped our analysis.

Problem Findings in Online Resources

Problem 1 :

Despite preferring the search bar, some students still couldn't get a relevant database result using it.

Students try to search but the current search functionality does not meet their needs when the keyword is complex.

History of American Fashion

fashion magazine

fashion

history of American fashion

Fashion Magazine photos

history of American fasion (Typo)

Problem 2:

Students struggles with information overload and had difficulty parsing the information, they tended to avoid reading the paragraphsDespite preferring the search bar, some students still couldn't get a relevant database result using it.

Instead of using the search bar, students attempted to skim the page, but the dense text and lack of information hierarchy made this difficult.
Mentioned information overload issue

67 %

Problem 3:

3-column structure causes long, unfocused scrolls. Increased cognitive load prevents users from focusing on and understanding individual items.

Participants weren’t sure whether to read top to bottom or left to right. Some missed entire sections. Resources in the third column and below the fold often go unnoticed

66 %

of participants scrolled from up and down multiple times before selecting a resource

Problem 4:

Column labels are too small and vague to help users distinguish different categories

83.3 %

participants missed or did not find column labels helpful for going through the page

Recommendations

Solution 1 :

As we found that many students felt overwhelmed by long blocks of text and had trouble figuring out which databases were useful to them. Most didn’t read everything—instead, they quickly scanned for anything that stood out. To address this, we recommend making the content easier to scan and understand at a glance:

Make logos and icons larger so students can spot them more easily

  • Use bigger and bolder titles for each database to help students quickly identify what they’re looking at

  • Add short keywords or tags to explain what each resource is about

  • Shorten long paragraphs and keep descriptions brief

  • Include a “See more” option so students can choose when they want more details

Before
After

Solution 2 :

To solve this, we recommend making the search function more flexible and accurate by:

  • Allowing for more complex search phrases (e.g., “history of American fashion”)

  • Automatically correcting typos and common spelling mistakes

  • Delivering results that match a wider range of keywords and topics

By improving the search experience, students will be able to find relevant databases more efficiently without relying solely on trial and error or scrolling through dense lists.

Solution 3 :

Grouping content to narrow the focus

Tabs help users filter content based on search intent. (No more sporadic search across columns).

Noticeable headings to improve navigability

Larger headings further group content and give users anchor points to help them navigate the page.

More Informative Archive Items Tell Users What They Should Expect to Find

Using icons and keyword tags helps students quickly understand what each resource offers and find relevant materials faster.

What Clients said

“Great recommendations from this group for reducing item and database descriptions on our guides, and for a better way to organize content on the exemplary guide, Design Archives. We can use these suggestions to apply system-wide updates to all of our guides.”
Digital Services Librarian, SVA Library

What I Took Away

This project helped me get better at turning research into simple, clear stories. By combining numbers, user behavior, and quotes, I learned how to explain what users need in a way that makes sense to everyone. Putting these pieces together made it easier to show the real problems and get stakeholders to trust our recommendations. I’ll keep using this skill as a product designer to share insights and make better decisions for users.

Psst! Are you on your phone?

This screen’s a bit too tiny for the full story.


Why can’t I see the full case study?!

Because your phone is too smol.

Why can’t I see the full case study?!

Because your phone is too smol.

👉🏼 Switch to a bigger screen for the real behind-the-scenes of this project full of messy sketches, big ideas, and some aha! moments.