Is your website bringing in the leads you need? If not, one of the reasons could be that you haven’t installed HotJar on your site. Hotjar is a great tool that allows you to understand how visitors are interacting with your website and gives you the information you need to make data-driven design changes that actually impact the bottom line. See how we used HotJar to improve our clients website since 2015. (Updated with 2018 design!)
Those who are familiar with Growth-Driven Design know that making design decisions based upon data, not personal preferences or how the competition has designed their website, is critical to having a website that generates leads. When designing high-conversion websites, we have learned that while best practices, current design trends and client feedback are all important, true conversion optimization comes from analyzing how hundreds or thousands of visitors actually use and navigate a website.
The first step to optimizing your website is to know which pages need attention. Tools such as Google Analytics give you key metrics on pages, such as:
- Page views
- Bounce rate
- Time on page
These types of metrics let you know which pages to focus on:
- Pages with a lot of traffic (high number of page views)
- Pages with low engagement (high bounce rate and low time on page)
The next step is to understand how visitors are using these pages. And this is where Hotjar comes in. Hotjar (yes, there is a free version!) allows you to understand how visitors are interacting with your high-traffic and low-engagement pages through heat maps that show you:
- What visitors are clicking
- How visitors are moving their cursors
- How far down visitors are scrolling
Here is an example of how we used HotJar for one of our wholesale clients, MyWholesaleFashion.com. In late 2015, we redesigned their website because their previous site was not mobile-friendly. After the redesign, their website looked like this:
We designed the homepage with two main sections:
Top (above the fold)—Large hero picture with their tagline as well as a listing of products
Bottom (below the fold)—Visual navigation of their product categories and a featured products section
After their new site went live, we placed Hotjar on the homepage to track visitor behavior. This is what we saw:
Looking at this clickmap, we found that:
- Except for the normal ecommerce buttons like “cart” and “my account,” visitors were not clicking on the top level text menu.
- On the large hero section that occupied the prime real estate of above the fold, virtually no one was clicking or interacting with this section. However, below the fold, visitors were using the visual icons to navigate to the product categories they were interested in.
- Visitors were not clicking on the featured products.
In 2016, we made changes to the homepage based on our findings in Hotjar.
Changes made to the site in 2016 were:
- We moved the visual navigation to above the fold.
- We eliminated “Featured Products.”
- We added coupons and a social media feed.
As a result, here is how visitors interacted with the 2016 redesign.
Visitors could now navigate to the product categories without scrolling, and we saw much higher click rates on the visual navigation buttons.
We also noticed that there was a large heat bloom in the text menu at the top. This was “New Items.” At the same time, we saw that only a few people were clicking on the “sales” items in the visual navigation.
So, in 2017, we made another adjustment to the homepage and replaced “sales” with “New Arrivals.”
In 2018 we made some minor changes (moved New Arrivals from the bottom to the top of page and added a banner). The major change came in December 2018 when we moved off of an old theme to a newer one that had better performance. Again we used HotJar to help us understand how to best redesign the site:
1) We saw that there were only a few categories that visitors were clicking on. So we simplified the visual menu and reduced the number of categories from ten to the top 3 plus new arrivals.
2) Not many people were clicking on the email offer, so we moved it to the bottom and added a section to display four new products.
The result of the GDD sprint for 2018 is shown below.
The strategy of using HotJar to understand and adapt to actual visitor behavior on the website allowed us to make design changes based upon data. This is one way we leverage the right technology in our Growth-Driven Web Design process to help our clients get more sales and leads from their websites.
You can read our Case Study for MyWhosaleFashion to learn how we also used inbound marketing techniques to help MyWholesaleFashion enjoy steady year-over-year growth from their Big Commerce store since 2012.