Instead of starting with a template, start your landing page from the call to action and build it backwards.
I've had the privilege to review many landing pages, both for clients and live at conferences. It's very easy to critique someone else's page once it's complete. It's quite another thing to start from the beginning and develop a page from scratch.
For some reason, we quickly find ourselves with a busy, confusing page, the kind of page that is exactly the opposite of what we set out to create.
The problem is that we start in the wrong context.
The Landing Page Isn't Part of Our Site
At its purest, a landing page stands by itself, eager to serve a very specific visitor. It is not found in our sitemap. It is not included in our main navigation.
Yet, we tend to start with the template from our corporate website or e-commerce site when we build a landing page. This template comes with some significant baggage:
Basically, before we've created the first line of copy or our first form field, we've got a disconnected, leaky landing page.
What if we started with a Tabula Rasa, a blank slate, and built from there? Would we come up with a significantly different page?
I think so.
The Primal Landing Page
The landing page in Figure 1 is the perfect landing page; simple, clear, no confusion.
Figure 1: The perfect landing page for a very limited audience.
Unfortunately, this page will only be effective if you're selling to a very curious crowd or are selling dominatrix services, where to "Submit" makes sense. For other markets, we'll have to make the call to action more relevant.
Landing Page Relevance
Relevance has a very different meaning for a landing page. While you may think that information about your company and products is relevant for your website, it is the source of the visitors that defines relevance for a landing page.
Your company is just an actor on the landing page's stage.
Landing pages, like ads, start with a great offer. Let's pretend we're the U.S. Mint selling dollars at a discount. If our traffic is coming from a search ad, for example, our call to action must match the promise in the ad. Figure 2 shows an example of a landing page and two ads that may drive traffic to it. Can you see how the offer on the landing page is a let-down for a visitor coming from ad B?
These visitors expect to see "50% off." The landing page offer is too general for ad B, but may work well for ad A.
Figure 2: The landing page offer is relevant to ad A, and less relevant to ad B.
We can further improve this by telling the visitor exactly what they should do. "Click here" is all they can do right now.
Figure 3: Adding "Click Here" makes our call to action even more specific and effective.
Invite a Designer In
Our button is getting a little unwieldy. Now is a good time to ask a designer to help us out. Don't ask them to design your page, though. Remember, this is a backwards landing page. A designer might offer the layout in Figure 4 to solve our button problem.
Figure 4: Design is important in helping to communicate. We are not worried about "Look and Feel" at this point.
This is an improvement, but the Mint isn't going to sell many dollar bills with this landing page. We need a way to take payments.
Ask Only for Necessary Information
We can expand our form a bit to let users enter a credit card number. This makes our landing page eminently more helpful. However, each field we add is likely to reduce our conversion rate. Unfortunately, we must ask for quite a bit of personal information to charge the credit card. We should only add those that we absolutely need.
Figure 5: Every field you add to a form can be expected to reduce a page's conversion rate.
Now that we've added several fields to your page, our conversion rates are going to drop, especially since we're asking for very personal information. To counter this, we need to give the visitor more reasons to complete the form.
Invite a Copywriter In
Don't write your own copy. Copywriters are good at using words to persuade visitors to take action.
In this case, I'm writing the copy as an example, and I deem a few bullets to be sufficient, since this is such an awesome offer.
Figure 6: Adding persuasive copy will counter some of the anxiety the visitor has about providing personal information.
Persuasion only goes so far. We also need to build trust on our pages.
Building Trust With Symbols
Our copy can talk about how trustworthy we are, but we need some symbols of our trustworthiness. Good examples of trust symbols include:
In this case, the Mint is well known and is a governmental organization. Who can we trust more than the government? We'll add its logo.
The Mint also has some very well-known customers. This offers social proof to the visitor. As you will see in Figure 7, we also build social proof with a fourth bullet in the copy.
Figure 7: Adding trust symbols makes our visitors feel safer about completing a transaction.
We want some of these symbols close to our button, so we add the credit card logos near the point of action.
Show the Product
An image on the page helps anchor the eye. However, the image must be relevant. Always show the product. Even if your landing page is offering a service, find a way to show off the service as a product.
The higher the quality of the image, the better it will perform. Don't skimp on photography, as I do in Figure 8.
Figure 8: Show the product on your landing pages.
Our page is getting a little crowded and our call to action is getting lost.
Make the Call to Action Prominent
The problem with all of these trust symbols and pictures is that they compete with our call to action. Our little gray "Click Here" button isn't making it clear to the visitor what they are expected to do.
We'll consult our designer again. The designer should recommend screening back some of the high-contrast logos and making the call-to-action button draw the eye.
Figure 9: The call to action should be the most prominent item on the page. Screen back competing images if necessary.
Since the button is now very prominent, we asked our copywriter to make it more specific and enticing.
At this point, we have all the elements of a high-converting landing page.
And we did it backwards.
At this point, it's important to guard against "forward" thinking as we ask our designer to make the page easier to scan and read.
Taming the Designer
Ideally, we would launch this page and get our baseline conversion rate. Then, we can begin split testing to make it more and more effective.
However, a competent designer can make this page easier to read with some color and white space. The designer can position things on the page to induce scrolling. They can format the page to fit the common screen sizes.
If your designer starts talking about adding headers, icons, columns, progressive forms, or anything else that doesn't solve a problem related to conversion rates, tell them "We'll add that idea to our test schedule."
Now launch the landing page and watch the analytics. You did add analytics, didn't you?
Instead of starting with a template, start your landing page from the call to action and build it backwards. This will avoid the introduction of elements that reduce your conversion rates unnecessarily.
On the heels of a fantastic event in New York City, ClickZ Live is taking the fun and learning to Toronto, June 23-25. With over 15 years' experience delivering industry-leading events, ClickZ Live offers an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!
With 15 years of online marketing experience, Brian has designed the digital strategy and marketing infrastructure for a number of businesses, including his own technology consulting company, Conversion Sciences. He built his company to transform the Internet from a giant digital-brochure stand to a place where people find the answers they seek. His clients use online strategies to engage their visitors and grow their businesses. Brian has created a series of Web strategy workshops and authors the Conversion Scientist blog. Brian works from Austin, Texas, a place where life and the Internet are hopelessly intertwined.
Hong Kong, May 5-6, 2015
Gartner Magic Quadrant for Digital Commerce
This Magic Quadrant examines leading digital commerce platforms that enable organizations to build digital commerce sites. These commerce platforms facilitate purchasing transactions over the Web, and support the creation and continuing development of an online relationship with a consumer.
Paid Search in the Mobile Era
Google reports that paid search ads are currently driving 40+ million calls per month. Cost per click is increasing, paid search budgets are growing, and mobile continues to dominate. It's time to revamp old search strategies, reimagine stale best practices, and add new layers data to your analytics.
May 6, 2015
12:00pm ET/9:00am PT