what is unbounce

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Landing Page Design for Testability – 3 Simple Ways to Minimize Testing Costs

3 simple design techniques to reduce your landing page testing costs
3 simple design techniques to reduce your landing page testing costs

How you design your landing pages determines how easy they are to test – which can have a direct impact on the bottom line of your marketing campaigns.

By using some simpler design strategies, you can free up the marketing team to produce multiple test variants more quickly, with less reliance on design or development.

It’s easy, and in this post I’ll show you how to do it along with examples of some landing pages that do a good or bad job.

Changing an Inefficient Process

The typical flow of work for a marketing A/B split test goes something like this:

  1. Marketing comes up with a concept for a campaign.
  2. Design produces designs for banners and landing pages.
  3. Development (or design) builds the landing page.
  4. IT reports stats back to Marketing.
  5. Marketing plans an A/B test requiring changes to the landing page.
  6. … repeat process.

You’d be right to think this a little unwieldy. There is clearly too much reliance on too many people.

Design Your Landing Pages for Testability – 3 Simple Techniques

By employing 3 simple design techniques when designing your landing pages, you can either eliminate the need for extra design and development efforts, or at least make their jobs much easier and faster.

1. Make Important Headlines and Titles Plain HTML Text

There are usually between 1 and 3 important pieces of headline text on a landing page that will be candidates for re-writing when it comes to an A/B test.

  1. Primary Headline – the main statement of your Unique Selling Proposition (USP)
  2. Sub Title – the supporting statement beneath your USP
  3. Lead Generation Form Title – most lead gen forms have a title to introduce the purpose of the form

Leaving these headlines as nicely styled HTML/CSS text allows anyone to change them without the need for a new design asset to be created and uploaded.

2. Position Lead Gen Forms With Flexibiility in Mind

A classic A/B test is to vary the length of your lead gen form to gauge the point where final conversions intersect with the quality/quantity of information gathered about your prospects. With this in mind, position your form with some whitespace below to allow it to grow and shrink as you test it. If it’s tightly constrained by other design elements, you would have to rework the whole page simply to add an extra form field.

3. Create and Re-use an Expandable Button Design Using CSS

Sounds technical. And yes it is, but the idea is to measure twice and cut once. What I mean by that is to have your designer/developer produce a button that uses CSS to provide a graphical form button that can expand and contract along with the text placed inside it. For any CSS people out there, this is akin to the classic “sliding doors” technique. The button can still look nicely designed by using correctly cut up background images, while the button text can be easily update-able HTML text.

A Great Example of Smart Landing Page Design – Web Trends

The example shown below comes from Web Trends. They are employing most of the techniques listed above, and the result is an elegant and effectively designed page that could be altered for testing with virtually no effort.

Web Trends landing page

Notice how the form could be as long or short as you like. And you could update all of the major titles very easily. It would be easy for them to include the extra step to make the form button editable leaving you with a landing page ready for testing.

A Poor Example of Smart Landing Page Design – Starbucks Coffee

I’m not saying this is a bad landing page, rather that it would be very difficult to use in an A/B test without significant effort by both design and development.

Starbucks coffee landing page

Analyzing this page, we can spot a few failings with regard to simple testable design:

  1. All titles are graphics requiring a designer to jump in for testing changes.
  2. There is no room for the form to grow without a redesign.
  3. The button is graphical and in a spot where there is no room to grow.

In general this page is overly crowded and as such it’s a tough candidate for simple A/B testing.

Conclusion – Simpler is Gooder

How’s that for an awesome word. Gooder. Just testing whether you’re still paying attention.

To summarize, applying some simplistic design rules to your landing pages can increase the effectiveness of your team and result in a greater return on your marketing spend.

Oli Gardner

About Oli Gardner
Unbounce co-founder Oli Gardner has seen more landing pages than anyone on the planet. He’s obsessed with identifying and reversing bad marketing practices, and his disdain for marketers who send campaign traffic to their homepage is legendary, resulting in landing page rants that can peel paint off an unpainted wall. A prolific international speaker, Oli is on a mission to rid the world of marketing mediocrity by using data-informed copywriting, Conversion-Centered Design, interaction, and psychology to create a more delightful experience for marketers and customers alike. You should follow Oli on Twitter
» More blog posts by
  • Two ways to overcome this uncertainty is to have a powerful test design with … Plus high-cost variables should often be tested separately to reduce testing costs.

  • oligardner

    Not too sure what you're referring to re:uncertainty. Can you elaborate on your point for me please?

  • Alex Williams

    Do we know which performed better? Audience intent can override best practices. The WebTrends creative is marginal at best. Starving for a point here…

    • Oli Gardner

      Thanks for jumping into the discussion Alex. This isn’t a comparative page conversation – you couldn’t compare them as they are not being tested against each other rendering a test moot.

      The Starbucks page also isn’t a true landing page (in the regard with which I’m discussing them), but does a good job of illustrating the difficulties that lie in overly complex designs.

      Have to strongly disagree about the WebTrends creative – the beautify of this is it’s simplicity – which is a primary tenet of conversion centered design. It’s got s singular focus and zero distractions to move you away from the intended path to conversion success.

      The point here is that simple design, with a few basic rules applied, HTML text, whitespace for expansion of elements and having smart buttons can alleviate the burden and roadblocks associated with getting things done in a rapid way.

  • Pingback: 3 Easy WordPress Tips to Reduce Bounce Rate()

  • Appreciate this post. Looking at the comments, it’s normal that we would compare and contrast the two samples – that’s human nature – even though Oli is saying you couldn’t compare them (at least for effectiveness). The Webtrends design works for its marketing intention because it is more of an analytical subject. The Starbucks land page could not get away with the very “developer-looking” and not “designer looking” design as shown in Webtrends. Starbucks needs to engage, so they need an engaging layout. Most companies also need to engage, unless they are selling consultingesque services. I think it’s possible to take the points Oli is making and apply them to a more engaging consumer-oriented design for overall effectiveness. That’s what I’ll take away from this post.