Creating a conversion-oriented Landing Pages Design

Written by

DigitalMenta

UX · 23 / 04 / 2015

We have been hearing for years about User Experience, usability, accessibility… Many rules, trends and advice that we can follow when we face the design of a website. But in designing a Landing Page, with an objective as clear and important as the achievement of leads, we have to take into account some key points. Because when we design a landing Page and the results (measurable, compared!) are not favorable, it means that something we have done wrong…

1. The goal is conversion. Focus on that goal

The success of a landing page can be measured directly with numbers. If your analytics don’t return favorable results the landing Page is not being successful. And while there are many factors that can harm the conversion rate, the landing Page design has a lot to do.

What does it mean that the goal is conversion?

When designing a corporate website or promotional microsite, the main goal can be branding (” make brand” says the people of marketing), visibility or visual Impact, among others. However, when designing a landing Page, the goal is conversion, usually through a form.

If the landing Page design does not address that goal, then that design is wrong. It is no longer enough to comply with the basic rules of web design. Now, in addition, you have to focus your efforts on the user to fill out a form and click on a button. That button is, from the moment you start making the wireframe, your sacred cow. The clicks on that button are your way of showing that your design is valid.

So in Digital Menta We say that what is not measured cannot be improved. Because a landing Page design that generates more conversions than another (for the same campaign, the same product, same investment,…) is definitely better.

Landing Page-button design

Button design on the landing Page, the sacred cow

2. Attracts the attention of the user to the key points of the landing Page

It is a fundamental principle of design (both graphic and web). Just like when you design a poster, you have to focus the view of the user/reader/peers towards important information and prioritize all the messages that your design offers.

Experts give some keys to this:

  • Play with the blanks. They favor a relaxed reading and allow to highlight and to prioritize the information. It’s no longer worth “seeing everything without scrolling”.
  • Create a visual tour. Take the Hero Shot user to the main headline, from there to the first paragraph and from there to the form. Use arrows if you see it necessary (be careful! You have to be subtle, do not “force” the user or be angry and go with bad experience…)
  • The “Call to Action”. That sacred button. That would add + 1 to our success. Take care of him, give him all your attention. Review everything you learned about color psychology when you were studying, because it is our key to success. Create an attractive and explicit message for him (“Send” is not attractive to anyone but, “Send this form and receive tickets for a concert in return” is another thing. I would click a lot more convinced, wouldn’t you?)
  • Use the colors in your favor, not to provoke stress on the user, to prioritize the information, to highlight your Call to action…

Do anything to make the user of your landing Page feel like clicking!

3. Connect directly to your target audience. Get them to identify with your message.

It’s a matter of logic. But if you lose sight of it, you’re going to lose Leads.

There are 3 key elements with which you have to get the attention and emotion of the user:

The “Hero Shot”

It is the representation visualL (an image, a video…) of what your landing Page offers. If it is, it’s the main element of the landing, the first thing the user will see. And so we have to excite the user, get him to identify instantly and feel that he is in his environment, that he feels is something he aspires to. If our landing tries to capture interested in a firefighting course, easy! Put on a fearless firefighter. And if you are going to offer investments in solar energy, make the user feel relaxed and see a comforting sun, as we did in this case of success.

Landing Page Example Design

Design of the Hero Shot in a landing Page

The headline

This is something of a copy, but it is not to keep in mind that it has to be attractive, direct and that must make absolutely clear the matter of the landing page. That is readable, very legible. And visible, very visible.

The “Call To Action”

I’ve been telling you for a while, it’s our sacred cow. That’s what the success of our landing Pagemeans. Study its color, size, location and message. And make it become the ultimate and unavoidable destination of the visual journey you have prepared.

4. KISS (Keep It Short and Simple). And talk to your users to understand.

Design by landing Page Short

Design Simple and Short by landing Page

Sure you can summarize the tirade that you have spent the client in an infographic that will multiply by 1000 the pleasure of visiting your landing Page.

Why do we take care of the position of the form, its visibility and the relevance of the Call to action? Because it is the goal for which we build the landing Page (conversion as religion) and a form is filled “hot”. You have to excite the user to capture their attention and interest. A lot of text will only invite the user to click the “Back” button.

Someone invented the term UX For something. Never forget it.

Almost (I repeat, almost) as important as the Call to Action are the headlines of the landing Page.

Although this is not the designer’s business, you and I both know that you have to be a bit off-road.

5. Track the results of your design and act accordingly

A landing Page will be part of a campaign (either AdWords, social networks or an action in supermarket). During the duration of the campaign, if it is long enough, you will be able to detect and correct the errors that you made in the initial proposal by reviewing the results that the marketing people report to you (or your own, off-road friend).

If you find a very low conversion rate, it’s time to act. Can the form have too many fields? What if the hero shot fails to excite or attract attention? Do User tests (On this website, for example). And, of course, you value the possibility of carrying out a A/B TEST. Do you know what it’s about?

We hope that these keys will serve to optimize your landing pages. In a next article we will talk more carefully about the key elements that have to have a perfect landing Page, those that yes or yes must be until next!

Paloma García

UX · 12 / 12 / 2019

Use PageSpeed ​​Insights to improve the quality of a Landing Page

Users are increasingly demanding, so we must offer fast and satisfying experiences. Therefore, it is important to optimize the loading time of our landing page. And we must be more demanding with our site on mobile devices. According to recent studies, the average loading time of a page on a mobile device is 22 seconds. Taking […]

Paloma García

UX · 24 / 10 / 2019

What is CRO? Description and key concepts

In our blog we have already addressed issues related to the CRO concept, as tools to optimize it, what is AB testing and design improvements to maximize conversions. It is time to go back one step back and define in more detail what CRO (Conversion Rate Optimization) is, as well as other key concepts related […]

Pedro López

UX · 13 / 09 / 2019

Can a good web design increase the conversion rate? The answer is yes.

El  diseño UX/UI (experiencia de usuario/interfaz de usuario) ha cobrado una gran relevancia en los últimos años. Con páginas (landings) claramente orientadas a objetivos, cada decisión tomada en el proceso de diseño puede ser decisiva a la hora de llevar al usuario a buen puerto.

Send this to a friend