How we used Hotjar to change EVERYTHING

JT
Remote Circle
Published in
4 min readMar 29, 2019

Disclaimer — We’re not affiliated with Hotjar and this is not an advert for their product. There are other analysis products you can use, we just happen to use Hotjar 🤷‍♂️

Halò 👋

When we build things, we can get very attached to our creations, and this can lead us to think that everyone else will love it as much as us. When in fact, the opposite may be true. So when it comes to building a functional product (like a job board) it’s very easy to look at it only through our own eyes and just assume that everybody who is using it, finds it really intuitive and easy to use.

Turns out…that’s not the case.

Since we launched Remote Circle, we had Hotjar installed from the start, primarily to get feedback from our users. In the early stages, that was really useful — but as we grew, we started to find other tools within Hotjar more useful — these were Heatmaps and screen recordings!

In case you’re not familiar, heatmaps allow you to view some interesting info about your web pages in a visual way, such as how far people scroll on average or the most clicked areas. We were specifically interested in where people were clicking. We combined this with screen recordings which basically give you anonymised screen recordings of how your users interact with your site. Our conclusion? Everyone was using our site wrong! The first reaction is usually “how can they not get it?!?! It’s so simple!!!” But is it? It may be simple to us, but we designed it. Maybe there’s a reason users are not clicking on that button that you want them to click on. We analysed these things in detail and we discovered that the User Interface of our site was just not clear enough. Users weren’t getting it. And it wasn’t their fault. It was ours. We had to tweak, and tweak, and tweak. Until we ended up with what was basically a complete redesign.

Here is what it used to look like👇

And here’s what it looks like now👇

Firstly, the previous “save job” button was a black bookmark icon which you can see at the right-side of the first screenshot. Nobody clicked on it. Why? Because it doesn’t look clickable! Black is not a good colour for an un-clicked icon. It needs something gentler which then goes bolder once clicked. But alas, I’m not here to talk about design principles.

What else was wrong? Oh yeah, the jobs are a tiny thin strip in the middle of the page with lots of white space at either side! Why? We had all that room to play with 🤷‍♂️

The Sign up CTA button is below the filters making it look like a search button. People clicked on it, but only when they were trying to search for jobs, not when they were trying to sign up.

The header image distracted from the text overlay so it wasn’t getting read.

We have functions to let users save jobs and follow companies, but we had these lists on separate pages and users rarely visited them.

And don’t get me started on the mobile version! 🤦‍♂️

These are just a few of the things we learned from looking at how our users were using the site and were all things we would never have learned if we had ignored our users and built something that WE were happy with. But it’s not about us.

So all in all, here’s some of the things we have changed:

  • We changed the layout, making better use of the width of the page
  • Created a new mobile version
  • Made the “Save job” button look more like a button
  • Combined the jobs page, saved jobs list and companies you follow lists onto the main page
  • Made the Sign up CTA much smaller and moved it to a more logical place
  • Changed the header image to a block colour to make text more legible and changed the wording to make it clearer

And that’s just the homepage. We carried these changes through the entire site. It was a pretty major overhaul.

The result?

Higher engagement with the site in general. Lower bounce rate, More time spent on site, more page views etc.

A big win as far as we were concerned.

And now that we’ve made these changes, it doesn’t mean that we can rest. It’s an ongoing process. We need to keep monitoring, keep tweaking. There’s always room for improvement. Always!

We’d love to hear your thoughts on the new design, so let us know in the comments below or on Twitter.

Hotjar also have a useful guide on user-driven website analysis which you may find useful. You can check that out here 👉 https://www.hotjar.com/website-analysis/.

Peace ✌️

JT

--

--