How I analyze a page using Hotjar

There are plenty of tutorials and guides on how to install and use Hotjar, this is a case study on exactly how I’m using it for my side projects and how found out some crazy important technical issues.

It all started when I redesigned my website for The Bootstrapped Way, one of the side projects that I absolutely love.

On the left, you can see the old design, just 3 sections with minimal information. On the right is the new design, with all the best practices in terms of conversion design (I’m still missing some reviews).

When and where does Hotjar come in?

Besides looking in Google Analytics at the high-level metrics, I wanted to understand exactly what section is the most appealing to them and which doesn’t make sense. You can find this by looking at the page depth and also at the recordings.

The scroll heatmap looks really promising, with over 90% seeing the previews of the database and over 50% of the visitors making it to the bottom of the page, both on desktop and mobile.

Next, I wanted to understand which sections they interact with the most, basically where they click. This can be both a good thing - it shows further interest, and a bad thing - it shows unclear UI, non-clickable elements they would expect to interact with.

And now, the fun part is the video recordings.

The pleasant surprise is what attention each element in the hero section is getting. The visitors go through and read each bullet point.

Another AHA moment was looking at the pricing table, the option to duplicate and edit the database is very important for them. A good topic to think about.

Here I actually found that my discount codes weren’t actually working, I forgot to activate them. 😱

Another interesting moment was noticing how fast some people went to the checkout page. It shows that they understood the product really fast and are interested in buying it.

Here is the importance of an FAQ (Frequently Asked Questions)

I didn’t give it too much thought to this section before but listing the most frequently asked question gets a lot of attention. This person actually went through almost every question one by one.

You can also double-check if the copy makes sense for your target by looking at the interactions (clicks). This section definitely got their attention. 😁

So, to summarize my findings:

• the structure is good enough, as the scroll depth is above 50%
• the hero section has a huge impact as it sets the expectations right
• the Airtable preview is really helpful, and it makes them read more
• having a section that agitates the problem and another one to show the solution is working far better than showing only a preview
• having the option to duplicate and edit the Airtable database is really important for them
• and, of course, making sure the discount codes actually work 😅