Heat Mapping: Add Value to Your Clients’ Projects Through Usability Testing


Usability testing doesn’t only benefit users – it also helps your clients get more sales and reduce overall costs.

It’s important to focus on what the users are actually doing, rather than what they’re saying.

Regardless of the size of the business, even a small positive tweak could bring them thousands of dollars in profit – without any additional traffic.

Heat mapping is one of those techniques that can bring huge ROI to your client, and make you stand out as their agency of choice.

What Are Heat Maps?

Heat maps

Heat maps are graphical representations of data – numbers in the form of corresponding colors. Humans like graphical visualizations of data because they’re easier to understand and interpret.

Heat maps are a great way to analyze data. They lead to insights that you won’t be able to easily obtain for your client with traditional analytics software (like Google Analytics).

There are two types of heat maps:

  1. Mouse-tracking heat maps: Most digital agencies that use heat mapping software use these kinds of maps. You’re getting actual data from users, and they’re cost-effective. There are three kinds of interactions you can track: mouse movement (useless, since there’s no correlation with eye movement), scroll tracking, and click tracking.
  2. Eye-tracking heat maps: They’re very expensive to run, and only professional UX companies use them. You have to take the user out of his normal context (by removing him from his home) – thus making him uncomfortable.

3 Ways Heat Mapping Can Help Your Client

Gathering data with heat maps can help your clients in three ways:

  1. It allows you to make design changes based on data. Clients are often stubborn, and they want you to make changes based on their “hunch”. Give them real data – in a visually pleasing way – and you’ll be able to change their mind.
  2. You can show them how important directional cues are. Clients will usually send you a bunch of random photos to put on the website. As a professional marketer, you know how important directional cues are (for example, a person should always look towards your headline or CTA).
  3. You can convince them that “the fold” isn’t the only thing to think about. Often, users are scrolling down and looking at the content, even if the page is very long. You can use scroll analysis to see what percentage of your users are scrolling below the fold and how far they’re scrolling. You can then make design recommendations based on that information.

Now that you know the value of heat mapping, you have to choose the best tool for the job.

The Best Heat Map Tool

We’ve discovered that the best tool by far is HotJar. It’s $30/month for signing up, and additional $9/month for each client.

HotJar Heat Mapping Features

HotJar offers you three types of heat maps:

Click/Tap heat maps: These heat maps will show you where the clients’ users are clicking (on desktop computers) or tapping (on mobile devices).

Hotjar click heatmap

Mouse-movement heat maps: completely useless, because studies have shown that there’s no correlation between mouse movement and eye movement.

Hotjar mouse movement heatmap

Scrolling heat maps: Those are extremely useful, because they show you what sections of the page users are reading. Allows you to analyze the effectiveness of the page design.

Hotjar scrolling heatmap

HotJar vs Google Analytics

