How to Become a Conversion-Centered Designer

Sponsored Content
This is a sponsored post featuring a product/service that's particularly relevant to our readers.

So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.

What’s a Landing Page?

Before we get into the design principles behind landing pages, let’s get some definitions out of the way:

A landing page is a standalone, campaign-specific web page. Its intent is to get your visitors to complete a single action. It’s not your website, and it’s most certainly not your homepage.

Websites are brand central stations and are for people who organically find your site or who need to reference or look at it in the research mode of their purchase cycle. They are not good for marketing campaigns.

Marketing campaigns are based on a single purpose - buy this, subscribe to that - and as such need a more focused experience. The biggest reason for using a landing page vs. a homepage for the target of any campaign traffic (PPC, email, social) is because of something called attention ratio.

Attention ratio is the ratio of interaction points (links) on a page, to the number of intended actions on that page (which for a campaign is always 1). On a homepage this is typically around 40:1 meaning that there are 39 distracting actions and 1 desired action.

A focused landing page on the other hand has an attention ratio of 1:1. For this reason, smart marketers use a promotion-specific, dedicated landing page for every campaign they run.

What does this mean for me as a designer?

Gone are the days when it was acceptable to design a beautiful web experience, put the brush down and walk away with a cheque in your pocket.

Conversion is one of the hottest words on the web right now. Every web page you design is now a piece of “accountable content”. By this I mean that its purpose, impact, and success can be, and is being, measured. If it’s not playing a part in successfully converting visitors into customers, it’s not been designed correctly.

Design isn’t the only factor in high conversion rates. Copy plays an enormous part. But the greatest copy in the world won’t help if your visitor is distracted, offended – we all know bad design can be downright offensive – or confused.

By combining a few simple design principles and some basic psychology you can completely shift your focus to design web experience that both delight and convert.

I call this Conversion-Centered Design. CCD for short.

This is a crash course in CCD, so I’ll discuss the 7 principles, get you juiced up on some Psych 101, then show you some beautiful and high-converting landing page templates that put them into practice so you can learn by example.

Ready to become a Conversion-Centered Designer?

The 7 Principles of Conversion-Centered Design

The principles are simple. Learn them, practice them, and you’ll see your conversion rates soar.

Principle 1: Encapsulation

Wrapping things is a smart practice. It works for your head in cold temperatures, baked potatoes in hot, and it makes Christmas more fun. So take the most important thing on your page (your conversion goal) and wrap it in something to demonstrate that it’s worthy of your visitor’s attention.

Principle 2: Contrast

So many marketers talk about button color. This is a mistake. A good Conversion-Centered Designer knows that button color is irrelevant. It’s contrast that counts. If you have a primarily green hued page, a red button will jump out at your visitors. Don’t be concerned that it looks angry; your potential customers aren’t bulls.

Principle 3: Direction Cues

In some cultures, it’s considered rude to point. Not in conversion land. When someone arrives on your landing page, your design should point them toward the goal you want them to reach. Use arrows and triangulation to create focal points. With photography, use line of sight to direct attention to your Call-To-Action (CTA).

Principle 4: Whitespace

This one’s simple. Don’t cram things together. Lack of whitespace is offensive design. By letting people’s eyes breathe (they can do that?) you create a more delightful experience which will give you a few extra precious seconds to communicate your campaign message.

Principle 5: Urgency and Scarcity

This is the first psychology-based principle. Creating urgency or scarcity is primarily a written exercise, but it’s up to you to present the information using good design. Proximity to the conversion goal of the landing page is key when it comes to signalling scarcity. By ensuring your visitor understands that they have a deadline, you can make that click a little more likely.

Expedia does a great job here by using encapsulation to highlight the scarcity statement (“Only 3 tickets left at this price!”) in the image below.

Principle 6: Try Before You Buy

Have you ever “sampled” a grape in a supermarket? That’s a preview of quality and it helps people make informed purchasing decisions. Examples in the digital realm include a chapter of an ebook or a visual slideshow that covers some highlights from an industry report, online course or a teaser/trailer video for an upcoming event. Amazon really set the standard with their “Look Inside” book previews.

By opening your product to scrutiny before the purchase, you appear authoritative and credible. This increases trust, and it can be an important factor in boosting conversions.

As a Conversion-Centered Designer, you should find creative ways to present these previews.

