Measuring The Impact Of Heat Maps On Landing Page Conversion

Measuring The Impact Of Heat Maps On Landing Page Conversion

Heat Mapping Your Site To The Next Level

One of the buzzwords that has become hot in the search engine marketing industry over the last year has been ‘conversion’.  More specifically – what things can be done to the pages that traffic is driving to so that we can encourage the visitor to complete the goal that we want them to achieve?

Also on TechWyse: Improve Landing Page Conversion Rate Implementing Killer Landing Pages That Convert

The first thing we want to ensure is that the page the visitor is landing on has relevant information on it to the keyword the visitor found the website on the search engine for, e.g. SEO Toronto. Once we have confirmed this what can be done to ensure we are converting visitors to the goal that we want them to complete?

At TechWyse, we use several methods for conversion rate optimization; we build sales funnels, ensure we are using conversion oriented content, and make sure the conversion point is easily recognized. One of the most effective things that can be done to quantifiably measure visitor behaviour is to use heat maps to help understand what visitors are looking and clicking on when visiting a specific landing page. To help you understand how heat maps work and why they can help improve conversion what better way to show it than a real life example?

How To Improve Conversion Using Heat Maps

Many clients come to our internet marketing agency with landing pages (either in PPC or there actual public website) which have really sharp designs – but they don’t seem to convert.  By using heat maps we are able to begin observing data that we would not have considered otherwise. Looking at the landing page below for example, it seems that the design is both professional and sales driven.

Original Landing Page

How To Improve Conversion Using Heat Maps

Original Landing Page – Heat Map

After reviewing the actual heat map (below) we could see that there were many issues with what visitors were actually looking at.  Remember – this heat map represents a span of no more than 5 seconds of a person’s time and is the action people take in deciding whether to stay longer or bounce and visit another page.

Findings

Using the heat map analysis above, keep in mind that red means it has engaged the visitor, orange and yellow mean that they may slow down slightly and green means very light attention is paid.  Also note the lines and numbers as they represent the path the user takes when looking at the page and in what order. After review, here are just some of the issues that the original landing page presented:

  • Since we naturally notice color differentiation, the first thing looked at was the red starburst which actually has no click action or conversion related text.
  • If you actually click on the image above you can see numbers which represent where the eyes start and the path that they follow.  In this case the eyes are all over the place.  The screen looks very messy.
  • The action button in the top banner isn’t even observed in the scan of the page.
  • The form is located below the fold for most browsers and even in this example is not even noticed.  This is another conversion item.

Revised Landing Page V1

Based upon the above results we decided to redesign the homepage.  The main goal was to remove clutter and have the visitor focus on items that created ‘action’. Here was what we came up with:

Revised Landing Page V1 – Heat Map

The heat map below illustrates what the visitor began to see with the new landing page.

Findings

In this design concept the first thing the visitor looked at was an image of the truck.  This was also the most intense area for the visitor as illustrated by the red tone.  Following the viewing path the visitor then scans the main selling points listed in the top sales funnel then scans the logos, the form, then the image. The main issue with this landing page is the actual call to action (located in the top banner in light blue) isn’t looked at whatsoever. An improvement, but back to the drawing board.

Final Landing Page V2

In this version we kept the same design but made slight modifications according to our heat map findings.

  • We changed the truck in the top banner from red to blue so it would blend with the site better and take attention away from the image and over to selling features.
  • We changed the color of the main call to action in the top banner from blue to yellow and also changed the checkmarks for the top bullet points to yellow to attract attention.
  • We moved the logos which previously appeared in the top banner to the bottom of the page where they would be visible if the user scrolled.

 

Final Landing Page V2 – Heat Map

Findings

Success!

  • Visitor first sees the image but is not as fixated on it as previously.
  • Visitor then moves to the main call to action and is the most engaged in this location.
  • Visitor then also reviews the quick contact form.
  • Visitor then investigates the offer in the top sales banner and is engaged.
  • Visitor then goes back to the truck image
  • Visitor then views the call to action in the top banner again.
  • Finally – the visitor ends on the Truckers Assist logo.

When this entire exercise began, we thought we had a page that was designed nicely and was effective.  After building another landing page, testing and revising we quickly realized the issues the original landing page had and created a design that was more effective. All items we would not have identified unless we used a heat map site scan tool!

Think this can help your web pages?  We can do the same thing for you that we did for this client.  To begin the process you can give us a call or fill out this form.

Heat Map Testing Tools

There are several tools available that can help you understand what visitors see when they come to your web pages.  The heat map tools we used in this example came from Attention Wizard and Feng-GUI and are recommended for people that want to quickly measure a concept. Crazyegg is another amazing heatmap to track where your eye travels. Many thanks to them for building such a lovely tool! Many thanks to them for building such a lovely tool!

It's a competitive market. Contact us to learn how you can stand out from the crowd.

Read Similar Blogs

Post a Comment

4 Comments

  • avatar

    Did you do an A/B test of your changes here? What was the % change in conversion rate?

  • avatar

    Wonderful case study on Heatmaps! This example tells us its not just in one day we can do a perfect page. Its the constant tracking, measurement, tweaking the design and again tracking again and tweaking that gives us the ultimate result. Must read for Web Designers who are looking for a career as conversion specialists!

  • avatar

    Great great info. Pretty interesting stuff. Thanks for letting us know the internal research study done by your company. Many don't always realize that they can optimize their landing pages using these type of heat map studies or eyetracking to better set a converting, saleable web page.

  • avatar

    Thanks DJ for letting us know about such great tools that can improve website conversion and this is a new way to identify the areas a user goes through in a particular web page! It's great to read on how heatmaps actually work – http://www.feng-gui.com/faq.htm

Ready To Rule The First Page of Google?

Contact us for an exclusive 20-minute assessment & strategy discussion. Fill out the form, and we will get back to you right away!

What Our Clients Have To Say

L
Luciano Zeppieri
S
Sharon Tierney
S
Sheena Owen
A
Andrea Bodi - Lab Works
D
Dr. Philip Solomon MD