Hotjar logo on heatmap

How we use Hotjar to improve our UX 

UX is hard. From our experience, users never do what you expect them to.

We build products around defined user journeys. But users always do the unexpected.

Good UX guides users through the product journey. It’s intuitive, effortless and simple. It’s like making the user fall into the pit of success.  It’s an area we’ve been trying to improve for a while. 

The problem is we’re not UX experts. Far from it if we’re honest 😀 

This is why we use the tool Hotjar.  

It lets us visualize what our users are doing so even we can see problems or potential improvements. 

Here are a couple of stories of discovery, ideation and evaluation we’ve been through by using Hotjar’s visualizations. 

Quick Search

Quick search is our online form for completing KYC, AML and Document checks. 

By watching the Hotjar recordings of users using Quick search we realized how inefficient it was.  

We discovered users like to perform multiple checks one after another. But the product was not optimized for this purpose. It takes way too many clicks to perform another check after the first one. Users must go through multiple steps instead of going straight back to the form. 

This is a diagram of the user journey completing multiple checks: 

User flow of multiple quick searches

You can see that’s a lot of clicks needed. That’s a problem… 

Search again button 

Our idea was to introduce a Search Again button to cut out as many of the clicks as possible.  

Adding this button will simplify the journey. Which will save our users a lot of time. 

This is the new user journey from the new button: 

The new user flow of multiple quick searches

A lot better. 

Here’s the new Search again button added to the results page: 

The new search again button

Evaluation

After a period of time, we can look back at Hotjar to see if it has had the desired effect. 

Ideally, we would take every user recording that has completed multiple quick searches. Then calculate the percentage of them who have used the search again button. But unfortunately, Hotjar doesn’t let you export this data… very annoying. 

Instead, we will have to use the heat maps feature. It’s less hard data-driven but we should get an idea of how the button is doing. Hopefully, our new button is getting some clicks. 

This is the heatmap before we added the button (Jan 1st to Jan 31st): 

Heatmap of the current quick search results page

The bottom section which is the actual results is getting the most clicks.  

We don’t care about that right now. We need to look at the top section, specifically the breadcrumbs and menu bar. This is how the user is currently going back to do another search. Both are getting significant clicks. 

This is the heatmap after the change (April 1st to April 30th): 

Heatmap of the new quick search results page with Search Again button

It seems our hunch was right and suddenly we have another patch of dark red! 

Our users are loving the new button. The bread crumb usage has gone down and our new button is getting tones of clicks. They are saving time and should be abit happier 🙂 

The Hotjar recordings changed our perception of how Quick search was used. And now the heatmaps confirm our thoughts. It’s incredibly satisfying to visually see how our idea is changing the way our users use our product. 

Most recent profile buttons 

Another idea we had from the recordings was to optimize the quick search profile selection.  

Before a user can complete a search, they must select a profile. Currently, this is done through a drop-down menu. The drop-down works fine but it does require a few more clicks than a button. A click to open the menu and a click to choose the option.  

This could get annoying if the user mostly uses the same profile. 

So, our idea was to some buttons for the user to select the profiles they have recently used. This saves them time by not having to click the drop-down. 

Here are the buttons in action: 

The new profile selection buttons

Last 30 days heatmap of the buttons: 

The heatmap of the profile selection buttons

2.83% of clicks on new buttons. But still, 7.34% of clicks used the old dropdown.

It could be taking a while for users to notice the new buttons.

But maybe there are some things we can do to the button styling. Making the buttons more distinctive and intuitive to use.

Monitoring 

Monitoring is what we call our ongoing AML screening product. It generates Alerts that can be viewed from our online Portal. This is next target for our improvements.  

This time we start with something we noticed on the page heatmap: 

Heatmap of the monitoring alert page

The heatmap has two areas of interest.  

The first area is quite a few clicks on a static piece of text.  

This text is the ID of the record the alert has matched against. A reason why could be that our users are copying this text to enter it into their own systems.  

If this is a common task let’s make it easier! A simple improvement is to add a copy button: 

The new copy button

Simple to add and reduces the number of clicks needed from our users. Perfect. 

The second area of interest is a big red blob at the bottom of the page. There’s an explanation for this: it’s a toggle button.  

Most of the Alert information is hidden by default. What’s the point of this if the user needs to expand it to deal with the alert? Users will basically need to click it every time they view an alert… 

Frustrated gif

I think the original designers just liked using toggles…  

Again, we have a simple fix for this, remove the toggle and have the information open: 

No more toggles!

Much cleaner! 

These small changes might seem insignificant and not worth doing. But if your job involved using this page and clicking that toggle every day these changes are going to make a big difference.  

Small changes to make the lives of our users smoother are always worth it. 

Thanks for reading the article, you can find more on my personal blog: https://liamhunt.blog/

Leave a Reply

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Scroll to Top