marketing website design growth-driven design user experience heatmapping

You’ve spent time (and money) building a pretty awesome website. You’ve written all new content, integrated some fancy images, and decided to go with a unique form of navigation. You’re confident that your site is far superior to your competitors’ and that you’ll see leads and sales increase from its new design.

But within days you realize there’s an issue. Sales have slowed, support calls have increased, and your site bounce rate is racing towards the sky (you are monitoring website analytics right?). This sudden shift correlates directly with the launch of the new site, but how could your digital Mona Lisa cause such a travesty? After all, the site is B-E-A-UTIFUL.

You decide to start crawling through your web analytics data. The bounce rate is obviously concerning and your product and service pages are starting to lose traffic. But besides that, you’re feeling pretty clueless. Traffic is making it to the site, but isn’t staying - what is going on!?

It’s time to take a closer look at your web visitors’ behavior.

It’s time…

to heatmap.


What is heatmapping?

Heatmapping is a visual map of user interaction, similar to an infrared image (or heat vision) where warmer objects appear red, orange, and yellow and cooler objects appear green, blue, indigo, and violet (remember your ROYGBIV?). There are several types of interaction and engagement you can monitor with website heat mapping reports - such as clicks, scrolls, and eye tracking - that can be used to measure the effectiveness of a website. In the case of a click heatmap (in which a colored map is overlaid on top of the site), areas of a site that are more heavily clicked appear as warmer colors (yellow to red) and areas of a site that are rarely clicked appear cooler (green to violet, or black when something has never been clicked).

Heatmapping can increase your website conversion rates

Your website exists for a purpose - whether it’s to sell a product, raise awareness, or promote prospect and customer interaction. No matter the result you’re looking to generate, you should be utilizing some type of heat mapping tool (Crazy Egg is one of our personal favorites) to ensure your site isn’t suffering from the dreaded poor user experience.

So how can heat mapping help?

1.) Streamline your navigation

If you want to promote user engagement, the navigability of your website is critically important. Heatmapping will help identify the engagement with your site navigation - what’s being clicked and what isn’t. Is your navigation bar in an awkward location or difficult to identify? If there isn’t much interaction, your users may be missing a core component of your website.

On the other hand, if you find that certain portions of your navigation are clicked much more frequently than others, you may want to think about rearranging your nav. Consider placing the most clicked buttons to the left in the nav (for languages that read left to right) or renaming your less clicked buttons to see if you can generate an uplift in clicks. You want to know where users are clicking and what isn’t working.

2.) Identify the black holes

Even the most incredible websites will have areas that are less engaged. Using a scroll heatmap, you can identify how far users typically scroll on a page and where they stop. When looking at your site homepage, for instance - are you finding that most of the time spent on page is above the fold (the area first loaded, before you need to scroll down)? If so, make sure the most important parts of your homepage are appearing above the fold where the users are already looking.

Sometimes you’ll find that the farther a user has to scroll, the less interaction you’ll see - with some portions appearing as complete voids of scrolling and interaction. Once you reach the footer, the scroll heatmap will typically appear warmer as it is a natural stopping point for users.

3.) Fix your shopping cart

Do you have an ecommerce website? If so, few site components are more important than your checkout experience. Cart abandonment is a major issue for ecommerce websites, averaging 68.63% according to one study. Many users abandon their purchase transaction because of issues that arise during checkout - such as a confusing or misleading checkout process.

Are your users getting confused and leaving your site with a loaded cart? Could there be anything more frustrating or problematic for an ecommerce site?!! Is it unclear how to progress through the cart checkout? A click heatmap will help answer these questions.

4.) Evaluate your Calls To Action (CTAs)

Have you written some amazing CTA copy and designed visually compelling CTA buttons but they just isn’t driving the engagement you hoped? There’s a high chance that CTA placement is interfering with your interaction. Is the CTA image not standing out? Place a heatmap on the page, and measure the engagement. If the CTA isn’t being clicked, try moving its placement, changing the copy, or switching out the graphic. The heatmap will help identify if there is any uplift in interaction - and hopefully you’ll gain some measurable results.

Growth-driven design

At Stratus, we believe in growth-driven design, a website design methodology that treats your website as a living, breathing mechanism rather than simply a digital asset with a starting and stopping point. While a traditional website redesign is still the right option for some companies, growth-driven design, a more modern redesign approach, has many benefits as well! By placing a heatmap on an existing website, we can identify optimally-performing parts of the site and also areas of great concern or weakness. From there, we can make intelligent and data-driven recommendations for increasing conversions, leads, engagement, purchases, inquries, etc. - whatever your website goal is, heatmapping data and growth-driven website design can get you closer to it. 

Are you interested in learning how growth-driven design can increase conversions on your site, and bring in more business? Take a look at our free guide, "An Introduction to Growth-Driven Design," and if you have any questions about how you can use heatmapping or growth-driven design to increase your website ROI, give us a shout!

Request a Website Consultation

Topics:   marketing website design growth-driven design user experience heatmapping