10 UX Tips to Build a High Converting Landing Page

In the broader sense, a landing page is the web page through which a visitor “lands” a website. Homepages frequently serve as landing pages, however any other page can be a landing page. For instance, if you have arrived at OnextraPixel from Google to read this specific article then in your case, this article page is the landing page.

In the world of online marketing, designers also create specific landing pages that complement targeted ad campaigns. Plus, in the last few years, many brands have begun to build their homepages following the same principles as they were targeted landing pages. The latter practice is especially typical of single-product brands, for instance web and mobile apps (just a few well-known examples: Telegram, WhatsApp, Evernote, Slack).

The main business goal of a landing page is conversion rate optimization (CRO). There are many best practices designers can use to increase conversion rates (make more people sign up, download, buy, etc.). In this article, I will show you 10 UX design tips with real-life examples you can use to create high-converting landing pages.

1. Turn Your Main Business Goal into a CTA

Many landing pages want to achieve too much at the same time. However, visitors being subjected to a heavy information overload tend to get confused and leave. Before starting to design your landing page, think thoroughly what is your number one business goal. Do you want people to download your app? Get beta testers? Launch a new product? Increase your newsletter signups? When you found the answer turn that main business goal into a compelling call-to-action (CTA).

For instance, have a look at the landing page of the Cryptagon crypto portfolio tracker. You can tell their main business goal at the first sight—they want people to sign up to their app. The message stays consistent throughout the whole page, they don’t distract their visitors’ attention with any unnecessary information.

Cryptagon Landing Page

2. Specify the Main Benefit in the Headline

A well-written headline is extremely important if you want to create a high-converting landing page. A good headline is short, eye-catching, and well-targeted. It’s a frequent error on landing pages that the headline specifies the product’s benefits from the site owner’s point of view. However, it should be the other way around. A headline can turn visitors into prospects only if it shows the product’s advantages from the user’s point of view.

For instance, Uber‘s landing page has a brilliant headline. It consists of only two words but captures the essence of the service. The “Get there” slogan starts with a strong action verb (“Get”) that literally calls visitors to action. Below the headline, there’s a subtitle as well that reinforces the message and further persuades viewers to try Uber.

Uber Landing Page

3. Show an Inside Look at How the Product Works

Many people tend to believe only their own eyes. Showing visually how a product works persuades more people to consider a purchase. The method works especially well if you use the illustration as a hero image. Hero images, sometimes also called header images, are full-width images residing above the fold and serving as background for the headline, sometimes a short description, and the call-to-action button(s).

The landing page of PayPal’s credit card readers shows the workings of the product in two different ways at the same time. In the foreground, you can see a product photo of two card readers and the PayPal app. While in the background,  there are two people, a shopkeeper and a customer, in the midst of using the product. The two images support each other and give a sense of security to the viewers that they are supplied with all the information they need.

PayPal Business Landing Page

4. Use Unusual Layouts

To make your landing page successful, you need to stand out of the crowd. There are different ways to achieve that—using unusual layouts is one of the best. Since the advent of front-end frameworks such as Bootstrap, box-style layouts have popped up everywhere on the web. Therefore, presenting the information in an unusual layout can make a viewer more interested in your product.

The landing page of the Ascend Indiana recruiting agency takes leverage of this method. They arrange the textual content around the magnified version of their logo that also features two images related to the agency’s activity—a cheerful job seeker and a cityscape from Indiana. Probably, they couldn’t have found a better way to catch the eye of their target audience immediately after landing on the page.

Ascend Indiana Landing Page

5. Include Logos of Reputable Brands

Logos of reputable brands work as visual cues for visitors who are unconsciously scanning the page for sufficient proof that the product has been made by a trustworthy company. Don’t solely think of logos of clients or partners. If your product or company has been featured in a credible publication don’t hesitate to add a “Featured in” section. Or, if your product somehow complements or enhances a well-known brand you can also add its logo to your landing page.

The landing page of the Platforma Web Wireframe Kit proficiently uses logos of other companies to gain the trust of their visitors. Right under the product image, they display logos of the tools they have made use of in their wireframe kit. All the brands are well-known by their audience, such as Sketch, Photoshop, or Adobe Illustrator. They keep consistently using logos down on the page, for instance they have an impressive “Used by” section as well.

