Increase Conversion with Landing Page Design Inspiration

Posted by Hunter Liptrap on Oct 24, 2014
Hunter Liptrap

391279727_dfdb5eaa05_o.jpg

The success of a landing page is typically measured by one statistic: conversion rate. Conversion rate refers to the percentage of visitors that take the next step and fill out the form or click the button. That is it. Bottom line. No questions asked —  except how do you increase conversion rates?

The answer is complex, but the first step in the right direction is a little landing page design inspiration coupled with basic knowledge of what should and shouldn't be on a landing page in general. While it may seem obvious or repetitive to some, you could always use a refresher or a fresh perspective on landing page design as it is essential to conversions on the web.

First off, we need to take a look at the principles behind creating landing pages before we even take a look at the design elements and anatomy, let alone a few landing page design inspiration examples.

Do you even need a landing page?

While this may seem to contradict the purpose of this post, determining whether you actually need a landing page is, in fact, step one of the process. Ask yourself if what you are offering is worth requesting a visitor's email address. Not all content offers will be, but that doesn't mean you shouldn't put it on the web. Consider the fact that letting visitors access your information completely free, without filling out a form, will allow more people to see your content.

“IT REALLY COMES DOWN TO GOALS. DO YOU WANT A FEW EMAIL ADDRESSES? OR WOULD YOU RATHER HAVE A TON OF PEOPLE EXPOSED TO YOUR IDEAS?” – DAVID MEERMAN SCOTT (TWEET THIS)

David Meerman Scott has been a strong advocate of this for quite some time and he knows what he is talking about. Now, maybe you still have a landing page, but you may not need a form. Good top of the funnel content will sell your product or service, no email address required.

Copywriting

A huge part part of landing page design is the copy. You have to realize when it is appropriate, or most effective, to use long and short form content. Long content isn't needed unless you are explaining an expensive product or service. Typically more expensive items requires a longer buying process and elicit more questions because it is a high consideration purchase. Therefore, visitors crave more information because they want their questions answered.

Short content is best suited for low purchase decisions. If they want it, let them have it. No need to weigh the page down with 1,500 words if it is a buy-now situation. You could lose the visitor's impulse to buy.

Be Human

Be personable and transparent. No need to throw around business jargon or fancy language. Use a tone that matches how you would talk to someone in reality. Don't be a marketer or salesman all the time. It's ok to sit back and let them come to you — it's what inbound marketing is all about, after all.

Forms

The forms. The dreaded forms. Think about your reaction to forms when you are searching the web, and then apply that to your own forms. Personally, I almost never fill out forms unless I absolutely need what is behind it, free or not. When creating a form, think about how much information you really need from a visitor. If you don't need the 10 pieces of information you're considering, then don't ask for 10 pieces of information. Usually, an email address is enough.

However, there are some cases where you will need to ask for a large amount of information. In these cases, it is best to break it up into steps. Having 20 form fields on one page is overwhelming, but as long as you can break it up in a few easier-to-digest steps, you will have more success with your conversions. One tip is to keep the easy and fun information you need up front and then progress into the more sensitive and detailed information.

PRinciples and Anatomy

Once you take all of that information into consideration, it is time to look at the principles behind building conversion into your landing page.

Make your message clear - Your messaging should be clear and easy to understand. Take into account the copywriting tips from above in conjunction with being human and you should have this executed well.

Your Call-To-Action button should reflect what you want visitors to do - The button — it's a huge part of the landing page that needs to be just as clear as the messaging on the rest of your page. Why should the reader click it and what happens when they click it should be expressed.

Focus on a single offer - Adding a secondary call-to-action can be effective for directing someone from the free trial page to your paid subscription page, but, in general, you want to make sure there is only one primary purpose for your landing page's existence. If you want to target different groups, create different landing pages and test which performs best to gain a better insight into your customers' buying behaviors.

The anatomy of landing is quite simple. In fact, most do not have any form of navigation. This is to prevent distractions — any link that goes away from the page is an opportunity for the visitor to leave. This idea goes hand-in-hand with focusing on a single offer. That said, let's take a look at the other elements that are present on landing pages.

unbounce-landing-page-example

