The Tiny Layout Tweak That Led to 20% More Conversions [Test Results]

One tiny little layout change netted us an almost 20% increase in on-page conversions.

They say a butterfly flapping its wings can cause a rainstorm on the other side of the Earth. Well, today’s story makes me think that maybe that’s true.

Conjurer of conversion, Rebecca Hinton, is back with another test you can try for yourself. This time it’s all about social proof and where it belongs on your page.

But before you jump straight to the how-to, I’ll also cover why you shouldn’t run off and do this without testing it first.

Butterflies and Best Practices

It’s pretty non-controversial for both B2Cs and B2Bs to add social proof to their websites in order to boost conversion, right?

You know what I’m talking about. Testimonials from happy customers. The logos of your biggest clients. Photos of your legions of fans gleefully offering up their firstborn children. (Too far?)

So why is social proof always tucked away at the bottom of the page? Or hidden on its own page like some secret Victorian wife in the attic?

“While social proof is helpful, chances are it’s not what your visitors came for. And you don’t want to push what they came for right out of their radar.”

That’s Rebecca Hinton, the CRO strategist behind this and many other incredible conversion optimization successes at HubSpot. (If you’ve been following this column, you’ll know Rebecca’s also responsible for the test that boosted paid ad CVR by 11%. And I’m certain this won’t be the last one I share. She’s that good.)

But while her point makes perfect sense, it poses a conundrum: Visitors actually need to, y’know, see all those testimonials in order for them to work.

“According to heat maps, only 50% of users scrolled far enough to see the social proof,” Rebecca explains.

But work it does! Despite the fact that only half of our visitors saw them, the social proof sliders were still the second and third most-clicked elements on these landing pages.

So pop quiz, hotshot. If you move your social proof higher on the page, it pushes your marketing content down. But if you don’t, nobody sees it. What do you do? What do you do?

Split Testing the Split

Whenever we have a dilemma, Rebecca’s answer will always be: Test it and find out.

For the control group, she kept the page as it was, with a social proof module containing both customer logos and written testimonials near the bottom of the page.

For Variant B, our CRO team separated the two. The customer logos became a small and unintrusive slider tucked right up under the hero banner, while the testimonial portion stayed near the bottom of the page.

This would hopefully strike the best of both worlds: More visitors would see some form of social proof, but the slim line of logos wouldn’t push our marketing content down too far.

But is a small line of logos really enough to make a difference?

Turns out, the answer is not only “yes,” but a 19.5% increase in software signups that says “hell yes.”

Rebecca says it with a little more tact.

“Putting a band with customer logos lends an air of legitimacy. Oh, they have customers with logos that I recognize? That builds trust.”

Now, some number of you are ready to run off and slap some logos on your site just because “HubSpot said so.” So here’s where I share the scary part of the story to convince you to test it first.

The Mysterious Variant C

Rebecca had a hunch she could do even better, so she took a bigger swing with Variant C.

In this version, the logos still moved up to the top of the page, but she swapped the customer testimonials at the bottom for data points about customer success. Think of brief stats like “After 1 year, HubSpot customers closed 55% more deals.”

“And I thought, incorrectly, that this was going to outperform the testimonials,” she explains with grace and good humor. “Because when I read them, I find them to be very compelling. You attract 114% more website traffic. You generate 129% more inbound leads. To me, that’s compelling. That’s exactly what I want. Let me sign up!”

Turns out that the opposite was true. Variant C reduced conversion by nearly 10%. Oof.

Rebecca believes that the negative result is due to the fact that testimonials are from customers, while data points come from the company itself.

“People trust people more than they trust companies,” she says. “They have that healthy skepticism, which is totally fair. And that’s why we test, right?”

And that’s why you should test it, too.

Tiny Tweak Takeaways

If you’re ready to try this out, Rebecca’s got some tips for you to consider.

1. Start with an insight.

“I always think my ideas are good because they’re mine. But my idea was to add the customer stats, and that lost,” she shrugs. “What helps is to have an insight based on data, rather than a hunch.”

In this case, the data-backed insight for the test came from checking out heat maps. When Rebecca noticed that only 50% of our visitors saw the social proof module, the test she devised was a logical next step.

So instead of simply mimicking this test, take a look at your data and see what insights might inform a brand new test.

2. Consider visitor intent.

“If we were targeting a page that had a lot of returning traffic, or was deeper in someone’s customer journey, I would not expect social proof to be as effective.”

Part of the reason that this test worked was because it was on pages that targeted brand-new visitors. If your target page is talking to returning customers, they may not care about logos or the recommendations of other customers. That audience might actually be swayed by data points instead.

The only way to know is to consider what a visitor expects to encounter on a page like that, and then test, test, test.

3. Double-check your results after implementation.

“If we get a test win, we implement, then we wait two weeks,” Rebecca explains. “Then we find the data before the test launched (because you don’t want to include test data) and we compare the before and after period.”

Don’t think of this as a second test — it doesn’t need to be that scientific. This is more about making sure there are no unintended consequences.

“We’re not looking to match up with the original test results. That’s not realistic or reasonable. There are too many external factors. All we’re looking for is to see that your results directionally line up.”

Since your newly made changes will probably affect a wider range of pages than just your test, there could be room for unforeseen problems.

“If you don’t do that before and after check, issues can fester for months.”

How to Make a Logo Slider

Since we’ve already covered how to do an A/B test, I’ll show you how to add a logo slider and just trust that you’ll do the right thing by testing it first.

Obviously, the exact directions will depend on what CMS you’re using. (If you don’t know what that means, you should probably ask your web designer before touching anything further.)

I’ll show you how to do this in Content Hub, and you can tweak your steps accordingly.

1. Navigate to Website Pages, Landing Pages, or Blog depending on what kind of page you’re working with.
2. Hover over the page name and click “Edit.”
3. In the editor, look for a button that says “+ Add” on the left sidebar.
4. Expand the Media category, and then click on the Image Slider module, and drag it to where you want it. (You did test the location, right?)
5. Back in the left sidebar, hover over an empty slide and click the “Edit” icon.

You can now upload the logos of your customers as images, and even add captions below them. Just be sure you use the same size image for each logo to keep your slider looking professional.

Don’t forget to hit “Apply changes” when you’re done, so you don’t have to upload them twice like me.

While the results might not be exactly the same for your audience, as long as you base your changes on insight-driven tests, you’re bound to find the butterfly that makes your breeze blow.

Source link