Landing pages are the secret sauce to lead generation. But just having landing pages alone isn’t enough. No siree! They need to have all the right elements in order to generate high conversion rates. In fact, that’s why we recently wrote about "11 Simple (But Critical) Tips for Creating Better Landing Pages."
But we wanted to take those tips one step further and apply them to real-life landing pages. So to find those real-life landing pages, we reached out to our fans in social media and asked them to send us a landing page of theirs that they thought was in need of a little optimization love. We then selected three landing pages to analyze and improve right in this post.
But first, a small disclaimer. While real landing pages are used in this article, the redesigned, or "After", versions of the landing pages are only concepts used to illustrate the recommendations in this article. This was done to show you, the readers, what each landing page might look at if the tips were actually applied. Hence, there is no conversion rate data in this post. My hope is that the wonderful marketers who submitted their original landing pages would use the techniques found here and follow-up with performance results.
Okay then. Now that that’s out of the way, let’s get started ...
What We Analyzed
When we looked at each of these three pages, we analyzed the following:
- Clarity: Is the page confusing? Is it clear what's being offered and who it's intended for?
- Value Proposition: How strong is the offer’s perceived value? In the visitor’s eyes, is this offer's value worth providing contact information via the form in order to redeem it?
- Page Design: Do you use all the right elements in the right place? Are there too many design elements, or not enough?
- Friction: Are there certain elements -- or lack of -- that get in the way of conversion?
- Form Best Practices: Are your forms too long or too short? Do they ask the right questions?
- Miscellaneous Goodies: These are other tidbits of advice we can offer to help increase conversion rates.
Landing Page #1: Health Dialog
Health Dialog is a company that provides population analytics, interactive decision aids, and healthcare decision programs to over 17 million people around the world. The landing page below is for a free whitepaper download called From Theory to Practice.
Before:
What Works:
What’s great about this landing page is that it's very simple (there's no page clutter), it's focused on one offer and objective, and it's reasonably clear that it's a content offer. It also includes many of the landing page must-haves, including a headline, body content, a supporting image, and a lead-capture form.
Suggestions for Improvement:
- Remove the top navigation. One of the simplest yet best ways to increase conversion rates is to remove any other site navigation from your landing pages. This will keep the visitor from getting distracted and browsing other part of your website. When someone arrives at your landing page, your main goal should be to keep them there so they take the desired action -- completing the lead-capture form. Because this is the case, all of your page elements need to support that very goal.
- Highlight the value in the headline. It’s a good practice to make your landing page headline the title of the offer it's promoting, but sometimes using only the title results in some vagueness about that particular offer's value. I’m not exactly sure whether Health Dialog's audience clearly understands what “From Theory to Practice” means, but if they don't, it makes sense for them to improve the strength of that title. In addition, the fact that this is a whitepaper is buried within the body copy. I would emphasize that near the top of the page so it's immediately clear to visitors that they'll be receiving a free whitepaper.
- If the author is a benefit, tell us why! Who is Peter Goldbach? Is he an industry-leading expert? Best-selling author? A healthcare executive? If you're going to mention the whitepaper's author in your copy, tell people why he is so awesome, and how he adds value to this offer.
- Use bullet points to highlight the benefits of the offer. There is a lot of great stuff in these two paragraphs, and while it’s short (which is great!), the benefits of what the visitor will get by downloading the offer are buried in here. Instead, Health Dialog should use short and simple bullet points to highlight the best qualities of their whitepaper so visitors can quickly scan the page and understand why they should convert.
- If a field is not required, make it extra clear! This is a simple tip, but it can help immensely. Asking someone for their phone number in a form is a huge point of friction, simply because it screams, “Submit this form and get contacted by Sales!” In fact, if people so much as just see that phone number form field -- whether it's required or not -- they may automatically get turned off and avoid the offer. Even though this field doesn't have a red asterisk (meaning it’s not required), the fact that it's an optional field isn't as obvious as it could be, especially considering all the other fields are required. To help reduce friction, Health Dialog should add “(not required)” or something similar next to the 'Phone' label.
- Make the ‘Download’ button more graphically appealing. Studies have shown that button colors and sizes do affect conversion rates. While this button isn’t bad, try testing bigger, more colorful buttons that stand out. Try A/B testing different images and colors to see what works best for your particular audience.
After:
This is an example of a redesign for Health Dialog's landing page, with the above suggestions applied:
What Was Changed:
- Removed the top navigation so people stay on the page.
- Added a clear headline with a strong offer title. I felt that the sub-headline of Health Dialog's whitepaper, “Implementing Shared Decision Making at the Point of Care,” was far more powerful than the primary headline, “From Theory to Practice,” simply because it's more descriptive and actionable, and less vague. I may be wrong, and the Health Dialog audience may know exactly what the previous headline means and why it’s important, but let's assume they don't. To make the title even stronger, I added “X Tips” as in “15 Tips for Implementing…” to the existing title, although you can spin it in other ways (X Ways for…, X Examples for…, etc). People LOVE numbers (such as in the title of this blog post!) because it clearly indicates exactly what they'll get, and creating a really sexy title for your offer is one of the best ways to increase its landing page's conversion rate. In a nutshell, make your titles and headlines so attractive that it's impossible for people to ignore.
- Added a sub-head that adds credibility to the author. I used “by industry-leading author” here, which is just an example. But again, if you plan to use the author as a main selling point, tell your visitors why he or she adds value and credibility.
- Added short bullet points that highlight the offer’s main benefits. I took the great copy Health Dialog already had and just turned it into a bullet format. This makes it easier to scan and digest. Additionally, I added a (fake -- although you’ll want to use a real one) testimonial from the author himself. This adds even more credibility. I also included his picture, because it always helps to prove someone is a real person (never use stock photography in these cases). Instead of the author, you could also use a quote from an influential thought leader or someone who resonates with your audience about how great the offer is. This adds social proof.
- Reduced friction in the form. This is another simple addition, but I added “(not required)” next the 'Phone' label. Now, when visitors quickly scan the form before they decide to fill it out, they know they don’t have to give up their phone number to redeem the offer.
- Added a bigger, more colorful button. As I mentioned in my recommendations above, Health Dialog should test different button colors and images to see what works best for their particular audience. For example, some studies have shown that red or orange buttons work better than blue or green, but every website and its audience is different. I used the color blue in my design only because it matches the Health Dialog branding. However, it also makes sense to test other colors that don’t match your site colors to see if a color that stands out more moves the needle. In addition, test the text you use on your 'submit' button. For example, instead of just "Download," you may also want to try “Download Now,” “Get Your Free Whitepaper,” or “Access Your Whitepaper Instantly.”
Bonus:
I also noticed that this landing page's page title (what gets shown at the top of your browser, and in search engines) is simply “From Theory to Practice.” From an SEO perspective, this is simply too vague to get found online. Health Dialog should make sure its page has a strong page title that includes the page’s primary keyword in order to increase organic search traffic to their page.
Recommendation:
I'd change the title from “From Theory to Practice” to “Free Whitepaper: Shared Decision Making for Your Healthcare Practice – by Health Dialog” or something similar, to make it keyword-rich and targeted. But don’t go overboard here. Only include the keywords that are most applicable to this page and your industry, and place the whitepaper title before your company name. In general, think about what your audience is searching for, and focus on that.
Landing Page #2: Charmed Design
Charmed Design is an online shopping center for unique and beautiful jewelry. The landing page that was submitted below is for an email subscription. I chose this page because I come across so many businesses that use an email subscription or newsletter as an offer.
Before:
What Works:
The page is fairly simple, and it’s clear what the page is offering. I LOVE the email format option (yay for mobile!) and that the form is short and simple.
Suggestions for Improvement:
- Remove the top navigation. Same as with the Health Dialog example above, Charmed Design should remove the main site navigation so people don’t feel tempted to wander off. I would also reduce the size of the header and remove the social media links that are at the top of the page (again, to reduce distraction).
- Make the headline more actionable. “Email Sign Up – 20% Coupon” isn’t bad because it tells people what the page is for, and they're also adding an incentive. That being said, it could be stronger and more actionable, as in the structure "Do X to Receive Y."
- Expand upon the sub-headline. I think Charmed Design's sub-headline is actually better than its main headline because it contains that action-packed language. Instead of duplicating this copy, they should try adding more clarity.
- Shorten the horizontal length of the form, and add more supporting elements. Even though the form is short, the fact that it expands across the entire page looks a bit overwhelming. As a usability issue, the fact that the "required" asterisk markers are to the far right and not directly next to the field labels is also a bit odd. It also increases the chances users won't notice them. Also, considering this is just a subscription landing page, should last name really be required? If so, that’s fine, but if not, Charmed Design may want to make it optional to reduce additional friction. Additionally, when shrinking the field sizes, adding more supporting elements to the left and right of the form such as body copy, bullet points, testimonials, or an image of what a subscriber email might look like, can add more value to the offer.
- Make the submit button stand out. This is the same advice as in our Health Dialog example. Charmed Design should make the button more colorful, bigger, and sexier.
After:
What Was Changed:
- Removed top navigation and social media links so people stay on the page. As a best practice, save the social media sharing and follow buttons for AFTER they convert on your form -- such as adding them to the thank-you page or in your auto-responder email -- as a next step.
- Revised headline to focus on the benefit of the email subscription first, and provide the incentive second. Receiving a 20% off coupon is nice, but you want your email subscribers to have a long-term relationship with you, not just take the coupon and bail afterward. As such, it might be best to highlight the value of the email subscription itself and then add the icing on the cake with a coupon or discount (the incentive). Consider what is valuable to your audience. Do they really want “news,” or do they want “to be the first to see the latest trends and products in jewelry” instead? Also, is 20% off enough? I would suggest trying bigger discounts, as 20% may not be valuable enough to fork over their email address. To create urgency, you might also want to offer the discount for a limited-time, or offer a limited quantity, as in, “Get a 75% off coupon -- only available for the next 100 people who sign up!” This technique is particularly effective during times of seasonality to push more sales during slower periods.
- Added more supportive elements. In this case, I added a couple of bullet points about what people will receive (besides the coupon) by subscribing. In addition, I added images of jewelry as a visual element, although it’s worth testing which types of image works better (e.g. images of products vs. a screenshot of the email they'll receive).
- Reduced form length and optimized form elements. There are a few important changes here. First, I added a header to the form to urge visitors to “Subscribe Now.” It might also be interesting for Charmed Design to test a multimedia counter with its limited-time offer, to create a sense of urgency. If you don’t have the technical resources for a counter, adding static text such as “Subscribe Now to Receive Your Coupon” would also do the trick. Additionally, I made 'Last Name' optional (again, do this only if it’s not really an important data point for you to capture) and added "HTML" as the pre-selected option for 'Email Format.' The reason for this is that some people might not notice an option is not selected by default. By pre-selecting it, you make the decision easier for them. Another thing for Charmed Design to consider is that the option “mobile” is a bit unclear. Do they mean mobile-optimized version? Try to circumvent as many questions as you can on the landing page to reduce friction.
- Added a brighter, bolder “Subscribe” button. Using a dull grey button doesn’t look very exciting. One way to increase conversion rates is to make your button brighter and bigger. Try testing different colors as well. You'll notice I also changed the text on the button to "Subscribe Now" to repeat that sense of urgency I created in the form headline.
Landing Page #3: Curata
Curata is a software platform that enables you to easily find, organize, and share content. The landing page below is for a demo request of the software, which is one of the company’s primary offers.
Before:
What Works:
This is a fairly good landing page in the fact that it’s simple, clean, and to-the-point. When visitors arrive at this page, they know the offer is to see a demo of the software. Furthermore, there is little design friction, and the page contains many of the key elements of great landing pages. However, there is a lot of hidden friction, which I will address in a moment. I also love the use of the testimonial as well as the graphic of the software. I only have a few recommendations here, but I think they could make a big impact.
Suggestions for Improvement:
- Remove the main navigation. This is the same lesson from examples #1 and #2 above. Removing the main site nav will keep visitors on the page and focused on this particular offer.
- Use the headline to continue selling the demo and address pain points. Just because someone visits this landing page doesn't mean they're already sold on the offer or convinced it addresses their pain points. Continue the conversation on the landing page from previous pages or channels, and use the headline to pull them further into the page.
- Add benefits and value copy. What will prospects learn, or get in return, by requesting a demo? How long is the demo? Is it an on-demand demo or does someone speak with Sales? Why should prospects spend their time demoing your software instead of with your competitors'? Why should prospects request a demo now and not later ... or ever? All of these are the types of questions prospects will be asking themselves when they visit this page. The goal is to reduce the amount of questions a visitor has, because when there are questions with unclear answers, it creates friction and doubt. It'd also be helpful to add a sub-headline or brief body copy that informs the visitor why it is valuable to see a demo -- and incorporate elements that create a sense of urgency.
After:
What Was Changed:
- Added a more beneficial headline. How does Curata solve the prospect's top challenge? This is where you’d want to address that. I took a stab at a revised headline as an example, but I see far more opportunities to make this better. Other examples that include quantifiable data also work very well, such as, “Discover How 5,000 Business Use Curata for Content Creation.” Or “More Than 5 Million Pieces of Content Created and Shared With Curata.” Basecamp is a good example of a company that does this well: “Last week 6,078 companies signed up for Basecamp to manage their projects. Today it’s your turn.”
- Added a little more information about what prospects will receive. Again, it’s important not to overdo it, but a little more descriptive information about the demo will help address visitors' top questions and concerns. To create a sense of urgency and a desire to continuing researching your product, adding some bullet points and benefits can really help increase conversions. With an offer that’s closer to the bottom of funnel, such as a demo request, it’s even more important to nail the page copy so it really resonates with your audience.
- Reduced the form size. This is a minor change, but I reduced the size of the form fields and spacing so that, even when adding extra content above the form, the page length is exactly the same. Sometimes it helps when a form just appears shorter, even if it contains the same number of fields.
What else would you change about these landing pages? If you’d like to see your own landing page optimized, add your URL and your top challenge in the comments!


Mike Myers 2:10 PM on December 21, 2012
I was waiting for the difference in results! What percent of traffic converted before / after?
theodore galvin 2:17 PM on December 21, 2012
terrific job, well done. happy holidays!
gayle 3:23 PM on December 21, 2012
The Before/After Format is excellent. I really learnt a lot from these case studies. Keep em coming. G
tushar Purohit 3:39 PM on December 21, 2012
Great Post for improving Lead generation.
Bruce 3:41 PM on December 21, 2012
Great 'Before & After' examples - but it would be really nice to know how much the redesign changed the results. Did more people fill out the forms - were they better leads?
zach 3:43 PM on December 21, 2012
I was also wondering about the difference in conversion rates. Was there any?
Gregg Towsley 3:58 PM on December 21, 2012
I read all your blog post and this one is my favorite by far. As everyone knows improving your conversion rate is one of the best ways to make more money online without spending more. I love it! Nice work @HubSpot
Jean 6:02 PM on December 21, 2012
I'm interested in hearing more about removing navigation from a landing page. Personally, before I take action, I want to know who and what the website represents. I need information. Not being able to find this actually loses me. Is it just me?
Reg 7:07 PM on December 21, 2012
It seems the whole point was missed.
What effect did the changes make?
Did the conversions go up and by what %?
@Affordable SEO 12:21 AM on December 22, 2012
Great post indeed, The way you shown how to improve a landing page is awesome. First you shown before scenario then you shown after scenario.. it really helps to understand what exactly we need to improve in a landing page. Thank you Jessica for the amazing post
Nina 12:36 AM on December 22, 2012
Customers are happier when they have less clicks to make before they get to what they want, hopefully that makes them to make a purchase
Aaron 4:17 AM on December 22, 2012
Thanks for the before and afters this is a great way to learn the tips. I will certainly put these into practise with our new site.
I do question the lack of navigation though. Sometimes when I am giving my details on a page with no navigation it can feel a bit suspect and that the site may not be legit.
Roger Poultney 9:35 AM on December 22, 2012
Some very good points here - though it should be remembered that ALL pages on a website can be thought of as "landing pages" (since any one could be first point of entry via search engines, external links etc.) !
Mary Wang 11:13 AM on December 22, 2012
Hi Jessica, Awesome post! I love the before and after analysis. I use the landing page as my front page for my site (http://www.goldenvisiontraining.com). I only turn off the navigation when I run campaigns. I keep the navigation at other times. I feel it makes my site look more legit. What do you think?
carlton 11:52 PM on December 22, 2012
In your opinion, are there any cases where sending PPC users to a homepage is acceptable? I have found that in some cases with very small businesses where sales are not exactly the goal (think a business broker), that knowing more about the company and getting the full picture of what they do makes more sense.
Demetrius Cardio 1:56 AM on December 23, 2012
Great Post , thank you so much
Gerard 10:25 AM on December 23, 2012
Excellent and interesting post.
One point on all the info and the whitepapers.
They all concentrate on the leadcapture part.
I'm missing the info on the the longer product desciption landingpage type.
From a ppc click people expect more information before there ready to leave there details.
What should do there?
Steve Kent 11:28 AM on December 24, 2012
Ditto the above, any data or % on the difference the changes made? Always hearing from people about the "right" way to do things but would be nice to see that justified!
RajarhatXplorer 5:46 AM on December 26, 2012
nice comparison...
Fedobe 6:13 AM on December 27, 2012
Great comparison of landing page. Proper landing page optimization can boost online traffic and business. It helps to reduce bounce rate of a website. At last, thanks for this great post.
Sigrid 3:39 PM on December 27, 2012
As a newbee in the Internet retail sector, I find these tips very useful. The "before and after" comments with according illustrations make it easy to understand.
I'd love to now which tips you'd give on my website in order to help me boost my conversion rate. We always get excellent comments on our website and products, but actual sales are much harder to get!
Goldstar International 7:15 AM on December 28, 2012
Great post on landing page optimization. I would too remove the page navigation, reduce input fields and even improve submit button.