Blog. For Companies Who Want to Grow

Using Heat-Maps to Improve Professional Services Customers Experience

[fa icon="calendar"] October 02, 2015 - Fred Thompson

Heatmaps, what the heck are those? For all of you that have not heard of this terminology before, here is a quick explanation: Heatmaps are part of the HotJar SaaS software suite. A heatmap works like an infrared camera, always looking at your website. Anytime a visitor lands on your website, the heatmap will track them.

What value is there in tracking vistors' movements in your website? Because when you do so, you can now tell what your customers really want for textual and visual content.

Here's just one example of how a heatmap can be used:

We use heatmaps in growth driven design to tailor professional services websites to their customers interactions. Your website needs to focus on the customer's needs more than anything else. By knowing visitors' habits, you can taylor content, where the content is positioned, and make content actually work to generate leads—all giving the customer the best possible website experience.

Why should you give them the best experience?

You should give your customers the best possible experience because they are in control. It used to be that the seller had control of all of the information. Now the buyer has all the control because of the vast amount of information on products and services. You have to earn a buyers (customers) trust. How you do that is providing the best possible experience through growth driven design and hubspot. Today it is a seller beware market not a buyer beware market.


Here are how heatmaps work: 

In this heatmap, you can see the colors ranging from blue to red. This is the same type of scale that is used in an infrared camera. Blue representing cold (almost no movement) and red representing (a lot of movement). Here are the three major elements that heatmaps track in a website.


1) How to Measure Your Customers' Movement

growth driven design

In this heatmap, you can see that the movement is from left to right. The Nielsen Norman Group study found that people tend to read textual content in an F-shaped pattern. What the data reveals is people skim through the text, and their primary focus is the beginning of the article. It's like reading a book, most people read left to right and top to bottom. However, in using heatmaps to track a customer's movement on your website you also can tell that most people do not read the textual content all the way through. They skim and focus on the bullet points and sub-headings. Exhaustive reading is rare with customers when reading a website page. This is even more so when a client is conducting research. They'll not want to waste any time.


2) Improve your click-through rate

growth driven design

What if you had insight into what your customers were interested in? In this image, you can see there are certain spots that are “red hot.” These are the elements in this website that customers are most interested in. This heatmap will help us to analyze the customers’ behavior and which graphical elements they engage in the most. What makes heatmaps so powerful is you are getting data from your actual visitors and *guess what* we haven't found any other way to do it.

How can you use this information? The first way to use this is to get rid of the elements in your website that they customer is not engaging in. In this case, approximately 40% of the customers are interested in services. So you have to ask the question, what type of service from this company are they most interested in?


3) Knowing What Content Should Be Above The Fold Or Below The Fold?

growth driven design

In web design, the fold concept is taken from the newspaper industry. The top half of the newspaper is the most valuable real estate that everyone wants to advertise on. Above the fold is the first area of a newspaper or website that a customer will see.

This heatmap that shows where the average fold is on this page. It is measuring how far down the page the customer scrolls before they stop engaging. 70-80% of customers typically stay above the fold. This leaves only 20%-30% of clients scrolling below the fold. This amazing lead intellegence yields two great concepts :

  1. Keep the most important elements above the fold
  2. Try to increase the engagement below the fold with content that the customer is interested in.


Conclusion: Knowing Is Better than Guessing

Heatmaps allow us to understand what your customers want, what they care about on your website. Eliminate the guesswork by knowing how your customers behavior through clicks, taps and mouse movements. Gone are the days of just picking a website template and inputting a bunch of textual content and graphics. Make your website truly useful to your customers.


What if you could make your web design have growth? How do you tailor your website to your customers interactions? Are you guessing at what is working?

Want to find out more? Learn all about how Growth-Driven Design will make it happen, with our free e-book!Get a free Growth-Driven Design Analysis  

Topics: Web Development

Fred Thompson

Written by Fred Thompson

Fred Thompson is the owner of New Destiny Media; Fred loves working side-by-side with business owners to create successful marketing campaigns that grown their business. When Fred is not working, he is spending time with his three very active children at home. He is an avid problem solver (MacGyver), Loves anything Martial Arts related and Social Media gets him excited about work.