Simple, No-Brainer Experiments for A/B Testing Newbies

Tutorials

A/B testing should be a regular fixture of your site development, but if you’ve never done it before it’s hard to know where to start. Learn how here.

A/B split testing

Marketers, developers, site admins—whoever you are, you got to love the person who created the A/B test. I like to imagine them sitting at their desk one day, frustrated with how much time they were spending revising a client’s website, but with little payoff to show for it in the end.

Then a literal lightbulb appears over their head and they remember how awesome (or, more realistically, helpful) the Scientific Method was back in high school.

Voila! The A/B test was born. (At least that’s how I envision it.)

By now, you should at least be aware of what an A/B test is even if you haven’t had time to play around with it yet. If not, check out WPMU DEV’s Ultimate Guide to A/B Testing. It includes everything from what A/B testing is, the different types of A/B testing, what an ideal A/B test looks like, as well as tools you can use to run those tests on your site.

The majority of your visitors most likely enter your website through the homepage, which is why it’s crucial to nail down the triggers that inspire people to move forward, or to iron out the friction keeping them from doing so. Today’s article will focus on what you can do with A/B testing to improve your WordPress site’s home page performance and to make those goals a reality.

Simple A/B Tests You Should Run on Your Home Page

There’s nothing that says you have to create an entirely new version of your home page in order to increase conversions. That sort of multivariate testing is probably too complicated for what you need anyway. Instead, let’s just focus on simple A/B tests that you can start with. The more you can perfect each element on your home page, the better idea you’ll have for what will drive conversions throughout the rest of your site.

One word of caution before we move on here: don’t go into A/B testing willy-nilly. Like with those experiments you conducted back in high school Chemistry class, you should have a hypothesis about what’s creating friction in the user experience on the home page. If you’re not sure, spend some time digging around your Google Analytics. If you have a heat map tool, take a look at that as well. It’ll show you which spots on the page get the most attention, and direct you towards the weak ones that need more love.

Once you’ve formulated at least one theory, start using A/B tests to alter the element in question on your home page. You may be able to quickly confirm your theories and nip those issues in the bud or you may be completely surprised by the results.

Below I have included 8 suggestions for simple A/B tests you can try out on your home page. I’ve also provided example A/B testing case studies so you can see what sort of insights others have found when running similar tests. Remember that the results will be different for everyone. I simply want to demonstrate how easy it is to create multiple variances of a single element for the purposes of A/B testing.

Test #1. Header Image

Everything above the fold on your home page is prime real estate, which often makes it hard to decide what exactly belongs up there. Will an image and short headline suffice? How about a video background? Should there be parallax scrolling? Or maybe your sign-up form needs to go front-and-center? So many decisions to make with so little space to work with.

If your site currently has an image sitting in that prime header position, this may be a good place to start your A/B testing. In this test conducted by Signal v. Noise, they tried to determine what made for a more effective home page design.

A/B test of images
After testing different images, this test concluded big photos of smiling customers worked.

After playing around with short-form and long-form styling, they settled on one with a real person’s photo in the background. But they didn’t stop there. They wanted to know what types of photos performed best with their audience. After pitting six different photos against one another, they found that the ones with people who smiled in the photos were apt to result in more conversions.

Test #2. Typography

There’s so much that goes into making a particular font choice a “good” one, that it’s something I’m sure many designers struggle in wanting to experiment with. After all, there’s color, size, kerning, serif vs. sans serif, complementary fonts, and much more to think about when choosing a font or two for your site’s design. But sometimes it needs to be done. Sometimes it’s that tiny typography facelift that makes a huge difference with your visitors.

Case in point is this example from Who Accepts Amex. They actually ran two separate A/B tests on their hyperlink fonts. The first test aimed to demonstrate that styling like underlines and bolding would affect conversions. What they found was that a lack of styling continued to outperform the alternative options, so they were left back at square one.

Amex A/B test
The test was run for a duration of 28 days and close to 3100 website visitors became a part of this test.

In the second test, they created six different variations on the font sizing, ranging from 12 to 18 pixels. At the close of the test, they declared the 18 pixel design the winner as it resulted in almost 33% more clicks.

Test #3. Messaging

It’s funny how much of a balancing act the words on your site can be. You want them to convey your brand’s personality. You want them to be short enough to hold your visitors’ attention, but long enough to capture all the information needed for them to decide to convert. And you want it to sound natural and professional and awesome. Not an easy task, right?

