Learn / Guides / Heatmaps guide
Heatmap case studies
Heat maps are a powerful tool, but don’t just take our word for it: here is a selection of case studies and success stories to get you inspired.
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.
A 5-minute fix that improved conversion by 40%
The context: Taskworld is a project management solution that relies on its sign-up page to convert leads into users and customers. The team wanted to understand how people were interacting with the page and find opportunities for improvement, so they placed a heat map on it:
What the heatmap analysis revealed: the click map revealed three issues. Can you spot them?
Under-used CTA: despite the page being specifically for first-time users, the main ‘sign up’ CTA got clicked less than the ‘sign in’ link (where the red blob is, at the bottom)
Field drop-off: each of the five mandatory fields got progressively less attention, giving people several opportunities to abandon the page before completing the process
Timezone blocker: the mandatory Select Time Zone field was getting bypassed
The results: in just 5 minutes, Taskworld removed the ‘sign in’ option, re-organized the page around one CTA, and simplified the fields from five to just ONE: the email id. And with this, conversion rate increased by 40% and drop-offs in the process were reduced by 4.5%.
...quite good for a 5-minute job!
→ Read the full case study
Understanding how to optimize a homepage for sign-ups
The context: The team at Bannersnack, an online banner maker & design tool, had been using web analytics tools (think Google Analytics) to track and measure traffic, but didn’t have a very clear picture of how people were actually interacting with the website—which meant they didn’t know where to start to improve conversions.
What the heatmap analysis revealed: a set of heatmaps placed on the homepage indicated that people were interacting with additional page elements more than with the main CTA:
The results: based on the top-level insight, the team ran a test using a bigger CTA button and extra contrast—and increased sign-ups by 25% in the process.
→ Read the full story
Improving landing pages through data and A/B testing
The context: Netherlands-based CCV Shop creates and hosts online storefronts to help over 17,000 entrepreneurs run their e-commerce stores. CCV Shop generates leads through landing pages, so the UX team wanted to understand their prospective customers better and make data-informed changes to increase conversions.
What the analysis revealed: CCV Shop used heatmaps to see the big picture of how customers were behaving on the main landing pages—where they were clicking in aggregate, how far they scrolled, and what the interaction with various page elements looked like:
They paired heatmaps with other behavior tools, particularly session recordings, to really zoom into individual behavior on the landing pages and get a clearer context of the behavior they were seeing in the heatmaps; they also started seeing small bugs and issues that needed fixing.
The results: combining the information they received from heatmaps and other sources, CCV Shop could formulate testable hypotheses, run A/B tests, and implement successful changes. Through the process, they increased the conversion rate on their marketing website by 38%, from 1.3% to 1.8%—which got them really close to reaching their 2% conversion goal.
→ Read the full story
Increasing mobile conversion rate by 63%
The context: UK-based digital agency Epiphany was tasked with improving the website of their client Time4sleep, an online retailer of beds and bedroom furniture with 200,000+ sessions/month and a large mobile audience.
What the analysis revealed: the team used heatmaps in combination with other tools, such as Google Analytics, Recordings, and Polls (more on this below), to paint a complete picture of how people interacted with the website. Data collected from these sources helped them formulate a specific diagnosis: the existing category pages were not helping people find what they needed, and a new page structure was required.
The heatmap on the left shows what the mobile category page used to look like. See the gradual change in color? It means people tended to scroll really deep down the page, but this was not a good thing: visitors were scrolling not because they enjoyed the content, but because they could not find what they were looking for.
The heatmap confirmed what data from other sources was telling Epiphany, and the team re-organized the page with a new filtering system at the top. That’s the heatmap on the right: in comparison, now far fewer people are scrolling to the bottom because they are finding what they needed very quickly at the top of the page.
The results: with this and other changes that involved separate SEO, CRO, design, content, and PR teams, Epiphany tested different versions of the page and achieved an overall increase in conversion rate of +19.7%. But the real focus was mobile usage: and there, Epiphany gave Time4Sleep an impressive +63% increase in mobile conversion rate.
→ Read the full story on Hotjar's blog