Although Google Analytics has a built-in tool that helps you see where the clicks happened on the page (it’s called In-page Analytics, it’s lackluster compared to specialized solutions like HotJar. Why?

In some cases, the tool just doesn’t work. There’s often a conflict with other scripts. The more scripts and plugins your client’s site has, the bigger the chance it just won’t work.

Second, when you use that feature, you won’t be able to navigate through your site. You’ll have to turn it off.

The biggest drawback is that Google In-page Analytics doesn’t track clicks on non-links. This is a very useful feature to have because, once you find out that users are clicking on objects that don’t provide any interaction, you can:

  1. Create interactions around objects, which could potentially lead the visitor deeper into the funnel.
  2. Remove any signs of interactivity – so the users don’t get confused.

Case Studies: How HotJar Helped CustomerBloom Gain Valuable Insights

HotJar helped us gain valuable insights that we wouldn’t be able to get otherwise. Here are two recent case studies that lead us into thinking about redesigning the homepage:

Case Study #1: Our Visitors Read Testimonials

We ran a heat map on our Index page, and we discovered that 13% of all the clicks on the page were clicks on the “next” button in the customer testimonial section (way below the fold).

We started wondering if it had anything to do with the photo of the attractive woman giving the testimonial, so we changed the order of testimonials.

CustomerBloom testimonials case study

The results gave us our answer: our visitors want to read testimonials regardless of the photo. Here are the numbers:

  1. Woman testimonial first: 13.67% of all clicks on the page were clicks on the next button.
  2. After switching the order of testimonials: 18.91% of all clicks on the page were clicks on the next button.

What have we learned?

We’ve learned that we can move the testimonials higher up on the page, since users obviously want to read them.

We could also add a new CTA near the testimonials, which would enable them to hop into the next level of the funnel immediately.

We could also get more testimonials from our clients.

Finally, we’ve learned that we should test our hypotheses often: it’s not enough to test them once, and then call it a day.

Case Study #2: Above the Fold, Users Aren’t Clicking

We ran a heat map again, and analyzed the above-the-fold visitor behavior.

To our surprise, we found out that most people aren’t interacting with our main content at all. As you can see in the image below, there aren’t that many clicks on the four circles.

CustomerBloom above-the-fold heat map

We also realized that the “Reviews” link in the navigation bar is being clicked a lot. We put our hypothesis to the test once again, and here’s what we got:

  1. First heat map experiment: 4.32% of all clicks on the page were clicks on the “Review” Navigation option.
  2. Second heat map experiment: 5.09% of all clicks on the page were clicks on the “Review” Navigation option.

What have we learned? People are willing to scroll down – just to get to the testimonials. Combining that with a high click through rate to the reviews page indicates clients are really looking for social proof – so we’ll steer our redesign in that direction.

We also need to get more reviews. To find out how to get more reviews for your clients, check out our guide on creating a killer online reputation strategy.

Finally, because we know that people are clicking on the “Reviews” page a lot, we can put the effort into making that page better by positioning CTAs in a more strategic way.

Heat maps are powerful, but you need to know how to set up successful campaigns to impress your clients. That’s what you’re going to learn next.

Setting Up Heat Mapping Campaigns for Clients

Before you begin, you should set the right expectations.

If you don’t, clients may wonder why you didn’t optimize the design in the first place. You need to let them know that, no matter how well you plan the design for their target market, you are still making a “educated approximation” as to how their clients will interact with the completed site.

Usability testing is always recommended so that you can actually observe how clients interact with the site and optimize it based on actual data. You want to make heat mapping a bonus value-adding service – it shouldn’t be a part of your regular deal.

Otherwise, they’ll just want you to fix the site for free.

Don’t Charge Them for Heat Mapping

You have to eat the cost ($9 to set it up for their site) for the first month. Keep HotJar running in the background for that month without charging for it.

After one month of tracking, recommend changes to your client based on the heatmap analysis. Let them know how much each optimization is going to cost and let them choose if they want to pay for any of the optimizations.

If they want you to make those changes, charge them for those changes – and keep HotJar running. If not, turn it off for that particular client. The cost/risk is minimal ($9) while the sales opportunity for continued optimizations/work is tremendous.

Explain the Value

Most clients don’t realize the value of micro-conversions, and how heat mapping tools can help with those. That’s why you need to explain them the value of such campaigns.

If you have a client whose site is full of interactive elements (for example, e-commerce sites), explain to them that you can set up and track goals, such as how many times the video has been played, or what types of filtering their users are doing.

Tell them that by moving site elements around – based on the heat map analysis – you can increase their bottom line. If it’s easier for the user to find the information he needs, he’ll be more likely to do business with your client.

Make Sure to Test Only One Hypothesis at a Time

It’s important to only test one hypothesis at a time. Don’t make recommendations for multiple design elements at one time.

As you make changes to the design, they will affect how users interact with the entire site. So, making one design change may make other design changes irrelevant. If you change too much at one time, you may get unexpected negative results.


Your marketing agency should offer a heat mapping service because it adds tremendous value to the client. However, don’t offer it as a part of the total package: offer it as a value-adding bonus.

If they’re only using Google Analytics, they’ll know what is happening, but it’s going to be hard to know why it’s happening.

And while GA does offer them basic heat-mapping functions, it’s not intuitive, and it doesn’t track clicks on non-clickable objects.

From our own experience, we’ve found HotJar to be the best tool on the market for that job.

What heat mapping software does your agency use? Share your insights in the comments section below.