How to Enable Conversion-Centered Design

When you build a website for your business, most business owners, marketing departments, and CEOs have two distinct goals in mind: one, provide necessary information about the business and, two, convert leads. With the first point, people need to know what you do, how to find your business, what other people have to say (case studies, testimonies, reviews), and maybe read a blog or two. With the second point, if you don’t convert leads, you won’t make profits, which means you won’t have a business. Lead generation and conversion are the entire reason that businesses create content around keywords in the first place. Marketers have researched which designs convert more leads and which do not, so there’s no need for guesswork. Here’s a look at how to enable conversion-centered design into your website.

What is a conversion-centered design?

Conversion-centered design usually applies to landing pages (sometimes called ‘squeeze pages’ or ‘lead-generation landing pages’). Conversion-centered design has a goal of asking visitors to complete a single action by using compelling and persuasive design and psychological and emotional triggers to increase and encourage conversions.

Often, businesses mistakenly route people to their homepage, but it’s important to create specific landing pages for your website. There’s no limit on how many you should have but each landing page should have its own goal.

What is a landing page and what does it do?

In online marketing, a landing page can be known as a ‘lead capture page’, a ‘static page’, or a ‘destination page’. Landing pages use ‘congruent design’. You may have heard the term ‘congruent’ in mathematics where it refers to two alike shapes such as a pair of triangles that have the same size and shape, the same angles, the same side lengths, and so forth. However, in web design, the design is ‘congruent’ when it works towards a single, collective purpose. 

The idea of any landing page is to get your potential customers/clients to do something. Generally, something that you want, which can be subscribing to your mailing list, buying a product or service, registering for an event, enrolling for an online course, becoming a member of a community organization, downloading your eBook, downloading an app, or any number of other actions you choose.

If you have many services on offer or many different types of offers, you’ll need a landing page for each. For example, if you’re offering an eBook and an app, you won’t want to combine the landing pages, talking about both into one page. You’ll need a page promoting your eBook, its benefits, and how it’ll help your potential customer achieve their goals, and a separate page for your app, touting the same.

In essence with a landing page, you offer something in return for your potential client or customer’s details (i.e. name and email address usually). Then, you hope that you’ll ultimately entice this person to become your customer. Once they are a customer, that counts as a ‘conversion’. Then, once you’ve converted this person into a ‘customer’, you’ll work on customer retention (but that’s another matter).

In a nutshell, the goal of any business is to convert your ‘leads’ to customers. One of the best ways to convert leads is through landing pages.

How do people arrive on my landing pages?

Landing pages are specifically designed so that leads can find the information they want quickly and easily and decide if they want to ‘opt-in.’ If you’ve ever gone on Facebook or Instagram, seen a carousel advertisement for a product, and clicked on ‘shop now’, you’ll most likely have seen a landing page. Social media is one way people land on your landing pages, through social media ads or posts.

For example, if you see an advertisement for a pair of running shoes, you click on it. You’re redirected to a landing page. The landing page praises the benefits of these running shoes, tells you all of the colour options, let’s you know there are only fifteen pairs left in your size, has a big, bright button that says ‘buy now’ or ‘add to cart’, and then has some reviews of the product to scroll through that show you how amazing your run will be with these shoes (just look at all of these people that say so). That’s a product landing page! How many times have you actually bought from these pages? If you’re like many of us, you’ve probably bought from a few–from inexpensive kitchen gadgets to clothing to the latest novel or audiobook. 

Landing pages are how ‘ads’ work these days. But consumers are savvy. A badly designed landing page and user experience can mean they may land on the page, be close to conversion, but never complete their transaction.

Another way people arrive on your landing pages is through organic and paid search. Someone may Google a question or keyword, and Google determines that you have the solution and has placed you on the first page of Google’s SERP, or, in the case of an ad, you may pay to be shown when users type in certain keywords. However, just as in the landing pages arrived on via social media (they will be the same landing pages no matter how customers get to your landing page, by the way), a bad landing page will lose leads.

Why is conversion-centered design important for your business?

It’s important to understand conversion-centered design so you can convert more leads more effectively and efficiently. There are psychological devices that can be used to encourage participation as well as design elements to drive a potential customer’s attention to where you want it to be. Knowing these triggers and tried and tested designs is vital.

The seven principles of conversion-centered design

There are seven principles, divided into design elements and psychological elements.

Design elements
1. Encapsulation
2. Contrast and colour
3. Direction cues
4. White space

Psychological elements
5. Urgency and scarcity
6. ‘Try before you buy’
7. Social proof

1. Encapsulation

The definition of encapsulation is ‘the action of enclosing something in or as if in a capsule.’ In design, this means that you are creating a tunnel through which your viewer looks. You are drawing their eyes and attention to a certain point.

In your web design, you can make your CTA button (call to action button) big and interesting or you can use dynamic shapes to constrain your points. Use elements of contrast and directional cues to let your viewers know where to look. Think of the image of a tunnel. Your eye will be drawn to the end of the tunnel, the pinprick of light or dark. 

Your designers should keep this encapsulation principle in mind when creating landing pages. Where is your eye drawn to? Where do you have to look? If your design isn’t done well, then the viewer won’t know where to look first.

2. Contrast and color

Many people understand contrast. Black text on a white background, for example, or a yellow M on the red background of a McDonald’s logo or red baubles on a green Christmas tree. For a landing page to work, there needs to be contrast so your viewer (again) knows where to look and where to go. 

You may choose a stark design with a big, red button, for example with white text on it. But, keep in mind that colors can have a psychological impact and connotations to them, making people feel positive and happy or excited or serious or associate colors with personal associates or perceived associations and more. Here’s an example of how some colors make people feel.

