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.
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
Table of contents shortcut for long content pages
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
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
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
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.