Plataforma Landing Page

6. Use Unique Graphics

Unique graphics serve the same purpose as unusual layouts. They intend to make the page stand out of the crowd and leave a lasting impression on the viewer. If you frequently browse the web you will see many different ways web designers put unique graphics to use. Hand-drawn product photos, custom icon sets, well-crafted characters representing the users or the creators, and even comic strips.

The landing page of the I Done This team progress tracking app features one of the best graphics I have ever seen. They use the common “one icon one feature” design solution, however the hand-drawn animal characters make the illustration one in a million. The animals are drawn in situations that correspond to the features of the app. For instance, the rooster gives daily status updates, the horse stamps a document with its hoof, etc.

I Done This Landing Page

7. Add Data or Statistics

Using numeric data on web pages is a current web design trend I have recently covered in detail. People get bombed with tons of information every day, therefore the average attention span has drastically decreased during the last few years. Showing users data visually, by either featuring numbers/percentages or including graphs/charts in the design, can help you gain their trust.

The Hotelchamp booking platform uses this design technique on its landing page. The numbers are all relevant to prospective customers, as they show how the platform affects the user’s business. Altogether, there are four different numeric data on the page (number of hotels, number of countries, percentage of increase in bookings, number of booking engines the app integrates with). Four is a good number, as the data they show is persuasive enough, however the technique is still not overdone.

Hotelchamp Landing Page

8. Make Chat & Contact Easily Available

If you want to achieve high conversion rates your landing page also needs to offer customer service so that visitors can ask their questions. Whether you provide them with an email form, a live chat bubble, or a direct call button, the most important thing is that the contact option always has to be visible and easily available.

On the landing page of GoDaddy’s SEO services, you can see an elegant implementation of the method. A “Request a Call” button appears in the sticky header, therefore it’s constantly available while the user scrolls down the page. Moreover, in the bottom right corner, there’s also a live chat icon using a contrasting color (purple). The live chat icon is also visible during the entire time. Giving options to customers is a great marketing tactic that suggests their needs are really taken care of.

GoDaddy SEO Landing Page

9. Repeat the CTA at the Bottom of the Page

Repeating the call to action on different spots of the landing page is a well-known marketing technique. The call to action with a headline, short description, and recognizable button should always be shown above the fold. Many designers choose to repeat the button in the sticky header, as it stays visible when the user scrolls down the page. However, if you have a long scroll landing page it’s probably even a better idea to repeat the CTA at the bottom of the page.

The Crazy Egg heat map tool makes use of this conversion optimization technique on its landing page. On the screenshot below, you can see the bottom of their page. While the placeholder text inside the input field remains the same (“Your website URL”), the label of the button changes. On top of the page, they use the “Analyze” action verb, while at the bottom they switch to the “Get Started” call.

Why do they do so? Viewers who click the CTA button right on the top before scrolling down belong to a different user group than viewers who scroll all through the page to get as much information as possible. Therefore, it makes sense to address them in a different way. Don’t afraid to (slightly) change the tone of your CTA whenever you deem it reasonable.

 

CrazyEgg Landing Page

10. Use a CTA Button Design That Stands Out

For a high landing page conversion rate, you need to design a call to action button that visually stands out on the entire page. Color, shape, position, layout all matters. There’s no universal rule, however the button(s) must fit well with the rest of the design.

For instance, the Lumio bookmark organizer app places its CTA button right in the middle of a sticky header that stays visible throughout the whole user session. The oval shape of the button excellently harmonizes with Lumio’s logo and the round-shaped social media icons. And, as yellow has a certain sunshine feel, the “Get Lumio” button becomes the most eye-catching visual element on the whole page.

Lumio Landing Page

Learn More about Landing Page Design

Knowing the principles of how to build a high-converting landing page is just the first step to master the trade. Seeing a lot of examples, analyzing and understanding the work of other designers is just as important. To increase your exposure to landing page design, have a look at our collections of flat landing pages and landing pages using creative graphics. If you have a WordPress site also don’t miss out on our landing page plugin comparison.

Finally, don’t forget we have great online communities on Facebook and Twitter with thousands of members interested in web design. If you haven’t yet joined now is a perfect time.

 

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.