top of page
ScreenRecording2024-04-07at7.33.51PM-ezgif.com-video-to-gif-converter.gif
Introduction

Enhancing user retention and navigation with eye-tracking research on Smarthistory mobile

Smarthistory, partner of Khan Academy, is a non-profit providing art history resources to students and instructors.

 

I conducted on-site user research and redesigned SmartHistory’s mobile site to improve navigation and accessibility within its pages and menu items, increasing retention past the homepage from 200+ monthly visitors.

Skills

Web analytics

A/B testing

Eye tracking

Information architecture

WCAG accessibility

Outcome

An updated mobile site with a reordered navigation menu, accessible text and spacing, and visual guides for reading through long history content.

Design challenge

How can we redesign Smarthistory so that students, teachers, and art history can easily find information?

Project overview

Client's problem

My approach

Smarthistory is a nonprofit institution providing art history resources for students and teachers of AP programs and introductory college courses. This is a UX consulting project with a Smarthistory client where I self-directed a combination of UX research methods on their site to identify usability problems and design feasible recommendations of solutions using Figma.

The client noticed decreasing trends on mobile user engagement on Smarthistory’s homepage and landing pages through Google Analytics and Hotjar, but they were unable to identify specific reasons.

 

Smarthistory also wants to organize their content in a more flexible and robust manner to optimize visibility for all global content, as most of their content centers around the Americas and Europe.

I started the project by consulting with the client on their perceived pain points with their website and the final deliverables they were expecting. Afterwards, I ran web analytics on their Google Analytics and Hotjar data to inform the focus of my research and design. I proceeded to conduct eye-tracking tests with Tobii Pro software to evaluate how users navigated in real time. With this information, I crafted initial designs on Figma and used A/B tests to validate my final designs.

Key recommendation

Add introductory guiding content to the homepage and content pages

New homepage with introduction and visual previews grouped by art history topic

home straight.png
home flip.png

Table of contents shortcut for long content pages

vg straight.png
vg flip.png
Frame 16279.png

Adding an introductory paragraph to the homepage would help users learn more about Smarthistory and its offerings. Similarly, a table of contents with key points at the top of content pages would allow users to overview the page's structure and skip to desired sections.

 

Informed by research

88% of users felt overwhelmed by the text length on the screen and expected to see a summary of key points at the top of the page, leading to extensive scrolling and missing key information.

Key recommendation

Relabel the hamburger menu and group into new sections

Hamburger menu - redesigned.png

Grouping subsections by collapsible world regions and time periods within the hamburger menu creates shorter lists that reflect the categories users expect to see, rather than mixing all contents in a long list.

Additionally, distinguish course-specific content under “Course Preparation” section as not all visitors are in specific course programs.

 

Informed by research

Participants misinterpreted links due to a lack of clarity in wording. 50% of participants mistakenly believed “Start here” would redirect them to introductory guides, when these were actually under “Beginners’ guides”.

Key recommendation

Refine menus to meet accessibility standards

Redesigned menu with larger padding

Frame 16280.png

WCAG 2.1 AA level states that the minimum accessible button height is 24x24 pixels, and 44x44px for the AAA level. Increasing all touch targets to at least 24 x 24 px will reduce missed taps, especially for navigation menus and buttons.

Informed by research

Sufficient padding is crucial for mobile interfaces as 60% of test participants faced difficulties with responsiveness after tapping on narrow padding.

Key recommendation

Move the original footer menu to the top

iPhone X.png
IMG_3607 1.png

The navigation bar is more discoverable and remains pinned to the header. It includes a hierarchical breadcrumb to the current article.

 

Increases in page views and session duration will indicate if the new menu is successful.

Informed by research

In A/B tests, moving the menu to the top reduced task failure rates from 60% to 25%. The footer menu highlights important times and sections that are difficult to identify in text-heavy pages.

Takeaways and opportunities

The client reported a growth of 200+ monthly mobile visitors after June 2023 and a decreased mobile bounce rate from 80% to 59%.

​The Smarthistory client received my presentation positively; they were unaware of the current problems with information architecture and accessibility for touch targets on mobile. The team has already made changes, starting from a top navigation menu with ample padding for mobile users.​

 

Given more time to conduct research, I would have included more art history students rather than users with limited backgrounds in art history. Participants felt overwhelmed due to unfamiliar terms crucial to an art history site, affecting their success with tasks, i.e. recognizing art movements.

bottom of page