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?
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.
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.
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:
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:
The heat map below illustrates what the visitor began to see with the new landing page.
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.
In this version we kept the same design but made slight modifications according to our heat map findings.
Success!
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.
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!
on
Did you do an A/B test of your changes here? What was the % change in conversion rate?
on
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!
on
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.
on
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