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.
The typical flow of work for a marketing A/B split test goes something like this:
You’d be right to think this a little unwieldy. There is clearly too much reliance on too many people.
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.
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.
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.
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.
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.
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.
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:
In general this page is overly crowded and as such it’s a tough candidate for simple A/B testing.
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.