Scroll Maps

Overview

Scroll Maps is a feature that allows our customers to understand the percent of users that are scrolling to a specific part of a page answer whether compelling content of CTAs are even being seen.

Role

Product designer

Research (collaborator)

output

Trade-off visualization

Solution mocks

Problem

Customers have no way of knowing how far down a page their users are scrolling and are unaware of the uniquely valuable features in our Page Insights view

Customers are not able to make data-informed decisions on where to place the most important sections of a page. Furthermore, lacking this capability causes FullStory to miss out on deals to competitors who possess it. Additionally, the Scroll Maps feature lives in a part of our product that isn’t seeing high engagement: Page Insights.

Goal

Allow customers to understand how far down a given page their users are scrolling and drive traffic to the Page Insights view

Customers can make data-informed decisions on optimal placement for key sections of a page. This enhancement positions FullStory competitively, securing deals over competitors who previously had an advantage in this area. Also, customers are now more familiar with the valuable features inside of the Page Insights view.

Research

Amongst all of our customer engagement tools, this the highest requested feature from our target customer sizes (at the time): Small and Mid-sized businesses

Edge case

Internal scrolling

Edge case

Mini-map Quartiles

Part of the mini-map feature within a Scroll map included visual indicators for the quartiles of a given page. I added these quartiles to make it easier for a user to see at a glance what the scroll depth was on this page, “this is where [three quarter, half, a quarter] the visitors to this page are scrolling. The problem was that technically, the feature could not cleanly provide normalized quartiles for 25%, 50%, and 75%.

Agreeing on a path forward

There were several ways of solving for this issue so I worked with my engineering lead to outline each potential path forward along with its respective trade-offs. I then set a meeting and presented these options to the entire cross-functional team to discuss how we would like to move forward.





Solution

Solution iterations

This carousel includes all of the iterations for our solution up to the V1 cut. The final mock which was our V2 is displayed below.

Solution

Final mock (V2)

This is the final version of the Scroll Maps feature with it’s complete set of capabilities: The mini-map, scrolling quartiles, custom playback controls, scrollable page view with scroll map overlay. Technically this solution would be our V2 as it would only be possible after addressing the technical limitations that landed us on the V 1 MLP (Minimum Lovable Product).

Results

~30% lift in Page Insights traffic and never losing on a competitive deal again because of this feature gap

The project resulted in an impressive ~30% increase in traffic to Page Insights, effectively leveraging the newly integrated Scroll Maps capability. This strategic addition has significantly bolstered our competitive edge, ensuring that we no longer lose deals due to the absence of this feature.

Collaborators

Engineering Lead
Product Manager

That's a wrap for this project!

See more of my work from

FullStory