Learn / Case Studies / Materials Market

Back to case studies

How to triple conversions in just one month

After spending 20 minutes watching Hotjar each morning, Andrew, Operations Director at Materials Market tripled his site’s conversion rate. Here’s how:

E-Commerce
How to improve conversion
How to spot bugs
UX designer

Last updated

5 Jan 2022

Features used

Heatmaps
Recordings

Materials Market is a website that helps connect construction material suppliers with customers across the UK. Andrew co-founded the company in 2020 with his business partner, Samuel, after struggling to contact construction suppliers.

Samuel and Andrew experienced a daily struggle contacting supplier after supplier, asking for the best price and suitable delivery times. Finally, after years of frustration, Samuel had a eureka moment: why not create an online platform where customers can enquire with multiple suppliers at once to get the best deal? That’s when Materials Market was born.

The company has grown dramatically, making £500,000 online sales in their first six months. Plus, Andrew and Samuel have now taken on their first full-time member of staff.

A few months back, Andrew installed Hotjar to see how users were interacting with each page.

Each morning, he’d wake up, make breakfast (typically porridge or a smoothie) and spend 20 minutes watching Hotjar. After a few days, he’d identified three areas for improvement:

 

  1. Confusing call to action:

    CTAs were obscured on mobile and confusing on desktop

  2. Issues in the checkout flow:

    drop-offs were far higher than expected

  3. Trouble with the cookie policy:

    too many visitors saw the policy and bounced

 Using Hotjar to identify and address these issues, Andrew managed to triple the conversion rate from 0.5% to 1.6% in just one month. Here’s how he did it:

How tweaking a button helped triple sales

Andrew starts his workday with the same routine. “Every day, I open up Hotjar, watch 20 minutes of Recordings to see how customers interact with the site and see if they have any issues.”

Back in February, the team launched a new feature called 'instant purchase'. Before, visitors could only reach out to suppliers to get quotes on the site. But now, they could also purchase items directly.

#In February, the team added a second CTA to the site. here’s how the homepage changed
In February, the team added a second CTA to the site. here’s how the homepage changed

“We had two CTAs, and it was clearly a little confusing. I’d watch Hotjar Recordings and see users getting confused. They’d hover over the CTA before leaving, or click on one before heading back and exiting the site.”

Hotjar revealed three problems:

1) Users didn’t know what to pick:

Recordings showed users hovering over the CTA with uncertainty.

2) Users wanted to see delivery times:

Other Recordings showed users clicking 'checkout' just to see the delivery time before heading back.

3) Users on mobile didn’t see the CTA:

Heatmaps showed that very few users scrolled far enough to see the CTA.

#Hotjar heatmaps revealing how mobile users couldn’t see the CTA above the fold
Hotjar heatmaps revealing how mobile users couldn’t see the CTA above the fold

I’d spot a problem in Recordings and then go and investigate it in Heatmaps. Both tools are useful to see where users are scrolling and what they’re clicking on. 

Andrew Haehn
Operations Director Materials Market

Materials Market was only operating for a few months at this point, so it was no surprise to Andrew that there were a few issues with the site. But Hotjar helped him prioritize his work, focusing on core problems that were affecting many users.

Andrew got to work making several changes, not only to the CTA but across the site. Here’s how the website changed:

  • Changed the color of the two CTAs so they looked different

  • Moved the estimated delivery date to before the checkout

  • Raised the CTA higher up the page on mobile

  • Changed the font and design of the CTA to reduce cognitive load

  • Added a TrustPilot rating to reduce perceived risk

#Small changes on the checkout page had a major impact
Small changes on the checkout page had a major impact

Andrew hoped to see a slight change in conversion rate, but the results beat all expectations.

Our conversion rate went from 0.5% to 1.6% for visitors making a payment in just one month. We were really surprised it happened that quickly—it was like night and day. 

Andrew Haehn
Operations Director Materials Market

0.5% to 1.6% might not seem like much, but for a company like Materials Market, making over £1,000,000 a year, that increase represents tens of thousands in additional revenue.

The thing is, Andrew’s no slouch. He’s an intelligent guy. So I wondered how many of these changes he would have known to make on his own. Did he need Hotjar to inspire these improvements?

“Hotjar has been instrumental in helping us make changes quickly. Sometimes there were things we intuitively knew, but Hotjar helped us prioritize and make the important changes straight away.”

Why 1 in 4 users left at checkout, and how Andrew fixed it

While watching Hotjar Recordings one morning, Andrew spotted a problem. Recording after recording showed users putting items in their basket, heading to checkout, then leaving.

It’s the worst nightmare for an ecommerce site. And it happened with one in every four visitors.

“With Hotjar Recordings, I saw that people were just getting confused. It looked like there were too many steps in the process. We were asking people to do too much just to check out.”

