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 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:
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:
A lot better.
Here’s the new Search again button added to the results page:
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):
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):
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:
Last 30 days heatmap of the 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 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:
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:
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…
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:
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/