How To Use Click And Scroll Heatmaps To Improve Your Website (Case Study)

Having a beautifully designed website that makes your business look appealing and professional to your ideal customers is just the start. If you have a website that is struggling to convert visitors into leads and customers, then you have a small problem on your hands.

Beautiful and professional website design doesn’t always mean that your business will suddenly attract the right prospects.

Design is important, however, so are other important attributes such as a website’s copy, messaging and UVP, content structure, page load times, etc.

So, what can you do about your website and its poor conversion rates?

Redesigning a small part or the whole of your website just doesn’t sound practical, right? But you may well have to. You first need to evaluate what’s going on by collecting some critical user-data.

You can use heatmap and scroll map tools like CrazyEgg to help you figure out what is really happening on your website/pages, in terms of what your users are doing and what they’re not doing.

Getting set up!

It’s a pretty straightforward process to set up heatmaps on your website. I’ll assume that you’re using WordPress, so simply follow the steps below.

1. Go to the CrazyEgg website.
2. Sign up or log in.
3. Hit ‘Create New’ and select ‘Snapshot’.
4. Decide on whether you want to create single or multiple snapshots.
5. Enter the URL for the snapshot, such as your homepage URL.
6. Enter the name and select the reason for creating the snapshot.
7. Select mobile or desktop, or both snapshots.
8. Hit ‘Next’ to review your snapshots.
9. Hit ‘Install Tracking Script’ and follow the instructions.
10. Once you’re all set to go, you should see your snapshots in your dashboard.

Of course, if this is your first time using CrazyEgg, you will have to wait a little while before you can view any significant data. I would recommend running your tests for 30 days or more if you can.

I would also recommend blocking your own IP under ‘Options’ so that you don’t end up accidentally tracking your own clicking and scrolling activity on your website, which will only give you skewed data at the end of the test.

Using the click heat maps and scrolling maps to improve your site

Now the fun part begins.

After you’ve collected enough data from your snapshots, spend some time analyzing it carefully. View both the click heat maps and scrolling activity.

Also, have a look at the confetti data which will show you clicks on a page from your visitors and the metrics for the clicks. Useful if you need to know where your visitors are coming from, new visitors vs old, etc.

The click heat maps can tell you where your visitors are clicking on your site or page, and scroll maps usually tell how far down a page the majority of users have scrolled.

If you have conversion elements on the pages you were tracking in CrazyEgg, for example, perhaps some CTA buttons on sales pages, or a form on your opt-in page, try and identify some important things, such as –

1. Are your users clicking on any of your conversion elements?
2. If they are clicking, but yet you have zero conversions to show, why is this?
3. If they are not clicking, how can you improve the page, copy, design and your CTA’s?

Case study: Improving my homepage conversion rate (Ongoing…)

Some time ago, I set up similar snapshots for the homepage of this website, shortly after redesigning, actually. Here’s the snapshot.

I ran the test for 34 days out of the 59 days that I originally planned to. The page received 255 visits. The majority of the clicks took place above the fold too.

Now, as you can see from the image above, the report shows quite a few clicks on the ‘About’, ‘Blog’, ‘Resources’, and ‘Contact Me’ links in the main navigation menu.

I also have quite a number of clicks to my portfolio page via the CTA button in the hero section, but hardly any on Start A Project button.

As for scrolling, again, the report suggested I needed to focus my attention on the 78% of users that were staying above the fold. So that’s the area I essentially planned to make most of the improvements on. (See images below)

What’s also interesting to note about the last image above, actually, is that my conversion CTA’s were in the region of the 58% popularity mark, so below the fold.

Now, after carefully analyzing everything and thinking of ways to improve my homepage, I decided that I wasn’t going to completely redesign but make significant changes.

Here’s what I came up with –

Here’s a rundown of what’s changed on the front page, and across my site.

1. Introduce new branding colors

The reds and greys that I originally used for the site, I actually brought over from my main blog at Magnet4Blogging, but it just hasn’t worked here, so it needed to go.

For the new branding colors, I decided to go for orange and blue/green (teal). I spent some time exploring the emotional triggers of color and found the two tones to be quite meaningful as well as stylish.

In web design color phycology, the Orange tones signified warmth, friendliness, whilst the Blue/Green tones signified a combination of ambition, growth, perspective, and positivity.

Changing the branding style took a little bit of time, especially with the menu areas, CTA buttons, bold and highlighted texts, and various elements to give the homepage some clarity and narrative. But, I think it works well from a visual perspective, anyway, we’ll have to wait and see when running some new snapshots and begin gathering new user-data.

2. ‘Personalized’ background hero image

I’m still using a cover image of myself because as an ambassador of my personal brand business, I think that’s extremely important.

I could quite simply use a stock photo, perhaps of a glossy office desk, or put up some sample websites that I’ve designed, but I don’t want my website to give the impression that I run a web design agency, which I don’t.

For now, though, I like the image of myself ‘genuinely’ working on holiday by the pool in Lanzarote, because of the fact that it kind of stands for everything that I do, it gives a sneak peek into my lifestyle as a freelancer, and what my long term goal is to achieve.

3. New CTA button text

The next change that I decided to make was to alter the call-to-action text inside of the button in the hero section from “Start A Project” to “Work With Me!”

It will be interesting to see how much of an impact this will have on user engagement if any.

4. Drop downs on menus

I read in this article the use of drop-down menus were not recommended in main website navigation. But I don’t think any design elements or features should not be ignored completely. A well-designed drop-down that helps to improve user experience can’t be bad, right? So, I decided to test with a very simple drop down block menu for desktop, particularly as I offer more than one service.

5. Reduce the height of the hero section

One last thing that I did was to reduce the actual height of the hero section by 60px (30px top and bottom).

The reason for doing that was so that I could pull the section that starts with ‘How can I help your business grow?’ into the majority of the red. In other words, above the fold and more into the top 75% popularity margin. See image below – New left – old right.

Running new user tests

Of course, I won’t know anything until I’ve set up some new tests, which I’m planning to do next.

I’m actually hoping the new changes will improve conversions from users going to my portfolio page and then clicking on the web design info link from there. Or visiting my contact page/form and filling out the inquiry form.

I’ve not yet tested any of those two pages, and so I think I will create some snapshots for them.

The blog and my about page seem to get a lot of clicks, so I’ll have to think of ways in which to capture new leads in each blog post. I’m yet to set up email marketing for this website to grow my email list, but I’m working on something, so hopefully soon.

Bookmark this post

I will come back to this post in the very near future with the outcome of those new tests and post about them here, so be sure to bookmark this page.

Are you planning on a redesign to improve your website conversions?

If you’re planning on a redesign to improve your website conversion rate, don’t do anything until you’ve at least taken some time to gather some click and scroll data. Make sure you investigate and cross-reference your heatmap reports with your Google Analytics reports too.

In my humble opinion, I think it’s a bad tactic to start any website redesign project without first having some valuable data and analytics to work with. Conversion design is all about doing just that, so best of luck.