That’s why A/B testing is especially helpful for determining how conversion-friendly your messaging is—in your headlines, in your calls-to-action, and in the descriptive bodies of text.

This test played around with how the headline at the top of their home page was written. Although one of the designs seemingly had less text and in a larger-sized font, it was the other version with a more concise headline and a variation on word choice that led to 38% more conversions.

Behave A/B test for copy
Spoiler alert: option B won.

Test #4. CTA Offer

When it comes to CTAs, you’ll find that different content marketing experts will tell you different things, and that’s probably because each of those different things has proven true for them. Take for example, an A/B test that Brooks Bell put together for McDonald’s.

While they didn’t conduct any sort of tests on their theory, they did present a number of options for company slogans as well as the reasoning behind why they thought McDonald’s audience would be receptive to each. If we took those slogans and turned them into an A/B test for the call-to-action, I think the same logic could be used. For instance, “You deserve a break today” would speak really well to customers’ pain.

Again, it’s up to you to figure out what the best offer is to lure your visitors into converting. Maybe it’s a free assessment, maybe it’s letting them know that you understand their pain, or maybe it’s as simple as “Sign Up Here”. Whatever you choose to test, just be sure it’s relevant to whatever your visitors’ mindset is upon first entering your home page.

Test #5. CTA Design

Yep, more suggestions for the CTA, which makes sense when you think about it. Your call-to-action is typically the make-or-break point for your visitors. You’re putting it all out there, “Hey, look here! Are you ready to sign up?”, and then it’s up to your visitors to make the next move. So yeah, the CTA has a lot of potential for variation: color, size, placement, font choice, button design, etc.

Playing around with color in web design is not a new concept. However, using it within an A/B test for your CTAs may be for you.

Take this case study from Hubspot, for example. They pitted a red CTA button against a green one on Performable’s website. They had good reasons for why they thought each color would work well, but, as the test showed, the red button won with 21% more clicks.

Test #6. Navigation

Nailing the perfect navigation for your WordPress site can take some time to figure out. With A/B testing, you won’t have to worry about committing to a full redesign of your navigation menu, changing the layout from traditional to mega or hamburger, or even renaming all the links. Once you have an idea of the tiny improvements that could be made to fix it (maybe the hover text color just needs to be different), then you can set to work in trying out a new variation.

In an interview conducted with Jeff Blettner of Formstack, he discusses how a simple change in the naming of a link in their navigation resulted in 47% more page views and 8% more conversions. For them, it was a matter of more clearly explaining what the page was about within the limited space, ultimately decreasing the friction (confusion) visitors may have had over what the page was about.

Test #7. Page Length

The length of your home page realistically should be dictated by how much information you need to convey in order to sell visitors on your business concept. It could be as simple as something like Basecamp’s project management solution. But if you look at their homepage, you’ll see that it’s fairly long as they utilize a funny graphic, customer testimonials, trust builders, and a simple and yet eye-catching timeline to build out the rest of the page.

What works for a well-known brand like Basecamp, however, might not work for yours. Do you need a bunch of news widgets? Would testimonials help instill more trust in your visitors to make a purchase? Or maybe you’ve just got to declutter and keep it short and sweet like Dropbox? This is what you need to figure out with your A/B test.

There are four examples here of long home page designs that competed against shorter alternatives. The results of the study proved that when your CTA asks your potential customers to spend money, a longer home page design works better in converting them. However, when it’s a low-cost commitment (like giving up an email in exchange for a free trial), the shorter designs fared better.

Pipedrive A/B test hompage
After their investors recommended making the homepage shorter, and Pipedrive (at first) begrudgingly ran the test, the sales pipeline management tool achieved a 300% increase in signups.

Each of these elements will require some personal reflection from you on what would work best for your brand. So, if a video header background works better than photos of your actual customers, or your menu is easier to find and navigate as a hamburger menu instead of a traditional one, give that a go. Just remember to compare apples to apples in your A/B tests for the best (and most accurate) results.

Wrapping Up

As you can see, it’s not always the call-to-action that’s the weak point of a home page’s design (though it would be easy to think that). Sometimes it’s as simple as which type of font face you’ve used in your header image or the length of the page. And because every website is different, you really won’t know what the optimal conditions are for conversions until you test out different options.

Find yourself a high-quality A/B testing tool and get to testing today!

All the good WordPress stuff, once every two weeks

Subscribe

Leave a comment