The previous checkout flow involved forcing users to set up an account and add their information over multiple pages. Andrew knew this was a blocker. He could see people dropping out, so he changed it. Here are the improvements he made:

Old Checkout Journey ❌

  1. Add items to the basket

  2. Click Checkout

  3. Sign up for an account (page 1/3)

  4. Add personal details (page 2/3)

  5. Leave delivery details (page 3/3)

  6. Add card details

  7. Finish Checkout

New Checkout Journey ✅

  1. Add items to the basket

  2. Click Checkout

  3. Add your details to secure checkout (on a pop-up modal)

  4. Finish Checkout

There are three crucial changes Andrew made here:

  • He reduced the number of steps—a quick-fire way to improve conversions

  • He collected all customer details on one pop-up modal rather than several different pages, helping reduce the cognitive load

 But my favorite improvement:

  • A subtle reframing: he changed the wording of the checkout flow

 Previously the checkout flow stated, “Sign up”. Hotjar Recordings showed people getting confused and leaving after seeing this.

So Andrew changed the copy to “Secure Checkout”. This simple reframing put the user at ease, and they were motivated to add their details to help secure the purchase.

All three changes had a significant impact.

Before, one in four users dropped at checkout. Now it’s only 1 in 25 users.

#With some new copy, a pop-over modal, and fewer steps, Andrew decreased the checkout drop rate
With some new copy, a pop-over modal, and fewer steps, Andrew decreased the checkout drop rate

Seeing the site through the users’ eyes

 When Andrew sees a cookie banner, he accepts it every time. It’s almost automatic. He’s so familiar with them that he knows what to click without thinking.

“I must have watched 20 or 30 recordings where users saw the cookie policy and got confused. They didn’t know what to click. I just accept them automatically, so I was surprised to see this.”

Andrew may have never noticed this as a problem on his own—after all, it never bothered him.

But your users aren’t you. They’re different people with different behaviors. Of course, we all know this intuitively, but watching recordings helps us truly understand it.

“These are fundamental things that I might not have considered—but Hotjar doesn’t lie. I could see that these customers were struggling.”

Armed with this insight, Andrew was able to implement four core changes to the cookies banner:

  1. He made the button 30% bigger

  2. He shifted the banner higher up the page

  3. He changed the color of the button

  4. He changed the copy

 These are minor tweaks, but they had a significant impact. Previously Andrew would watch 20 to 30 recordings of users struggling. Since making the changes, he hasn’t seen a single user get stuck.

#Updated copy on the cookie banner
Updated copy on the cookie banner

Without Hotjar, there’s no way I would have noticed this issue. It wasn’t visible in the data, and it’s not something I would have expected to see. Hotjar helped me see how our visitors experienced the site. Now I can spot issues I would never have seen before. 

Andrew Haehn
Operations Director Materials Market

Andrew’s top tip for other Hotjar users

 It’s hard not to be impressed by Andrew’s results.

Tripling a site’s conversion rate in just a month is seriously impressive. Especially when you consider that website optimization isn’t even Andrew’s full-time role.

As an Operations Director, he needs to spend most of his time running the business’s operations, doing tasks like hiring staff, organizing resources, and managing agency partners. Despite all these responsibilities, he’s still managed to make considerable improvements to the website.

So, what’s his secret? How does he prioritize his time to spot these improvements? Here’s what he told me.

“My top tip is to sort recordings by Relevance.”

#Andrew sorts by relevance to find recordings worth watching
Andrew sorts by relevance to find recordings worth watching

“The Relevance score helps me find the most vital recordings to watch. I only tend to watch the high or very highly relevant recordings—I won’t watch recordings ranked as moderate relevance or below.”

Andrew only has 20 minutes to watch recordings. He needs to focus on the crucial sessions. Relevance acts as a sieve, filtering out the irrelevant, low-value recordings and only showing the important ones. It helps Andrew use his time wisely and get the most value out of Hotjar.

Hotjar has been instrumental in guiding us to make the right changes quickly. It helps us determine urgency and prioritize. 

Andrew Haehn
Operations Director Materials Market

Andrew’s made dramatic improvements to his site, but he’s modest with the performance. “I don’t even have a tech background!” he tells me before candidly sharing that he gets most of his inspiration by checking out other successful sites like Amazon.

That said, it’s clear that Andrew’s work is noteworthy. It’s inspired us to rethink some aspects of Hotjar’s site and hopefully will inspire you too. Here’s a summary of what he achieved with Hotjar:

  1. Boosted conversion rate from 0.5% to 1.6% in just one month

  2. Generated £10,000+ more in yearly revenue

  3. Tweaked the cookie banner to stop dozens of users from bouncing

  4. Redesigned the checkout flow to decrease exits by 86%

Breakfast + 20 minutes of Hotjar = 3x conversion rate

It took Andrew just 10 minutes to start collecting data on his site. Sign up for free, with no credit card required, and see how you could improve your conversion rate.