• Red – love, excitement, assertive, strong, powerful, danger, stop, negative, hot
• Dark blue – peaceful, stable, confident, tranquil, sincere, calming, trustworthy, mature
• Light blue – calm, youthful, masculine, cool
• Green – life, growth, healing, money, safety, freshness, positive, go
• White – hopeful, good, light, pure, clean, simple, cool, honest
• Black – sophisticated, powerful, mysterious, formal, serious, heavy, death
• Gray – stable, secure, integrity, neutral, cool, mature
• Brown – reliable, strong, wholesome, organic, unpretentious
• Yellow – warm, energetic, joyful, friendly, emotional, positive, caution
• Gold – conservative, stable, elegant, confident, extravagant
• Orange – abundant, positive, successful, playful, creative, sociable, emotional, organic
• Purple – youthful, contemporary, royal, delicate, feminine, riches
• Pink – kindness, feminine, nurturing, soft, youthful
• Pastels – youthful, soft, feminine, sensitive, calming
• Metallics – elegant, lasting, wealthy, excessive

Consider the color wheel too. What colors are complementary and which colors contrast? Colors opposite each other on the color wheel complement each other (go together nicely) and colors opposite contrast. You always want your CTA button or form to stand out. Don’t create a design where everything blends in.

3. Direction cues

Direction cues are just what’s written on the box: you want to design your website to show visitors what action you’d like them to take. You can do so through arrows, pathways, and directing their line of sight. 

Arrows are not subtle but can be a good way to point directly to where you want the visitor to go. With pathways, consider the image of a road, and your eye will naturally be drawn to the end of it. 

Triangles are often used as directional cues because they are a dynamic shape. Converging lines often draw people’s attention to a CTA too. Designers often use images of animals and people with an eye line looking in the direction they want you to look. If we see eyes, we naturally want to look at what they’re looking at. Another popular set of imagery is to use babies and attractive people. Humans are naturally drawn to both! 

4. White space

White space or blank space is a principle in web design overall. Space can be white or another color but the idea is to use spatial positioning to allow your CTA to stand out. Your eye is given one thing to focus on.

Don’t make your landing pages too busy. Breathing room and space make your landing pages seem calm and allow your CTA to be prominent.

5. Urgency and scarcity

When people feel a sense of urgency to buy a product or that there is a limited supply, it pushes people to buy faster than they might have otherwise. These principles are called urgency and scarcity.

We often hear phrases like ‘Buy now’, ‘This offer won’t last long’, and ‘Don’t miss out’ in advertising and marketing. Companies like Amazon, Ticketmaster, and others use urgency to their advantage.

If you ever shop on Amazon, you’ll notice a countdown timer that says something along the lines of ‘Do you want your order by Wednesday, 10 December? Order within the next 10 hours and 12 minutes and choose One-Day Shipping at checkout.’ This concept of urgency makes people think, ‘Oh, if I don’t buy it now, I’ll miss out’ and encourages people to make purchases, perhaps, more impulsively.

With Ticketmaster and other ticket vendors, it’ll say something like ‘You have fifteen minutes left to buy your ticket’ and a timer will count down your remaining time. Again, if you want the ticket, you’ll purchase quickly because you’ll feel you’ll miss out otherwise.

When shopping for items like airline tickets, airlines often use the concept of ‘scarcity’ to good effect. They’ll say things like ‘Only 4 tickets left at this price.’ Just as with the countdown timers, this finite number makes people want to buy quickly. (That and we know that tracking cookies will increase ticket prices each time we look.)

6. ‘Try before you buy’

Just like in grocery stores when food companies provide little samples, customers are more likely to purchase a product they’ve never tried or heard of if they can sample it and see if they are getting ‘good value for money’. You may have been persuaded to buy a different brand of orange juice this way, and your customers might increase their chance of purchasing from you if they get a free trial.

For eBooks, you may give away a free chapter as a PDF on your landing age or you may show them five minutes of your webinar. You may feel that this concept is counterintuitive, but it’s better to allow people to see if they really want your product (true leads) than people who are just downloading for the sake of it and will never become converted customers. 

Again, Amazon uses its classic ‘Look Inside’ feature for its books that allows you to decide if that book is for you. Also, by allowing people to try before they buy, it makes you look credible, authoritative, and trustworthy. People aren’t going in blind to be hoodwinked; you believe in your product so much they can have a preview. 

7. Social proof

The last principle is social proof. People always want to know that someone else has tried the product or service and liked it. Consider when you buy something on Amazon, do you look at the reviews? When you decide where to eat, do you look at the reviews? Conversely, if you’re passing by a restaurant and you see it’s packed to the gills and people are waiting outside the door, does that make you think it’s worth going there? Probably! 

NEW! Key Medium releases a social proof website widget tool “Net Qualified.” Try it free!

You can drum up social proof with product/service reviews, testimonials, and case studies, but on a landing page, you may want to give a sense that something is happening by showing the number of social shares, how many times your webinar has been signed up for, how many ties your eBook has been downloaded, how many visitors you’ve had, or even by sharing a testimonial or two, especially if the company is known to your target audience or in your sector.

How do you enable conversion-centered design on your landing pages?

By following the seven principles above, you’ll increase your chances of conversion. The principles are tried and tested, but the ultimate factor is how well your designers have designed your landing pages. You need an expert designer.

As with any web design, it’s also a good idea to test different elements. You may have two identical designs and, say, change your CTA button color. Does the blue button convert more leads than the orange button? Does the background image matter or does white space gather more information? Which design facilitates more mailing list sign-ups? With all web design, testing is another part of the success puzzle.

Do you need help with your landing pages?

At Key Medium, we have expert web designers who understand conversion-centered design. Get in touch today if you need a landing page that is guaranteed to convert visitors to leads.