Landing pages exist to serve one purpose: getting website visitors to convert to the next stage in the buying journey. Although their purpose is simple enough in theory, actually creating a successful landing page requires some detailed planning and creative testing.
Regardless of what your business is selling or the conversion action you hope to instigate, it's helpful to get inspired by seeing what other great landing pages look like. And because there's no one "right" way of doing a landing page, you'll want to check out examples from lots of different industries for different stages of the buying process.
Want to get inspired? Check out the great landing page examples below. Disclaimer: I don't have access to the analytics for each of these landing pages, so I can't tell you specifically how well they convert visitors, contacts, leads, and customers. But many of them do follow best practices while also implementing a few new experiments that could give you ideas for your own landing pages.
Learn how to design your own landing pages that convert by downloading our free guide here.
(And for even more landing page-specific inspiration, check out these 15 great landing page examples, too.)
11 Great Examples of Landing Page Design
1) Lyft
We love that on Lyft's landing page, they zero in on their drivers' main motivation: earning money easily.
We also love that, in addition to the "Apply Now" form, drivers can type their city and the number of hours they might drive for Lyft in a week to calculate how much they'd make. When visitors fill out that information and press "Calculate," they aren't taken to a new page. Instead, they see a dollar amount followed by a new call-to-action button to "Apply Now" (which, once clicked, takes drivers up to the form).
By offering these two conversion paths, they're able to address two different types of people in the conversion path: those who are ready to make the decision now and those who need a little more information before they convert.
2) Muck Rack
This landing page design has it all. It is visually appealing and interactive, offers scannable yet descriptive headers about Muck Rack's services, and uses quotes from industry professionals as social proof. Plus, the page is intuitive and easy to navigate.
The cool part about this landing page is that it can appeal to both of Muck Rack's audiences. The top of the page is split into two, featuring their two different services side by side. Once a visitor moves his or her mouse over either of the "find journalists" or the "build free portfolio" CTAs, the form slides in to cover the screen.
3) MuleSoft
This MuleSoft landing page is great. It has simple and relevant imagery. The headline is straightforward and the description of the ebook informs viewers of the specific value they will get by downloading their ebook. There is only one call-to-action -- "Download" -- that stands out on the page thanks to a bright green call-to-action button.
The only thing we'd change about this landing page is that we'd remove the navigation bar at the top. They tend to distract visitors and lead them away from the intended action. Not only is this a landing page design best practice, but we've also conducted A/B tests that've shown removing navigation links from landing pages increases conversion rates.
4) Readitfor.me
The hard part about using your homepage as a landing page is that you have to cater to several different types of audiences. But Readitfor.me's homepage does this very well. This page is clearly designed for two different types of visitors: those who are already familiar with their services and ready to get started, and those who are not really familiar with their services at all.
For people who are coming to the homepage with the specific intent of creating an account, the form itself is front-and-center. Located directly next to the form is a video that builds off of the sub-header question and briefly describes their services in more detail for people who want more information before creating their account.
The remainder of the page is designed for viewers who are not familiar with Readitfor.me. The page lists four reasons to get started -- all of which are easy to scan and understand. There is also a CTA below each of the four descriptions, so as soon as viewers feel they have enough information, they can click the CTA to get taken back up to the form at the top of the page without having to scroll.
Finally, at the bottom of the page, the company offers the logos of a few recognizable businesses that are already using the Readitfor.me team plan -- a great use of social proof.
5) Codecademy
I like this page because it's simple in both copy and design. The image above the fold is a computer screen displaying an HTML bracket with a blinking cursor -- a whimsical, clear visual to accompany the form on the right.
The form itself is simple and only requires an email address, username, password, and a validation that you're not a robot to create an account. Or, you can just use your Facebook or Google Plus login, shortening the conversion path even further.
For visitors who need more information before creating an account, the landing page also offers a video below the fold that explains their concept and value by way of a real-life success story. Again, this helps make the potentially intimidating world of coding more approachable for beginners.
Those who need even more convincing can continue scrolling for additional testimonials and other forms of social proof.
6) Advanced Data Systems Corporation
Just because this landing page example isn't flashy doesn't mean it isn't a great landing page. The header and subsequent sub-headers make the offer -- a live demo -- immediately clear. We also like how the larger, orange font makes both the form and the customer testimonial stand out. And extra points to Advanced Data Systems Corporation for customizing the classic "submit" button copy to say "Schedule My Demo."
7) Club W
A little bit of delightful copy can go a long way on your landing page. We love the playful little aside -- "(Hint: It's Wine)" -- that Club W included below the header of their corporate gifting landing page. It humanizes the brand and makes them likable, which could have a positive impact on their conversion rate.
The copy below the picture is equally great: It concisely explains exactly what customers can expect from their service. Finally, we like that they included both customer testimonials and an email address at the bottom in case people have questions about customization.
8) Grove Labs
Here's another example of clever, delightful copy on a landing page. We love how Grove played with the microcopy within the form fields. It shows personality, reminding us there are real humans behind the website's and product's design, which brings us a little closer to the brand. The earthy color palette is in keeping with the product: a year-round garden in your home.
9) Startup Institute
Visitors to your website won't hand over their personal information without knowing what they're going to get in return. On their landing page, Startup Institute makes it abundantly clear what will happen after you apply by answering FAQs right beside the form. This might prompt some people to say, "They read my mind!" Set expectations upfront on your landing pages to clear the air for anyone who might be hesitant to fill out the form.
10) Edupath
Who is your landing page's target audience? While most of Edupath's website content is directed toward students, there are sections dedicated to advising parents on helping their teenagers through college applications and SAT preparation. The landing page below is in one of these sections.
When parents fill out their teenager's name, email address, and mobile number, a link to download the Edupath app is sent directly to them. The folks at Edupath know students are likely to do something if their parents ask them to -- especially if the thing is an easy, one-click process. This whole conversion path is a clever and helpful way to get the apps on more students' phones by way of their parents.
11) Vonigo
If you're selling something complex, you might be tempted to try to explain all of your product's cool features and benefits on your landing pages. But complicated copy and crowded designs can be really overwhelming for your website visitors -- it might send them running the opposite direction.
That's why we love Vonigo's landing page below: It's a great example of using simple copy and design on a landing page for a complicated product. They did a good job of pairing a soft color palette -- which is beautifully offset by that bright orange call-to-action button -- with easy-to-read fonts, lots of white space, and a simple screenshot.
What other companies do you admire for their landing page design? Share your favorites with us in the comments!
Editor's Note: This post was originally published in July 2014 and has been updated for freshness, accuracy, and comprehensiveness.
No comments:
Post a Comment