Before and After: 3 Real-Life Landing Page Makeovers

Posted by Jessica Meher

Fri, Dec 21, 2012 @ 01:00 PM

 Comments

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. Keep in the mind that these recommendations are based on my years of testing which have resulted in positive effects on landing page conversion rates. That being said, I am not a master of every single industry, and only you know what resonates with your audience. In other words, keep in mind that it's still important to A/B test your landing pages to determine what really works for you.
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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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 seethat 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.
6. 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:

1. Removed the top navigation so people stay on the page.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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:

1. 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).
2. 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."
3. 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.
4. 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.
5. 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:

1. 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.
2. 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.
3. 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).
4. 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.
5. 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:

1. 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.
2. 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.
3. 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:

1. 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.”
2. 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.
3. 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!

Read more: http://blog.hubspot.com/blog/tabid/6307/bid/33968/Before-and-After-3-Real-Life-Landing-Page-Makeovers.aspx#ixzz2Fxx7nUdX