Why is KlientBoost continually seeking Landing page inspiration? There’s no one right way to design and optimize a landing page. However, there are tools and methodologies we can stick to and test to boost conversion rates.
And we’ve put together some examples of where these have been used in these 40 landing page inspiration examples — because it’s one thing to talk about it and another thing to show you how it’s done successfully.
Related Articles
1) Keep It Simple
Typically, a landing page will only need 4 core elements above the fold:
- Hero image(s) that clearly communicate the product or services being provided
- Headline/subhead that communicates UVP (Unique Value Proposition) clearly
- CTA (Call-to-Action) that contains the core offer the visitor will expect to receive once filling out the form
- Logo where the visitor can click to go to the website homepage, and that also communicates the brand of the page the visitor has landed on
55% of visitors spend fewer than 15 seconds on your website. Therefore, it’s important to be concise and clear with imagery, copy and iconography throughout your landing pages.
Check out Breather’s landing page to see how minimal design makes their product & brand stand out. – image source
2) Use Color Wisely (Make Your CTA Button Stand Out)
Although you may be tempted to have your CTA button color match your branding, we’ve found through our own landing page tests that CTA buttons which are contrasting in color (stand out easily) tend to convert better.
For example, we ran an A/B test for a client who specializes in home loan mortgages, and we actually found that having a CTA button color that was contrasting their branded green boosted their conversion rate from 9.57% to 13.18%.
9.57% conversion rate
13.18% conversion rate
3) Communicate Your UVP (Unique Value Proposition)
You can test if you’re communicating your UVP well by having a test Visitor (like a fellow coworker) launch the landing page and allow them to look at it for 5 seconds. If they have no idea what the UVP is after 5 seconds, you’re probably doing something wrong.
Here’s a great example from Instapage of a clear and concise headline and subhead mentioning UVP:
Definitely grabs your attention. – image source
4) Get Visual with Your Copywriting Descriptions
The focus of a landing page should be providing ROTI (return on time invested), meaning make it worth the brand’s while.
Although it may sound counterproductive, with copy, you want to show, don’t tell. Here’s what I mean:
- “Sign up now!!!” – Not very effective.
- “Want to save time shopping? Sign up with us!” – Better, but still could improve.
- “Get totally customized and awesome deals directly from shops you like to buy from 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, so make sure your copy is as condense as possible and avoid “plague words” that waste time.
In this example, we can see how a simple headline change can make the 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.
This headline communicates the core offer, however, it fails to convince the visitor that the guide has hidden insight.
This headline communicates that the guide has hidden insight the visitor will want to know.
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, video, case study, review, ratings, number of customers who use your product or service, or a written response or comment.
Perhaps the visitor needs a little “push” while they’re filling out the form on the landing page…
Include a testimonial of a previous/current client like we did.
6) Place Iconography Over Text Whenever Possible
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 include iconography in lieu of a background image and numbers. This variant had a higher conversion rate than variant 2 (30% to be exact):
Variant 1
Variant 2
7) High Quality Images (No Pixelated Photos…EW)
Squarespace is a great example of a web product that uses high quality imagery, which makes their brand reputable:
Ooh…
Ahh…
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.
In an article that discusses bounce rate, it claims, “… A bounce rate in the range of 26 to 40 percent is excellent. 41 to 55 percent is roughly average. 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 the image yourself (as opposed to having the browser resize it).
- Compress the image 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.
A great (and FREE) resource we like to use to compress images to ensure high quality but lower file size is TinyPNG.
8) Choose the Right Font
Click Laboratory conversion rates shot up 133% with the simple change of a font A/B test:
A change so simple can make a huge difference. – image source
Sans-serif typefaces are readable on screen and are serif are more readable on print. However, serif works great on landing pages, 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.
Here’s a great example for typography on a landing page from our very own designer, Cody Chase. – image source
9) Include Relevant Qualifying Questions in Your Form
After changing the offer for our client who specializes in legal practice management software, from getting a free consultation to getting a free whitepaper, we found that we didn’t need to ask as personal of information and could get more leads in the door to contact via email, which really pushed visitors through the funnel. We found that asking for the company name vs. a personal phone number was much less aggressive of a request and boosted conversion rates almost 50%.
At first, the last field was “Phone Number”.
Asking “Law Firm” made that particular field on the form much less threatening.
Low intent offers for colder traffic nurtures your audience and 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.
10) Choose CTA Button Copy Wisely
Your Call-to-Action should be clear, not intimidating, and not open-ended. For example, for a lead-gen landing page where you’re trying to get consultations, having your CTA button say “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 examples of Call-to-Actions we like to stick to when the core offer is getting 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.
This is a great example of a CTA button attached to the form field. – image source
11) Match Visitor Intent
User intent is the mindset of the user when he or she is entering a keyword into the search engine. It’s important that the headline on the landing page is clear and relevant to the keyword phrase typed into Google.
The ad headline says “Post Scheduler,” which is good because I typed in a query for “social media scheduling.” – image source
This is the corresponding landing page attached with the ad. – image source
12) CRAP – Contrast, Repetition, Alignment, Proximity
The four graphic design principles are contrast, repetition, alignment, and proximity (C.R.A.P.). Contrast helps to highlight and focus attention. Contrast may be achieved using color, shades of gray, size, visual weight, and so forth.
Here’s a diagram on what CRAP actually means. – image source
13) Include Pricing Whenever Necessary (If Not Sure, A/B Test It)
A good rule of thumb to stick to is include pricing if you’re offering something like a free trial (high intent/hot traffic). If you’re offering something that’s low intent (colder traffic) like an e-book or even a demo, pricing is usually not necessary.
Another great example of when to include pricing tables on a landing page is when the visitor is being brought to a checkout page like Eventbrite (Just be sure to use an external tracking code to see if visitors who land on your page are purchasing tickets).
Make sure to mention which price is most popular.
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.
Here’s a great example of a countdown timer. – image source
Here’s another great example of the countdown timer (but in action). – image source
Having a countdown button on a checkout page creates urgency. – image source
15) Make Sure Your Landing Page is Mobile Optimized
Mobile is often the fastest growing platform for digital marketing. We must remember that 74% of people use their mobile phones to help them while shopping. Mobile marketing is also the fastest growing of all digital platforms. There are some rules/best practices you should follow when optimizing for mobile:
- Quick load time
- Short, action-oriented titles
- Short, smart landing page copy
- A CTA button that works well in touchscreen mode
- Keeps the most relevant information above the fold
- Looks good 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.
As you can see, the headline, subhead and CTA are all above the fold. – image source
16) Use the Breadcrumb Technique
Your goal is to get the visitor to micro-convert before they actually macro-convert (this is what you’d technically consider a “conversion”). Some of the hypotheses we’ve thought of as to why using multi-step landing pages work so well are:
- Qualifying questions give the visitor the impression that they’re getting a personalized experience rather than a name, phone number and email getting thrown in a pot.
- 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 how to lead your visitor through the funnel and get that micro-conversion:
Ask the little questions first.
Needless to say, the form after will ask for the personal contact information along with a CTA that says, “Send a Quote”.
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.
Instead of requiring the visitor to put in more effort, do the work for them and have a toggle instead of a drop-down or fill-in field, like Bills.com. – image source
18) Remember 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 option to make them look more attractive.
The decoy effect occurs when you have two items at the same price. – image source
In action, there’s a decoy price to convince visitors to buy the more expensive option (that typically has higher ROI for your business). – image source
19) Compare with Competitor’s Page
It’s best practice to include a comparison chart with a competitor keyword and your brand to show the visitor clearly how your product or service is superior.
Although this may not be the prettiest example, it still gets the point across with the clear comparison chart. – image source
Comparison chart from one of our clients.
20) Gate 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’s gated content? It’s online materials, such as white papers, articles and videos that require that users fill out a form before they can access them.
According to content marketing expert David Meerman Scott, ungated content is downloaded 20 to 50 times more often than gated content. The only downside to ungated content is you don’t get access to any lead information.
A great time of year for gated content is the holidays — offer special deals. Our clients see much higher conversion rates with gated content landing pages.
Showing a picture of what your ebook, whitepaper or infographic will look like is always best when it comes to gated content landing pages.
21) Give Special Attention to Your Hero Image
The hero image is the first item your visitor will notice whenever landing on your squeeze 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:
When you see the hero image, what do you initially think of? – image source
22) Offer Ebooks/Whitepapers to Grab Cold Traffic’s Attention
Landing pages that offer ebooks are aimed at colder traffic visitors. The qualities an ebook landing page should contain are as follows:
- Short
- Picture of the cover of the ebook
- What’s included in the ebook
- How it will benefit the visitor (why the visitor needs it)
- Mention that it’s free.
- 1-step, because it’s so low intent there’s no need for qualifying questions in the beginning
- Minimal fields
Unbounce has a great example of an ebook landing page that’s actually focused on conversion rate optimization:
Short and to the point – image source
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 that has always made strides to create unique marketing campaigns that stick with their consumers, uses video as main form of communication between them and their customers.
The hero image looks intriguing. How could you not click that “Watch the Video” button? – image source
It’s important to ensure the video on your landing page does not take priority over your headline and CTA button.
24) Give Your Page a Personal Vibe with Staff Summaries
Landing pages that are great candidates for staff/team images and summaries usually are under the scope of doctors, medical groups, therapists, public speakers, lawyers, and even rehabs.
Affinity Creative Group, a wine label design and marketing firm, has great staff photos and bios. Check it out:
From the Affinity Creative Group website
25) Don’t Forget Your Thank You Pages
Thank You pages can be particularly action-oriented when offering gated content such as a downloadable 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.
HubSpot’s Thank You page
26) Add Bottom of the Page CTA Sections
Putting CTA’s not only above the fold, but also at the bottom and middle of your landing page is great, especially for those that are lengthier.
Seedlip’s website:
Middle of the page CTA’s works great for eCommerce clients who wish to have the visitor purchase a product. – image source
Having a CTA at the bottom of your landing page gives the visitor that last chance to convert before bouncing. Very few users will actually take the time to scroll back to the top of a landing page to convert.
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.
Apple’s website:
Through brand awareness, Apple has been able to tackle the tech market. – image source
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
A newly released app, Groovo, allows you to edit videos on your phone and put a music track over the video before posting it to social media:
This post first appeared on KlientBoost - PPC Management And CRO Experts, please read the originial post: here
