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:
- Marketing comes up with a concept for a campaign.
- Design produces designs for banners and landing pages.
- Development (or design) builds the landing page.
- IT reports stats back to Marketing.
- Marketing plans an A/B test requiring changes to the landing page.
- … 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.
- Primary Headline – the main statement of your Unique Selling Proposition (USP)
- Sub Title – the supporting statement beneath your USP
- 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.
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.
Analyzing this page, we can spot a few failings with regard to simple testable design:
- All titles are graphics requiring a designer to jump in for testing changes.
- There is no room for the form to grow without a redesign.
- 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.