Topper_Blog

Heatmapping for Websites: A Tool You Can’t Do Without [Case Study]

June 11, 2020

Subscribe to Flight Media Blog Notifications

Heatmapping for Websites: A Tool You Can’t Do Without [Case Study]

Editor’s note: This post was originally published on 7/18/17 and has been updated for accuracy and comprehension.

What are the benefits of heatmapping?

The benefits of heatmapping include being able to gather information about how website visitors are behaving, which allows you to make necessary changes that better suit the way they naturally navigate it.

You need to find out what website visitors are doing when they come to your site.

That way, you can make changes to better suit your audience based on the data you collect about how they actually navigate your website. 

If you don’t have a way to track visitor actions, you’re probably just taking guesses about what visitors do on your website.

Without a heatmapping tool, you have no real way of knowing.

Full Disclosure: 

We use Hotjar as part of our inbound marketing and growth-driven design strategy for every client. It gives us cold, hard data about what’s working and what’s not so we make educated, informed decisions about our clients’ websites that get results.

We threw in a few before and after screenshots from our own clients, too, so you can see exactly how beneficial heatmapping for websites can be.

Heatmapping for Websites 101

First things first. Let’s dive into a few insights that heatmapping offers.

1. Links. 

Website visitors will often click on items on the page that aren’t linked to anything. Wouldn’t it be nice to know if an element is attracting attention? If you know what they’re trying to click on, you can add a link to relevant content there.

2. Relevancy. 

If you’ve constructed a landing page that’s not getting great conversions, heatmapping can show you what elements on the page are distracting visitors from the call-to-action.

3. Engagement. 

Heatmapping can also reveal the elements to which users are attracted so you can move important information to that location.

4. Devices. 

Your website pages will appear differently, depending on the device used and screen size. 

Heatmapping will show you where you need to tweak your responsive design to drive engagement and clicks.

An Up-Close Look At Heatmaps

Here’s an inside view of how we use heatmaps to boost our client’s results.

Client 1

This is our client’s original website prior to working with Flight Media.

Client homepage before website redesign

Client homepage before working with Flight Media on a redesign

In the screenshot below, which shows the redesigned site, the heatmap captures how users are engaging with the navigation and hero image on the homepage.

The heatmap was created a year after the new site was launched. The data collected was for 2,000 page views. The heatmap shows that “Get a quote” got the most clicks, so we kept it in the navigation.

We also added a “Contact us” button in the navigation to capitalize on the consumer’s desire to get a quote and presented another opportunity to connect with prospects.

heatmap of website homepage

Homepage heatmap after using heatmapping

After running heatmapping tests for a while, we discovered the footer was getting lots of traction in a few areas.

heatmap of website homepage footer

Footer heatmap

Since users are clicking on “Team” in the footer, we decided to add it to the primary navigation.

In addition, the footer data also contributed to the decision to add the “Contact us” button in the main navigation (see the previous screenshot).

Users are also clicking on “Videos” in the footer, so we added a video to the homepage on a later design update. In this final image (below), you can see that “Get a quote” is still getting lots of engagement, like on the previous heatmap.

Having two opportunities to capture quotes increases the volume of prospects getting in touch with the client.

heatmap of website homepage

Homepage heatmap

Since users were interested in footer items like “Team” and “Contact,” we decided to make these items more prominent by adding them to the hero image.

Users can now learn more about the team (through the “Learn More” CTA) or get in touch with the client (through the “Contact Us” CTA). We also made changes to the hero imagery.

The updated images are more personal (and they are NOT stock photography).

Client 2

This was one of our client’s original website.

heatmap of website page

Original website before working with Flight Media

After running heatmapping tests, we discovered that the website and original design didn’t elicit a lot of engagement.

The hero image, which is an important piece of real estate, wasn’t getting any clicks – visitors weren’t interacting with it – because it lacked a call to action.

The screenshot below shows the new homepage, complete with a call to action that is getting more engagement. In addition, we changed the labels in the navigation so that they are more conventional, meaning visitors would quickly know what to do. 

heatmap of website homepage

Heatmap of new homepage

For example, in the original design, there was a label “knowledge center,” which got minimal clicks.

In the new design, we gave this label a new name, “Resources.” Users heavily engaged with this label, increasing clicks by 1,050%.

Client 3

Here is a heatmap of another client’s original website. 

It tells us that the user wants to know more about what this company does because they’re clicking on the “Services” item.

heatmapping of website homepage

Original website before working with Flight Media

The screenshot below is a heatmap of the client’s redesigned homepage. 

Since “Services” was a heavily clicked item in the navigation, we provided the user with another opportunity to learn more about the client’s services in the hero image of the redesign.

heatmapping of website page

Redesigned website page

The hero image should showcase what users are most interested in, and it should relate to the objective of the website.

In addition, one of the main goals for this website was to get more people in touch with the client, so that’s why we emphasized “Contact” calls-to-action (CTAs) on the upper part of the homepage. 

And there are two “Contact us” CTAs on the homepage to give users options for “acting.”

New call-to-action

Client 4

Here’s a heatmap of this client’s original website page.

heatmapping of website page

Original website page before Flight Media’s help

The white line indicates the fold, or the point where a visitor would need to scroll down to continue viewing the page.

As you can see, nearly 75% of people stopped right there. And this trend was consistent with all the pages on this client’s website.

As a result, we worked with the client to shift key information so it was easily accessible for website visitors. 

Here’s the new page.

new web page design

New web page designed after heatmapping data analysis

We did this for all the pages and have restarted the heatmap so we can reassess the new page design in the future.

Client 5

Here is a heatmap of another client’s resources page.

heatmapping of website page

Heatmapping of website resources page

By looking at the heatmapping data of this page, we determined that the navigation was too “busy.” There were so many options for users; we had a hunch it was distracting.

As you can see in the next picture, we streamlined the page to put the resources together, giving it a much cleaner look and making it more user friendly for visitors.

website resources navigation

Dropdown menu from resources navigation

We also revamped the primary resources page and place the actual resources in the order of what people were clicking on most.

new website resources page

Revamped resources page after heatmapping data analysis

Another bit of data we gathered from heatmapping this client’s website was on their Get a Quote page.

A lot of people were clicking on the icon to download a questionnaire.

heatmapping of website page

Heatmapping showing traffic to download questionnaire

After tracking 2,000 views, we gated the questionnaire so people could only get the download after providing their email address. 

This provides a way for our client to add to their email list and grow their prospecting efforts.

As with the other clients, we restarted the heatmapping after making changes so we can reanalyze after a few months.

Heatmapping Data Optimizes Website Conversions

If you don’t know what your website visitors are doing on your site, how can you make changes to affect engagement, conversions, and sales?

Heatmapping for websites, using tools like Hotjar, provides you with the insights you need to update your website – and give your audience what it wants. 

New call-to-action

Blog Comments

Maja Jaredic

Maja is passionate marketer, pursuing excellence in all that she does for clients. She speaks 4 languages and spends her free time at the beach, traveling, or discovering new beer and coffee.