The Unbounce Blog
2010 is the year of landing pages and conversion optimization. Join in as we discuss the evolution of conversion economics, conversion centered design and the art and science of landing pages.
Subscribe to the Unbounce Email Newsletter
and get our free "101 Landing Page Tips" eBook.

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

By Oli Gardner, November 26th, 2009 in A/B Testing | View Comments
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


Get more clicks, leads and conversions on your landing pages

Sign up now for free and build, publish and A/B test your marketing campaigns for a higher ROI and more creative freedom than you've ever had.


Related posts:

  1. ABT – Always Be Testing: Two Design Directions for a Lead Gen Landing Page
  2. Stop Arguing, Start Testing – 5 Ways to Prove Your Boss Wrong. Or Right
  3. 7 Guaranteed Ways to Make Your Customers Leave Your Landing Page
  4. 10 Ways the NFL can help a Landing Page that won't Convert
  5. HOW TO: Create a Landing Page Design Concept in 10 Minutes
  • 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?
blog comments powered by Disqus