The above example is from unbounce.com, leaders in the field of landing page optimization. Notice the breakdown of the elements and the layout that directs your eye to the form initially with the eBook. If you are looking at this page on a smaller monitor, you won't even be able to see the lower section of the page. The slideshare image and the about the author / social proof section only exist to give you reinforcement that this is what you want. Obviously, this is a low consideration landing page, so it abides by the rules and has very little text on it, just a sentence and 7 bullet points. Very simple. With a clear Call-To-Action button that, while not all that interesting, tells you why you should click it and what is going to happen after you click it. Furthermore, the button clashes pretty hard with the rest of the page and really sticks out.

If you don't find any landing page design inspiration in the examples below, feel free to use this one as your example. You can tell it is quite an effective design layout.

Landing Page Design Inspiration

Widism

Widism

Pros

The page has a pretty clean design for a newsletter subscription list. The page lacks copy, but features a video, which, if you ask me, is more effective, especially for this newsletter that is about creating a better life experience. It is hard to relay a better experience through text, so video is the appropriate medium for their message.

The headline and sub-headline are somewhat unclear until you watch the video. It's more or less their tagline.

The form and call-to-action are excellent, they really pop, especially because they add depth to the page.

CONs

The video is a great idea, but the play button is fairly opaque. I almost didn't see it at first. While you do want your call-to-action button to pop the most, having all your content that your using be hardly visible isn't a good idea either.

This landing page is also not really responsive at all, which is kind of a turn off.

Font You

Font You

Pros

A cleverly-named website has a cleverly-created landing page. Imagine that. The headline and sub-headline on this page are a bit unconventional in the way the are wrapped, but they big, bold and in your face, telling you very clearly why you are on this page.

The form is also front and center as it is in the top portion of the page. While the button doesn't contrast with the rest of page, it draws attention from positioning.  The form is also very simple.

They execute a secondary call-to-action very well on this page as well. The very understated Log In button serves great functionality without taking away from the purpose of the page.

Further down the page, they feature a video explaining how this "project" of theirs works, which is beautifully done. If I was into designing fonts, I would have signed up immediately. I am not into that and still almost joined. There is something to be said for great video.

They also have a section with icons that demonstrates their reach across the world to demonstrate their social proof, which is quite clever.

CONS

Top level navigation is usually not good. In this case specifically, they link to pages that are very similar to what is already on this page.

Postable

Postable

Pros

The headline. Awesome. Very direct and to the point with a sense of humor. The form is obviously the centerpiece of this landing page, as it is the only thing on the page. However, I would argue that it is appropriate because of how short the process is. This is clearly an impulse "buy" and the header even tells you "20 seconds away" which is genius because we all value our time.

The website that links to this page is actually a one-page website, Postable, that gives you the option to login or sign up while explaining what you get.

postable

I would encourage you to click the image above to view the whole website, but they do a good job here providing an excellent section of social proof, followed by their call the action that really stands out to sign up, which links to the landing page.

Cons

I don't have anything bad to say about this one. Imagery, while not crucial to the design of the landing page, could improve on the humor started by the headline. However, if you look at the one page website as step one of the form, then they meet all the criteria for an excellent landing page. It also still maintains the ability to accurately measure the conversions of their landing page by having it on a page that isn't the homepage.

CodeAcademy

code_academy-compressed

Pros

The headline, featured image and form all appear above the fold and draw attention to the flashing input on the screen and the call-to-action button.

The headline is clear and gives you a reason to fill out the form. It's free. They counter the secondary call-to-action done by Font You by simply having a tab to toggle between forms.

Below the form is a featured video that isn't overstated in its layout, but provides a clear value as to why you should sign up to get started coding. In the next section, you'll notice they have three customer testimonials that tie everything together. Three is a good number from both a design perspective and emotionally for buyers.

Cons

The button isn't as clear as it could be. Instead of "Get Started," it could say "Start Coding," a very minor, but effective, change that makes the form much clearer.

The testimonials click away from the page. While, the individual pages that testimonials link to are powerful, they are most likely unnecessary, given the video and snippets that already exist.

What You Should Take Away

Hopefully, you were able to find some landing page design inspiration from the examples above. In conclusion, there are two final points I want to stress:

  • The use of social proof is a deciding factor for those who want to buy or sign up. They want to validate their feeling that you are the real deal, so by showing they you have helped out X, Y and Z, they can feel comfortable.
  • The use of text isn't the only medium appropriate to use on landing pages. Using video and slideshare are two powerful media sources you can use to tell your story in ways you might not be able to with text alone.

Photo Credit: Inspiration

Author
Hunter Liptrap

Hunter Liptrap

Creative Director at Modgility
Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.

Leave a Comment: