How to Optimise your Webflow Website with Heatmaps

At its core, your website should be nothing more than a machine that cranks out leads, sign-ups, or sales. Rather than betting on replacing the whole machine for a shiny new one, you can get much more value out of optimising it, based on actual user data.

If you don't know the data on your website, then you can't say whether it's working or not.

Optimising your website helps you improve your website on an iterative basis, constantly tweaking and improving how it works and how a customer uses it.

Heatmaps are a great way to get a better idea of how users are using your website by seeing what sections or elements they are focusing on most commonly.

Once your heatmap is set up, you can see the data on what your users are hovering over, clicking on, and at what point on the page they are most commonly scrolling to.

You can fix issues of customers thinking an element is clickable when it's not, not focusing on an important section by making it more prominent, or any other design insights that come up through observing your website heatmap.

It takes less than 5 minutes to set up on a Webflow website. Once set up, it takes a couple of weeks for your heatmap to fill up and show how customers navigate it, and the longer you wait, the more confident you can be that your data is accurate.

‍

How to set up heatmaps

We are going to use Hotjar to setup heatmaps, as it's free and super easy to use. You will want to first create an account and add your website.

Then find the tracking code and copy it.

We are going to paste this code in the head code section of the Webflow website in the project settings. After adding it and republishing your website, you can start to configure your heatmap in Hotjar.

If you're not sure what pages to track, start with the homepage and also check on Google Analytics what other pages are visited most commonly. Otherwise pick a page you want to know the usage of.

Jump into heatmaps in Hotjar, click on"New Heatmap", and give it a name.

To start we are just going to run a manual screenshot, meaning it will stop recording after 1000 page views. You can always update your Hotjar account once you need more data.

Now you add the url of the page you want to record. You can also record a set of pages such as blog posts or product pages using the "similar pages" option. In this case the url you would add would look like "website.com/blog/" so that it records all pages under blog.

In the advanced options you can remove certain elements from the screenshot, such as pop-ups that block the screenshot. You can also change the website screenshot to a manual image if the website screenshot doesn't record properly.

Your heatmap is now fully set up, but setting up this new tool is only half of the journey.

‍

After your heatmap is set up

Once it's set up, you want to leave it for a couple of weeks, or until you get an email that the snapshot of 1,000 views is complete. When you do, you can go through and see what sections and elements users are focusing on and clicking most frequently.

This information alone is insightful, but to take it one step further you can write down your hypothesis and potential solution for any section where you feel like it could be changed, improved, or something could be added.

For example: Users seem to be focusing the most on the first question out of the frequently asked questions, "How much will my website cost?". My hypothesis is that they want to know how much they will be spending before they have to reach out to me. A solution for this is to build a dedicated pricing page breaking down the different prices for different services, or to just add a price estimate under the title of each service on my homepage.

Once you've written a bunch of hypotheses for why users interact a certain way to different sections, you can make your theory concrete by running a user test on usertesting.com and asking a question or giving a task related to each hypothesis.

If you feel time bound or feel confident about what the data means, then feel free to skip user testing and go straight onto making updates to your website.

And there you have it, the full rundown on heatmaps. You can rinse and repeat this process every month or so to constantly iterate on your website and improve it to convert more customers.

Since it's free you won't be running to the bank anytime soon, but if you find it valuable for your business you can always upgrade your account to a paid plan and increase the amount of users allowed on your heatmaps.