The UX behind designing landing pages that convert

Published in

UX Planet

7 min readMay 12, 2018

The purpose of a landing page is to convert visitors into potential customers. For any website, the landing page is mostly the first thing a visitor sees- so it’s representative of the overall product/company.

There’s always been a lot of dubiety over the ‘ideal’ landing page design, but a good conversion rate depends a great deal on the website’s goals and the audience. Clicks depend on a lot of factors, and vary for different contexts.

So, how do businesses convince visitors to take the plunge on their website? For this exercise, let’s take a dating website landing page which requires some basic user inputs before going ahead-

Looks pretty overwhelming right?

To make the comprehension easier, let’s break the page into 3 main sections-
1. the header (top section)
2. the primary content (middle section)
3. the UVP- unique value proposition (bottom section)

Kicking off with the middle area (section 2)- also the most important one for conversion on this page.

1. Be specific

To make it easy for users to convert, just ask for the vitals. Secondary information (here pincode and country) can always be asked after signing in.

Secondly frame the input in such a way that the user gets instant gratification on hitting go. They’re taking the time and effort to fill a form, and showing an empty screen (no results) after this would be just disheartening. Hence, giving an age range will produce more search results that just searching for a number.

2. Simple is best

People are lazy, and want to do as little as possible to accomplish their goal. The shorter and crisp the form is, the more likely it is to be filled by the users.

In addition to that, replacing the input blanks with more intuitive fields like drop downs or radio buttons helps quick and effortless entries. The dark background only adds to the visibility, making the form stand out.

3. Does size matter?

To make your prospect click the button, they must first realize that it’s actually a button. Make it big enough to stand out, and use a filled in color instead of just a border. It should be action-oriented — clear, concise and persuasive at the same time. No one likes to “submit” to anything. The more descriptive the action is (like find my matches or show me who’s looking), more likely people are to click on it.

🔔 Tip
In many cases, arrows or graphics on the button can positively affect click-through-rates. The arrow inside the CTA calls attention to copy and lets the user know exactly where to click.

4. Make it pop

Button color and design are important visual cues that tell the prospect where to click. Keep in mind that different groups of people respond differently to colors. Using the psychology of color, choose the one which best fits the user persona and emotion the website portrays.

Also, adding an assurance note stating that there wouldn’t be any charges helps a great deal.

5. The headline

The page headline is where everything begins — interest, attention, and understanding. It’s important that it very clearly describes what a visitor will get from the page (its goal) and that the message match is strong enough to show the visitor that they are in the right place.

You only get one chance at a first impression. To keep prospects interested, it must be crafted to effectively grab attention and simultaneously explain the offer. Keep it short (never more than twenty words, preferably ten), and offer smaller commitments instead of big convoluted ones.

Furthermore, fonts having bizarre shapes, artistic touches or various ornaments are generally tough to read in body text, whereas a clean and consistent one, with an appropriate font size helps read fast and clear. And as humans read in phrases (not letter by letter), text set in lowercase is easier to read as compared to full caps.

Moving on to the next section — the header

6. Navigation menu

Navigation menus on standalone pages connect it to other pages on the website. It is a set of directions of a website that takes visitors deeper into the experience. Unlike a website homepage (like the Facebook newsfeed), landing pages are dedicated pages created to persuade visitors to complete a specific action, thus all their attention should be directed on the conversion.

When you add navigation links, you give visitors the chance to get distracted and leave the page before converting. Refrain from using multiple fonts, combine similar options into groups and make the font size and placement consistent.

And the last section —

7. The value prop

One of the best ways to advance your value proposition is through a list of benefits. Always think about the user and how he or she will benefit. Benefits aren’t ‘we are awesome’, but ‘you’ll become awesome with this product or service’.

Benefits should be clearly focused on the user. It’s easy to digress and start talking about yourself as a company. Also, if the service involves private information, make sure you mention that you are using security best practices, such as a secure server or encryption.

🔔 Tip
When designing for legibility, minimalism always rules the day. As users mostly scan the content while reading, writing clearly and using hierarchy (bolder/ bigger font size) and organization (bullet points) helps them selectively focus on the words and sentences of importance.

Alright, so now our page looks something like this-

A couple of more changes to go..

8. Color and contrast

The black header with green text looks jarring and extremely out of place. Using many striking primary colors can make the design very distracting.

Blend the header into the page, and if the design permits, try sticking to one primary color and additional accent colors to maintain necessary focus on the important elements.

9. Detailing the design

Using shadows, playing with colors and defining shapes to harmonize the design can add to the overall aesthetics of the page.

Adding a subtle shadow to the headline and form container makes them stand out from the background. Another nuanced difference between the screens is the background pink gradient — the latter having a smoother color slope making it appear more soothing to the eyes. Additionally, the corners of the black container are rounded to match them to the button design, making them look like a family.

10. The hero shot

The adage “a picture is worth a thousand words” is especially true in the short attention span world of the landing page. Thus, backing up the page with a picture makes it easier to convey benefits to visual people. The idea here is to get the customers to empathize and place themselves in a scenario where they are using it. A great image is a quick and easy way to upgrade your landing pages and grab your visitors’ attention, a surefire way to gain more conversions.

🔔 Tip
Don’t overload the page with graphics. Adding images can be really tricky, so try keeping them simple and in step with the tone of your site and product.