Editor’s Note: This post has been updated with new content and links.
Original Publication Date: May 15, 2018
Why is KlientBoost always looking for landing page inspiration?
It’s simple — because there’s no one right way to design and optimize a landing page. There are tools and methods, however, that we can rely on and test to boost conversion rates.
We started collecting examples of where these tactics were used, and before long our landing page inspiration list grew to include dozens of real-world cases. After all, it’s one thing to talk about it, and another thing to show you how it’s done successfully.
Let’s get started! 🙂
Landing Page Inspiration Example #1: Keep It Simple
Typically, a landing page will only need 4 core elements above the fold:
- Hero image(s) that clearly communicates the product or services being provided
- Headline and subhead that communicates your UVP (Unique Value Proposition) clearly
- CTA (Call-to-Action) that contains the core offer visitors will receive when they convert
- Logo that communicates the brand of the page the visitor has landed on (usually linked to your website homepage)
According to HubSpot, 55% of visitors spend fewer than 15 seconds on your website. Therefore, it’s important to be concise and clear with your imagery, copy, and branding throughout your landing pages.
Example #2: Use Color Wisely (Make Your CTA Button Stand Out)
You might be tempted to make your CTA button color match your branding. But we’ve found through our own landing page tests that CTA buttons with contrasting colors that stand out tend to convert better.
For example, when we ran an A/B test for a home loan mortgage client, we found that a CTA button that contrasted with their brand’s green increased their conversion rate from 9.57% to 13.18%.
It may seem obvious once we’ve pointed it out, but drawing the users’ eye to the action you want them to take on your landing page is actually a good thing.
Example #3: Communicate Your UVP (Unique Value Proposition)
You can test how effectively you’re sharing your UVP by asking a test visitor (like a fellow coworker) to open the landing page and look at it for five seconds.
If they can’t identify your UVP in five seconds or less, you’re probably doing something wrong.
Here’s a great example of a clear and concise UVP-based headline and subhead from Instapage:
Example #4: Get Visual with Your Copywriting Descriptions
The focus of a landing page should be providing ROTI (return on time invested). In other words, it should be worth your (or your clients’) time and money.
Although it may sound counterintuitive, you can use copy to provide value by showing, not telling — just like your 10th grade English teacher used to say.
Here’s what I mean:
- “Sign up now!!!” – Not very effective.
- “Want to save time shopping? Sign up with us!” – Better, but not quite there yet.
- “Get totally customized and awesome deals directly from shops you love without the hassle of searching the web for hours.” and follow up with, “Here’s how” – Much more effective in communicating UVP & ROTI.
News flash: people don’t like to read. Make sure your copy is as concise as possible and avoid “plague words” that waste time.
In this example, we can see how a simple headline change can make a world of difference.
Not only should you make it clear what your core offer is (in this case, it’s to download a free guide) but you also should be communicating your UVP or that the guide has hidden insight the visitor will want to know about.
Example #5: Add Social Proof to Boost Credibility
Including social proof is vital to making any product or service credible.
This can be in the form of statistics, videos, case studies, reviews, ratings, amount of customers who use your product or service, or written responses or comments.
Perhaps the visitor needs a little “push” while they’re filling out the form on the landing page…
Example #6: Use Icons With Text
Using iconography over plain text is helpful, especially in these scenarios:
- You have a lot of copy.
- Copy contains “steps” to a process, or your product or service requires “steps” in order to convert.
- There are unique features your product or service offers over other products and services.
In this variant, we decided to use icons instead of a background image and numbers. The first variant produced a 30% higher conversion rate than variant 2:
Example #7: High Quality Images (No Pixelated Photos…EW)
Squarespace is a great example of using high quality imagery to make your brand reputable:
One of the best ways to convince people your product or service is high quality and worth their while is through relevant imagery. That way, visitors will be less likely to bounce off your landing page and will, therefore, be more likely to convert.
“A bounce rate in the range of 26 to 40 percent is excellent. 41 to 55 percent is roughly average,” according to one analysis of bounce rates in Google Analytics. “56 to 70 percent is higher than average, but may not be cause for alarm depending on the website. Anything over 70 percent is disappointing for everything outside of blogs, news, events, etc.”
Always make sure the images aren’t too large for loading times. Google research revealed that a loading time increase from 0.4 to 0.9 seconds can reduce traffic by 20%.
Some general best practices:
- Resize images yourself, as opposed to having the browser resize it.
- Compress images in PhotoShop, an online compressing tool, or even in Paint.
- Experiment with different image file types (PNG vs. JPG) to optimize quality without sacrificing load times.
- Leverage page caching as much as possible.
We like to use TinyPNG, a great (and free!) resource, to compress images for the web.
Example #8: Choose the Right Font
A/B testing a simple font change for Click Laboratory led to a 133% increase in conversion rate:
While serif type is more readable on print, sans-serif fonts are usually easier to read on screens. Serif works great on landing pages, however, especially for large bodies of text.
You can use serif and sans-serif typefaces depending on your target audience as well. Sans-serif typefaces tend to appeal to younger, tech-savvy crowds, while serif typefaces appeal to more mature audiences.
Example #9: Include Relevant Qualifying Questions in Your Form
When we changed an offer for our legal practice management software client, we found that we didn’t need to ask for as much personal information. By offering a free whitepaper instead of a free consultation, we could engage more leads by asking to contact them via email, which visitors through the conversion funnel more effectively.
We also found that asking for the company name instead of a personal phone number (a much less aggressive request) boosted conversion rates by almost 50%.
Low intent offers for colder traffic gives you the perfect opportunity to ask them to sign up for a free consultation, demo, trial, etc., on the thank you page or even retarget them with paid search.
Landing Page Inspiration Example #10: Choose CTA Button Copy Wisely
Your Call-to-Action should be clear, not intimidating, and not open-ended.
Let’s say you have a lead-gen landing page where you’re trying to get consultation sign-ups. A CTA button that says “Get Custom Pricing” instead of “Get a Free Consultation” is much less intimidating and will, therefore, reduce the friction on your landing page.
For pages where you download an eBook, saying “Download My Free Guide” instead of saying “Get My Ebook” is usually much more effective.
Here are some great Calls-to-Action we use when the core offer is to get a demo:
- See It In Action
- Watch Now
- See Now
- Join Live
- 10-Min Demo
- Get Recording
All of these sound non-aggressive, but still get the point across.
Although it’s best to be specific with CTAs, sometimes a CTA like “Get Started” works extremely well. Adding “Get Started” CTA buttons to many of our trial landing pages has boosted conversion rates 100+ percent. We can always think outside the box with “Get Started” CTA buttons, however.
Example #11: Match Visitor Intent
The mindset of a user when he or she enterings a keyword into the search engine is called user intent in the landing page world. To satisfy user intent, it’s important that the headline on your landing page is clear and relevant to the keyword phrase your user is searching for.
Example #12: CRAP – Contrast, Repetition, Alignment, Proximity
The four basic principles of graphic design are Contrast, Repetition, Alignment, and Proximity, or CRAP. (Save your jokes, we’ve heard them all.)
Contrast, for example, helps to highlight and focus attention. The use of color, shades of gray, size, visual weight, and so forth can produce contrast.
Example #13: Include Pricing Whenever Necessary (And A/B Test It If You’re Not Sure)
A good rule of thumb is to include pricing with a high intent/hot traffic offer like a free trial. If you’re offering something that’s low intent (colder traffic) like an e-book or a demo, pricing is usually not necessary.
Another great example of when to include pricing on a landing page is when the visitor is being brought to a checkout page. And like this Eventbrite example, use an external tracking code to see if visitors who land on your page are purchasing tickets.
Example #14: Give a Sense of Urgency/Scarcity
Having something as interactive as a countdown clock to push the user to convert before “time runs out” is a great idea for A/B testing.
Example #15: Make Sure Your Landing Page is Mobile Optimized
Mobile is the fastest growing platform for digital marketing. Already, 74% of people use their mobile phones to help them while shopping. There are some rules/best practices you should follow when optimizing for mobile:
- Quick load times
- Short, action-oriented titles
- Short, smart landing page copy
- A CTA button that works well in touchscreen mode
- The most relevant information is above the fold
- Functional in landscape and portrait mode
- No unnecessary navigation links
- Asks for minimum information on forms
- Possibly uses a “click to call” button versus a CTA button.
Example #16: Use the Breadcrumb Technique
Getting your visitors to “micro-convert” before they “macro-convert” (what you’d technically consider a “conversion”) can also increase the effectiveness of your landing pages.
Some of the psychology behind why multi-step landing pages work so well includes:
- Qualifying questions give the visitor the impression that they’re getting a personalized experience rather throwing their name, phone number and email into the ether.
- People are both busy and lazy, and filling out lead gen forms can be time-consuming. If you first ask qualifying questions, the visitor will at least micro-convert and then finish what they started and give up their personal contact information.
A qualifying question like we did for a client with “how does your company currently manage sales tax compliance” is a great example of how to lead your visitor through the funnel and get that micro-conversion:
Needless to say, the form after will ask for the personal contact information along with a CTA that says, “Send a Quote”.
Example #17: Build an Interactive Landing Page
There are many different ways to have an interactive landing page — icons that animate when you hover, clickable items, image decks, and you can even get creative with your form process. Not all landing pages have to be static run-of-the-mill fill-in form fields.
Example #18: The Decoy Effect
Definition: The decoy effect is a cognitive bias that means people can be persuaded to change their preference between two choices when a third (decoy) option is introduced.
The decoy has to be clearly inferior in all respects to one of the offers, and inferior in some respects to the other, to make them both of them look more attractive.
Example #19: Competitor Comparisons
Another effective landing page tactic is to include a comparison chart with your brand and a competitor’s information to show the visitor clearly how your product or service is superior.
Landing Page Inspiration Example #20: Gated Content
Gated content is a great way to accommodate cooler traffic and encourage visitors to move through the funnel and become a paying customer.
What is gated content? Online materials like white papers, articles, and videos that require that users fill out a form before they access them.
According to content marketing expert David Meerman Scott, ungated content is downloaded 20 to 50 times more often than gated content. The downside, however, is that ungated content doesn’t give you access to any lead information — which is the point of the content in the first place.
We’ve found that gated content works especially well during the holidays. Our clients see much higher conversion rates with gated content behind seasonal offers on landing pages.
Example #21: Give Special Attention to Your Hero Image
The hero image is the first thing your visitor sees on your page. The hero image should communicate exactly what the user is going to expect/receive from filling out the form, calling, or signing up.
Here’s an example of Uber’s excellent landing page:
Example #22: Offer Ebooks/Whitepapers to Grab Cold Traffic’s Attention
By definition, landing pages promoting an ebook are aimed at low-intent or colder traffic visitors. To connect with this audience, ebook landing pages should include the following:
- Short copy
- Picture of the ebook cover
- Summary of the ebook’s content
- How it will benefit the visitor (why the visitor needs it)
- Mention that it’s free
- One-step form (low intent offer doesn’t need qualifying questions)
- Minimal fields
Unbounce has a great example of an ebook landing page that’s actually focused on conversion rate optimization:
Example #23: Add Videos
Videos are a great way for your visitor to experience your landing page without actually having to scroll through and read.
Patagonia, a company already known for unique marketing campaigns that stick with their consumers, uses video as main form of communication with their customers.
It’s important to ensure the video on your landing page does not take priority over your headline and CTA button.
Example #24: Add a Personal Vibe with Staff Summaries
Landing pages for public-facing companies are great candidates for including staff/team images and summaries. These can include pages for doctors, medical groups, therapists, public speakers, lawyers, rehab facilities, and more.
Wine label design and marketing firm Affinity Creative Group has great staff photos and bios on their landing page. Check it out:
Example #25: Don’t Forget Your Thank You Pages
Thank You pages can be particularly action-oriented when offering gated content such as an ebook. For instance, if your offer is a downloadable ebook, offer access to an immediate download button or an email delivery of the link, so they can save the reading for later.
You may also want to include a link to follow through with a higher intent offer like a trial or demo as well as share with a friend or on social media. Once the visitor converts, you really have nothing to lose, especially for gated content landing pages.
When I opted in for a HubSpot ebook, I received access to the file download both in the immediate Thank You page as well as in the auto-response email.
Example #26: Add Bottom-of-the-Page CTA Sections
Putting CTAs not only above the fold but also at the bottom and middle of your landing page is great, especially for longer pages.
Very few users will actually take the time to scroll back to the top of a landing page to convert, which is why Seedlip’s website incorporated multiple CTAs:
Having a CTA at the bottom of your landing page gives the visitor one last chance to convert, and given that they’ve made it to the bottom of your landing page, it’s still worth a shot.
Example #27: Stick to Your Brand
Apple is the first company that comes to mind when I think of brand awareness. Their brand is communicated clearly and without interruption from their website, all the way to the iPhone you may be holding in your hands.
The branding is so clear and minimal on Apple’s main website that it basically functions as a landing page:
Example #28: For Mobile Apps, Consider Variations of Landing Page
A mobile app landing page should contain:
- Picture or video of the app in use
- CTA that allows the visitor to download directly, sign up, or start a free trial
- Price (if it costs money to download)
- Positive reviews of the app
For example, an app called Groovo allows you to edit videos on your phone and put a music track over the video before posting it to social media:
Example #29: Consider Variations of ECommerce Landing Pages
Ecommerce landing pages can play an important role in motivating traffic to continue engaging with your brand and ultimately convincing them to make a purchase.
Keep in mind, however, that landing pages are different from product pages.
Landing Pages are used to drive paid targeted traffic to a specific conversion. Landing pages are considered lower in the funnel, or closer to the final sale.
Product Pages are used to attract browsers (both organic, direct and less targeted paid audiences) back to a page and allow for additional browsing. Product pages are considered mid-funnel, as consumers are still comparing options.
This Nike page is a great example of a product page that allows mid-funnel users to shop and compare options before making a purchase:
This landing page is selling a kit that gives the visitor a variety of options at an ‘exclusive’ price:
Landing Page Inspiration Example #30: Consider Variations of Landing Pages For Lead Generation
Good lead generation pages include a multi-step process, which we discussed earlier. If you get a visitor to micro convert (i.e., by asking qualifying questions in the first step) then they’re more likely to macro-convert (i.e., by giving up their personal information).
Depending on the industry, core offer and some other factors, there are many different qualifying questions to ask in the first step. Some great examples are:
- “What’s your goal today?”
- “How soon are you looking to ____?”
- “What’s your industry?”
- “What are you looking for today?”
Also, it’s best to require your visitor to do the least amount possible — get creative with options like these:
- Use radio buttons
- Drop-down fields
- Multiple CTA buttons
This still gives you valuable information on your visitors and potential customers. Here’s a great example from our Australian client who specializes in home loans:
Because we eliminated a whole step, the conversion rate went up almost 30%.
Multiple steps help reduce friction throughout the funnel and on your lead-gen landing pages. And the less intimidating you can make your lead-gen page, the better.
Example #31: Consider a Call-Focused Landing Page If Targeting Mobile
Call-focused landing pages are especially needle pushing for conversion rates if your traffic is mostly mobile. A majority of mobile users would rather call a business directly than fill out a form and wait for a call from a sales rep.
A restaurant is a great example of a client that would want their phone number to be easily accessible:
Example #32: Give Your Page Personality
Even for something as dry as banking, you can make your brand fun and engaging. To target millennials, Simple offers online banking with built-in budgeting and savings tools:
Example #33: Try Out Animations
As long as they don’t slow loading times down too much, consider incorporating animations. Rogie’s portfolio, for example, has some great animations that make the page more fun and interactive:
Tip:If you have to choose between page speed and fun animations, always choose page speed.
Although most visitors won’t scroll all the way to the end of most landing pages, footers can give you one last chance to engage those few who do. In fact, some landing pages work best with the form as the last element on the page.
Creativebloq has some great examples of beautiful footers on websites and landing pages:
Example #35: Review Ease of Use (Wise UX Design)
You want the visitor to be able to navigate throughout your page easily. Some tools to help with user experience on the landing page:
- Sticky footer/header
- Smooth scroll buttons
- Contrasting CTA buttons from other clickable items
- Hierarchy of information
Example #36: Add Illustrations
Hand-made illustrations are a great way to personalize your brand and give it some visual oomph. They can communicate your message easily and allow you to use more concise and effective copy to convert visitors.
Allbirds, a wool shoe brand, does not hold back when it comes to illustrative style:
Even on the checkout page, an animated illustration entices you to proceed to purchase the product.
Example #37: Test One-Step vs. Two-Step Forms
We like to stick to the Breadcrumb Technique and ease visitors to macro-converting slowly, especially for landing pages with lead-gen forms. The Breadcrumb Technique’s multi-step landing page forms, however, don’t work for every offer or every industry, which is why you should test this tactic for yourself.
For example, we work with a podiatry specialist in Los Angeles who has a one-step form that converts at a rate greater than 10%:
Example #38: Use Chatbots to Make Converting a Conversation
Chatbot conversion experiences are a great way to turn your conversion forms into a conversation. Easing users into the conversion process can make your brand feel more familiar and less salesy. It can also help you acquire more user information if you know how to bide your time.
Chatbots are already a great way to answer user queries on your landing page, like RapidMiner’s example below:
The more you can cater to your potential customer’s actual questions, the better off you’ll be. And if you can apply that same logic to your conversions themselves, your results should rise along with your customer satisfaction.
Example #39: Include Features of a Product
At KlientBoost, we like to stick to the “rule of three”. This means we try to keep the features of your product within 2-4 main points so the content will be easily digestible. Although we don’t use templates, Unbounce has plenty of great template designs that visually apply the “rule of 3”:
Landing Page Inspiration Example #40: Add Quantitative Testimonials
Showing numbers from successful customers is a great way to increase social proof and push the conversions needle.
This landing page has some quantitative testimonials that show great value in the company:
Example #41: Add Qualitative Testimonials
Positive reviews should be highlighted on your landing page to increase social proof, credibility and therefore, boost conversion rates.
Testimonials should include:
- Star ratings (if possible)
- Company logos (especially if it is a large brand)
- Name and position held as long as it is relevant
- Photo of the reviewer
Here’s a qualitative testimonial from a client’s landing page that offers a free trial:
Wrap Up on Landing Page Inspiration: What’s Next…
There are plenty of other great sites that have beautiful examples of landing pages like, Dribbble and Behance. Feel free to check out and follow KlientBoost’s Dribbble page too for more landing page inspiration.
After reading this post, what kind of landing page will you be creating? Let me know in the comments below.