Principle 7: Social Proof

Elements of trust are a critical part of any landing page. They back up your claims and when done correctly, speak to your visitors from the perspective of a like-minded consumer. Testimonials are the most popular approach. Like principle 5, this is primarily a written element, but you can use aspects of smart content design - in particular hierarchy - to encourage people to actually read them.

Adding an explanatory headline above the testimonials (or customer logos etc.) can increase the power of social proof.

Conversion-Centered Design in Action; 5 Landing Page Templates

Armed with your new design tools, let’s take a look at five Unbounce landing page templates to inspire you as you create your own templates.

1. Lockwood: Real Estate

• Encapsulation The conversion goal is the form, so it’s positioned front and center and encapsulated in a container which allows the critical content above it to connect visually.

• Contrast The CTA stands out clearly on the page with a vibrant contrasting color.

• Directional Cues There is an arrow positioned at the end of the main content area which directs your gaze to the CTA, and the use of the same orange color connects the two elements.

• Whitespace As you move down the page, your eyes can drop freely through the content blocks. Airy and spacious photograph and a minimalist palette combine to make it an enjoyable experience.

• Scarcity The statement that only 3 of the units remain is positioned directly beneath the CTA as a reminder that you should hurry up. If you want to get more aggressive here you could try a *cringe* starburst of sorts - just remember to stay classy. That would be a great A/B test.

• Social Proof Appropriate social proof is used here, focusing on design awards, rather than a testimonial which would have very limited impact.

2. Lasano: Health & Wellness

• Form encapsulation? Check.

• Contrasting CTA? Check.

• Whitespace? Check.

• Social proof? Check.

• Directional Cues Here you’ll notice two forms of directional cue. The first utilizes the woman’s line of site to direct your gaze from left to right. Even better would be if she was looking down and to the right, but that might also make her look sad, which would go against the theme of the template. Secondly there is a secondary statement below the form that ends with a little reminder arrow pointing you back up. Little things don’t always have a big impact, but when you have several little things working in concert they can.

3. Yuli: Software Demo

• Form encapsulation? Check.

• Contrasting CTA? Check.

• Whitespace? Check.

• Directional Cues The top portion of the page is where all the main content lives, so an arrow - with a request - is placed at the point where the content has been read, pointing at the CTA. Notice also, how a sort of instructional triangle is created by reserving the color orange for elements that reference the purpose of the page: “free demo,” “join us for a free demo,” “book my demo now.”

• Social Proof A video is used this time for a higher level of sophistication. In an A/B test I ran on the Unbounce.com homepage, I found that by replacing text testimonials with a video version, conversion rates increased by 25%. Here there is a combo of video and text. Notice also that the template utilizes the hierarchy of information design to introduce the social proof elements (the video and the customer logos beneath) with a descriptive headline.

4. Wanderlust: Travel

• Contrasting CTA? Check.

• Whitespace? Check.

• Social proof? Check.

• Encapsulation It’s slightly different on a click-through landing page as there is no form, but the CTA is still positioned with other critical information in a bounding box in the page header. The footer element also uses color contrast to encapsulate the “closing argument statement” with a repeated CTA.

• Directional Cues It’s a bit of a stretch, but the Eiffel Tower kinda connects to the CTA. And it rather cleverly indicates that by clicking the CTA, you’ll be whisked off to Paris to stand under the tower. How romantic. In another sense, the circular feature photos lead your eye down through the page to the closing CTA.

5. Polar: Not For Profit

• Whitespace? Check.

• Social proof? Check.

• Contrasting CTA As in all of these examples, the CTA stands out from the rest of the design. Notice also how the goal of the campaign (to raise money through donations) is highlighted using the orange color in the target thermometer. This makes a connection between the emotional and physical (conversion) goals of the page.

• Urgency & Scarcity The combination of the donation target, and the emotional statements “Time is running out for the polar bear” and “I Predict That We Could See Ice-Free Summers on the North Pole Within a Decade” create both urgency and the impending sense of scarcity.

In Summary

Being a Conversion-Centered Designer is the next evolution of design in business, and armed with today’s learning you’ll be making your boss/clients very happy when their conversion rates go up.

So as you design your Themeforest landing page templates, run them against the seven principles of CCD and see how they really stack up.

You must Sign up as a member of Effecthub to view the content.