heat map heatmapping

Website Benefits of Heatmapping

Heatmapping allows you to visualize where your website visitors click. It allows you to understand what content they view. What they interact with. What works, and what causes frustration. This allows you – the website owner – to make informed decisions and select upgrades that you know will have a positive impact on the user experience.

It is always best to make website upgrades backed by research & data.

You’ll love this approach – it is so much more fruitful than “going off a gut feeling”.

We recently completed a round of heatmapping for several pages on the CutCardStock Website – one of our favorite customers. Cindy wanted to know if the upgrades we had made the homepage were getting the interaction that we all anticipated. Specifically, the new video they had professionally produced and placed prominently – were people actually clicking it or was this prime page real estate being wasted? Here’s what the page looked like:

Shopify Homepage Edits Heatmapping
The CutCardStock homepage after our first round of edits to display the video and new special offers.

Now, after tracking visitor activity, we were able to generate a “confetti” overlay that looked like this. This clearly showed us that the most popular areas on the homepage were search, followed by log in (for order placement and tracking), followed by card stock and the cart itself:

Shopify Heatmapping Example
Heatmapping “confetti” overlay shows EXACTLY what the customers are most interested in.

We went through the data on a call. We discussed the most popular items – good, good… but what about that video? Well, take a look for yourself – virtually untouched. This clear, direct data allowed us to make the following decisions and upgrades with 99.9% certainty we were doing the right thing:

  1. The video belongs on the About Us page (we plan to overhaul that next).
  2. We should create a strong call to action in this top box and get as many visitors as we can to the page that allows them to become our customer with the smallest possible investment – right now it’s a numbers game (later we can refine this to target high dollar customers).
  3. Let’s add a strong orange section (a complimentary color to blue) below the fold that really stands out to show people some of the $1.99 special items without requiring them to click anything.
  4. Finally, let’s make sure that the CutCardStock team can edit all of this themselves, without hiring us to make minor changes. This allows them to adapt quickly.

The upgrades look like this:

heatmapping adjustments shopify
New primary sections and promotions given the spotlight – front and center!

Once a heatmapping campaign concludes – where do you go from there? Well, in this case we plan to follow up this work with another heatmapping campaign, to track it again and also dig deeper into some of the other Shopify collection pages that we overhauled to see how they perform. We want to make sure that these homepage edits are working for the customer, along with the other sections of the site.

Heatmapping campaigns like this ensure a greater website return. They take time & effort, but the knowledge and insight you can gain about your audience – that’s priceless.

Let’s get started.

Cheers.

Comments

Cecilia Marquez
ShopSaintCloud.com
[Shopify Plus Website Design & Development]

“Great work, great communication, great prices. Very happy and highly recommend!”