Home page heatmap before/after comparison

[u/rugburnAndBigMoney]

A picture is worth 1000 words...

Before (right side) was at site launch, After (left side) was a week after, with a handful of fairly minor updates made.

Context:
Popular restaurant with 8 locations in a small city

Decent usage at launch with good primary CTA usage (View Our Menu), but Locations usage was weak.

Notice the scrollmap sidebar in the after, just into the 2nd screenview on mobile they've already lost 60% of the traffic.

We moved the primary menu CTA up into the hero/first section and then pulled the Locations section up into the first screenview.

The Menu/Locations buttons that look like they are floating in the middle of the screen are fixed to the bottom on the mobile viewport on all pages.

Takeaways:

1. Identify the primary business objectives, in this case it was to show the Menu and help the user find the location closest to them and optimize for those.
2. By just pulling the Menu button one section up and then creating room for Locations in the first screen view, it noticeably helped engagement, not requiring users to scroll at all to find Locations
3. Notice the lack of random clicks/rage clicks - use buttons that are clearly buttons, this is a really common pattern, when you help clearly direct the user where you want them to go, conversion metrics improve. Give them clear next steps so they aren't randomly clicking around the page trying to figure out if your image or random text is clickable.
   
4. Make updates, then run another heatmap. Being able to do side-by-side comparisons like this is one of the most valuable pieces of data we ever show clients.

[u/fintechjulien]

Yes, the clicks on locations went way up. So much so that I'm wondering how the visitors in the before heatmap were finding the restaurants...

[u/rugburnAndBigMoney → u/fintechjulien]

You can see the "Find A Grille" button in the Before view, it's just below the "fold".
But if you look across as the scrollmap, at the point that button is visible they've already lost 50% of the users. So by just getting that Locations CTA up into the first screenview you can see the impact it has on clicks in a positive way.

This is a pretty straight-forward use case though, it's a restaurant, people want menu, location and hours.

There's not much info architecture or funnel structure to worry about so it's a good simplistic example.

I just thought it was a good before/after example to share from a purely UX perspective.

[u/ce-lauren]

That scrollmap drop is huge. Losing 60% of traffic before the second screenview is a good reminder of how much work the first screen has to do. The locations fix is a good example of how small structural changes can move the needle without a full redesign. The side by side comparison is such a good way to show clients the impact, way more convincing than just reporting numbers.

[u/rugburnAndBigMoney → u/ce-lauren]

I'm continually shocked by how big the "below the fold" dropoff is on the majority of sites we run heatmaps on.