One small layout change gave us an almost 20% increase in on-page conversions.
They say that a butterfly flapping its wings can cause a rainstorm on the other side of the Earth. Well, today’s story makes me think that might be true.
Conversion wizard 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 right into the how-to, I’ll also cover why you it shouldn’t run out and do this without testing first.
Butterflies and best practices
It’s pretty uncontroversial for both B2C and B2B to add social proof to their websites to increase conversion, right?
You know what I’m talking about. Testimonials from satisfied customers. Logos of your biggest clients. Photos of your legions of fans joyfully offering their first-born children. (Too far?)
So why is social proof always hidden at the bottom of the page? Or hidden away on your page like some secret Victorian woman in the attic?
“While social proof is helpful, chances are it’s not what your visitors came for. And you don’t want to throw what they came straight for off their radar.”
This is Rebecca Hinton, the CRO strategist behind this and many other amazing conversion optimization successes at HubSpot. (If you’ve been following this column, you’ll know that Rebecca is also responsible for test that increased CVR of paid ads by 11%. And I’m sure this won’t be the last I share. She’s so good.)
But while her point makes perfect sense, it presents a conundrum: visitors actually have to, you know, see all of these testimonials for it to work.
“According to heatmaps, only 50% of users scrolled far enough to see social proof,” explains Rebecca.
But it works! Despite the fact that only half of our visitors saw them, social proof sliders were still second and third the most frequently clicked elements on these landing pages.
Well pop quiz, man. If you move your social proof higher up the page, it pushes your marketing content down. But if not, nobody sees it. what are you doing what are you doing
Split Testing Split
Whenever we have a dilemma, Rebekah’s answer will always be: Test and find out.
For the control group, they received the site as it was, with a social proof module that included both customer logos and written testimonials at the bottom of the page.
For variant B, our CRO team separated the two. Customer logos became a small and unobtrusive slider tucked right under the hero banner, while the testimonial section remained at the bottom of the page.
This would hopefully hit the best of both worlds: more visitors would see some form of social proof, but the thin line of the logo wouldn’t push our marketing content too far.
But is a small logo line really enough to make a difference?
Turns out the answer isn’t just “yes,” but a 19.5% increase in software registrations that says “skewer yes.”
Rebecca says it with a little more tact.
“Placing a wristband with customers’ logos gives it an air of legitimacy. Oh, they have customers with logos I recognize? It builds trust.”
Now, some of you are ready to run off and put some logos on your site just because “HubSpot said so.” Here’s where I share the scary part of the story to convince you to try it first.
A mysterious variant of C
Rebecca had a hunch she could do better, so she made a bigger swing with the C variant.
In this version, the logos still moved to the top of the page, but it replaced customer testimonials at the bottom with customer success data. Consider short statistics like “After 1 year, HubSpot users closed 55% more deals.”
“And I thought, wrongly, that this would trump the testimonials,” she explains with grace and good humor. “Because when I read them, I find them very convincing. You drive 114% more website traffic. You generate 129% more inbound leads. It’s convincing to me. That’s exactly what I want. Let me log in!”
Turns out it is the opposite it was true. Variant C reduced conversion by almost 10%. Ugh.
Rebecca believes that the negative result is due to the fact that the statements are from customers, while the data comes from the company itself.
“People trust people more than companies,” she says. “They have this healthy skepticism, which is completely fair. And that’s why we test, right?”
And that’s why you should test it.
Tiny Tweak Takeaways
If you’re ready to give this a try, Rebecca has some tips for you to consider.
1. Start with insight.
“I always think my ideas are good because they are mine. But my idea was to add customer statistics and that was lost,” he shrugs. “What helps is data-driven insight, not hunch.”
In this case, the data-driven insight for the test came from checking the heatmaps. When Rebecca noticed that only 50% of our visitors had seen the social proof module, the test she designed was the logical next step.
So instead of simply mimicking this test, take a look at your data and see what insights could inform an entirely new test.
2. Consider the visitor’s intent.
“If we were targeting a site that had a lot of return traffic or was deeper in someone’s user journey, I wouldn’t expect social proof to be as effective.”
Part of the reason this test worked was because it was on pages that were targeting brand new visitors. If your landing page speaks to returning customers, they may not care about logos or referrals from other customers. Instead, that audience could be driven by data.
The only way to know is to consider what a visitor expects to encounter on such a page 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,” explains Rebecca. “Then we find the data before the test runs (because you don’t want to include the test data) and compare the period before and after.”
Don’t think of this as another test – it doesn’t have to be all that scientific. This is more about making sure there are no unintended consequences.
“We don’t want to match the original test results. That is not realistic or reasonable. There are too many external factors. All we ask is to see your results directed line up.”
Since your new changes will likely affect a wider range of pages than just your test, there could be room for unforeseen problems.
“If you don’t do it before and after the inspection, the problems can last for months.”
How to make a logo slider
Since we have already covered how to do an A/B testI’ll show you how to add a logo slider and trust that you’re doing the right thing by testing it first.
Obviously, the exact instructions will depend on which CMS you’re using. (If you don’t know what that means, you should probably ask your web designer before you touch anything further.)
I’ll show you how to do it Content Huband you can adjust your steps accordingly.
- Go to website pages, landing pages or blog depending on the type of site you are working with.
- Hover over the page name and click “Edit”.
- In the editor, look for a button that says “+ Add” in the left sidebar.
- Expand Media category and then click on Image slider module and drag it to the desired location. (You tested the location, right?)
- Back in the left sidebar, hover over a blank slide and click “Edit” icon.
Now you can upload your customers’ logos as images and even add captions below them. Just be sure to use the same size image for each logo to keep your slider looking professional.
Don’t forget to hitApply the changes” when you’re done, so you don’t have to upload them twice like I did.
While the results may not be exactly the same for your audience, as long as you base your changes on insight-driven tests, you’re sure to find a butterfly that gives you the breeze.
https://blog.hubspot.com/marketing/the-tiny-layout-tweak-that-led-to-more-conversions