The 7 Principles of Conversion-Centered Design - The Shutterstock Blog

“Conversion” is one of the hottest words on the web right now. Every web page you create is now a piece of “accountable content.” Its purpose, impact, and success can be measured, and if it’s not playing a part in successfully converting visitors into customers, it hasn’t been designed correctly.

The 7 Principles of Conversion Centered Design

By combining a few simple design principles and some basic psychology, you can completely shift your focus to design web experiences that both delight and convert. I call this Conversion Centered Design (CCD for short).

1. Encapsulation
Wrapping things is a smart practice. It works for your head in cold temperatures, baked potatoes in hot ones, and makes Christmas more fun. 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.

2. Contrast
So many marketers talk about button colors. This is a mistake. 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.

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).

4. White Space
This one’s simple. Don’t cram things together. Lack of white space is offensive design. By letting people’s eyes breathe, you create a more delightful experience, which will give you a few extra precious seconds to communicate your campaign message.

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.

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, a visual slideshow that covers highlights from an industry report, or a teaser/trailer video for an upcoming event. Amazon really set the standard with its “Look Inside” book previews.

By opening your product to scrutiny before the purchase, you appear both 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. The example below (a landing page to get the full CCD ebook) shows the use of a Slideshare deck that visually presents these 7 principles.

7. Social Proof
Elements of trust are a critical part of any landing page. They back up your claims, and when done right, speak to your visitors from the perspective of a likeminded 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, like 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.

CCD in Action: 7 Landing Page Templates

Armed with your new design tools, let’s take a look at 7 beautiful Unbounce landing page templates (all of which were designed exclusively with Shutterstock photos).

You’ll notice that there are few mentions of “try before you buy” and “urgency.” That’s because those elements are tied to fairly specific use cases not covered by many of these templates (which, of course, are meant to be customized for particular marketing campaigns).

Lockwood – Real Estate

The conversion goal here is the form, so it’s positioned front and center and encapsulated in a container that allows the critical content above it to connect visually. The CTA stands out clearly on the page, with a vibrant contrasting color. The arrow positioned at the end of the main content area directs your gaze to the CTA, and the use of the same orange color connects the two elements.

As you move down the page, your eyes can drop freely through the content blocks. Airy and spacious photographs and a minimalist palette combine to make it an enjoyable experience. Appropriate social proof is used here, focusing on design awards, rather than a testimonial, which would have very limited impact.

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 starburst of sorts — just remember to stay classy. That would be a great A/B test.

Lasano – Health & Wellness

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.

Next, there’s 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.

Yuli – Software Demo

The top portion of the page here 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.”

A video is used this time for a higher level of sophistication. In an A/B test I ran on the Unbounce 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.

Henton College – Education

The grid used on this page makes it easy to segment and encapsulate the content into three distinct units: Content, Conversion Goal, and Social Proof. The use of the strong green arrow, meanwhile, makes it very clear where the purpose of the page lies, and the matching colors again give you a strong sense of connection. This is why the form header area is a great place to include important instructional copy.

Again, separation makes the testimonial stand out. Having its own area adds clarity and delineates the purpose of the content.

York – Legal

This template includes a clever combination of encapsulation, directional cues, and industry-specific motifs. The form container looks like a tie, matching the professional concept of the template. It also acts as a directional cue that draws your eye down toward the CTA.

Interestingly though, the arrow takes your gaze past the CTA and on to the feature below, making this prime real estate to discuss your main value proposition.

Wanderlust – Travel

Things are slightly different on this 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.

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

Polar – Not For Profit

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.

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.

Being a conversion centered designer is the next evolution of design in business, and armed with these tips, you’ll be making your boss/clients very happy when their conversion rates go up. So, next time you think your design is finished, run it against the 7 principles of CCD and see how you stack up.