The Ultimate Guide to Building a High-Conversion Landing Page

When I redesigned my WordPress website, Alphametic.com, early this year, I thought my marketing was all set.landing page conversion funnel

My web pages where well-optimized, or so I thought. I had nice design, big calls to action, forms, social proof, testimonials, offers, sales copy, and best-in-class lead generation plugins, including pop-ups and content upgrades.

Then, I concentrated my efforts on building niche landing pages featuring specific products and services to target profiled audiences through organic and paid (Adwords) channels.

I started with a test campaign for one of our most popular services, SEO Workshops.

I thought I was doing everything by the book, but when results came in I wasn’t so sure…

After spending over $300 in Adwords test campaign (buying targeted keywords such as ‘SEO workshop’ or ‘SEO training’), I’ve only gotten two inquiries, none of which resulted in sales.

I realized my landing page was a leaky bucket. According to Beth Morgan on Kissmetrics blog:

If you don’t have a good landing page, it’s like going fishing without a net: you might land a big one on your hook, but you won’t be able to drag it into the boat.

It was time to get expert feedback, so I reached out to my closest network of successful online entrepreneurs for tips to improve my landing page conversion rates.

I’ve summarized every valuable tip I received in this blog post, along with expert conversion rate optimization best practices and ‘before-after’ visual examples. I am really generous to have these amazing people in my corner because my landing page converts (and looks) much better now.

Speak to consumer pain

By Michael Roderick (@MichaelRoderick), Founder of Connectors Con and Small Pond Enterprises

What we read first makes us decide if we want to read anything else. That means that the top of your page needs to be a headline that speaks to consumer pain if you are looking for them to keep reading and eventually buy.

The key to converting with sales pages is making sure your consumer feels like you are talking directly to them and helping them see a more successful version of themselves.

“SEO workshop” could be for anyone, and as result as we all know in marketing, when you pitch everyone it becomes a product for no one. Think of your ideal client and the craft the name of workshop around that person.

Ex.) From Invisible to Invincible

Before

landing page styling 1
After
landing page styling 2

Or: “The SEO Webinar that will make you BFF’s with Google and make your company the first name people see when they search.”

Put why before the how

More from Michael Roderick

Nobody cares about the how without the why: If you describe the workshop, each description needs to be tied to a specific result or the consumer will ignore it. So right now calling a collaborative workshop that ends with a makeover of the website doesn’t speak to the customer’s pain and your solution. You can describe the workshop later in the copy, but at the top you need to get them to feel the pain:

“What if every day you went to your website and you had so much traffic your servers were straining to handle it all.  What would that mean for your online sales?”

“What if tomorrow you had a ten percent increase in people visiting your company’s site, what would that mean for your sales?”

“And what if rather than paying hundreds of thousands of dollars on ads, marketing, and PR, you could pay much less and get the results described above? It’s not magic. It’s SEO.”

 landing page sales copy

“Imagine you own a coffee shop and after owning that shop for a few months and doing business, someone else opens a shop next door. That’s what’s happening on the web with your business.”

“Only instead of one coffee shop next to you it’s 1000 or more. How do you compete on GOOGLE.?”

“When you rank high on Google it’s as if everyone else just had a huge construction sign blocking their business logo on the block except you. You get to be the first one people see so they barely think about the fact that there are others there.”

“You’re gonna sell a lot more. That’s what we address in our workshop.”

seo workshop copy

Describe your product and have testimonials to prove it.

Your Call-to-Action seals the deal

More from Michael Roderick

Remember, your call to action seals the deal: “Contact us” is like walking up to someone on the street and asking them for a dollar. Make your CTA something that makes them want to contact you now.

For example:

“If you want to unlock the power of SEO to open the flood gate of traffic waiting to hit your site, we have 5 spots available for our latest workshop. CLICK HERE (hotlink to application) to apply to join us before your competition does.”

Build trust with social proof

The first thing you might want to look at is what people do after they go through your ads. In fact, one of the first questions they ask themselves is “Can I trust this person or company?”

Testimonials are one of the best ways to build trust with social proof.

landing page social proof

Build credibility and showcase expertise

The second thing you might want to look at is whether your site visitors view you as a credible expert. Especially those who don’t know you.

You can convey credibility and expertise in various ways, including ‘as seen on’ media mentions….

landing page media logos plugin

…or showcasing your client rolodex.

landing page client logos

Eliminate anything that may cause friction or distrust

BJ Smith (@BJSmithStrategy), Co-Founder of Podcast Workshop NYC at PodAbility.com

Let me approach this from a UX standpoint since that’s what I teach. I’m going to be picky and let me explain why. You want to eliminate anything that may cause friction or distrust while viewing your landing page. There may be things that unconsciously make them uncomfortable … enough of this leads to no sales.

Example: Have you ever been to a low-end super store like a K-Mart. You may not consciously notice the stains on the ceiling tiles, the scuffed floor, the messy/cluttered shelves, but all of that builds up in your head. You feel uncomfortable and want to leave. Contrast that with a new Target where everything is clean and organized. They may sell the same stuff, but where would you rather be?

UX Tip 1: Text spacing and styling

The text is crowded. Increase the line height to 1.4 to 1.5em and add line breaks at “Learn from an …” I don’t want to read that text as it is. It also feels very wide. My eye has to travel a long distance from one side of my screen to the other and feels strained.
Before:
landing page styling 1
After:
landing page styling 2

Also check out: 9 WordPress Design Tricks to Increase Engagement

UX Tip 2: Pay attention to font and margin

I like wide letter spacing and uppercase on short titles (1-2 words), but it is difficult to read on long titles like this. I’d also like to see more margin at the top of the section.
Before:
landing page styling 3
After:
anding page styling 4.png
Or:

landing page styling 5

UX Tip 3: Clean up your visuals

 If you have Photoshop, add a Levels adjustment layer & click “Auto”. That should help with the lighting. I’d also like to see a subtle treatment on that text to make it stand out. Try adding the text in Canva using one of their templates. While the subject of this picture is great, the quality doesn’t feel professional.

Testimonials: I’d like to see the testimonials be a little closer in length. Possibly switch them up (not a deal breaker, but it’s the little things). That thick bar draws my eye to it rather than the content. Consider knocking it down to 1px and a gray color like #CCC.
Before:
landing page testimonials
After:
landing page testimonials 2

UX Tip 4: Optimize your form

It’s too big and intimidating. Can you create a 2-part form? Ask for their name (combine first & last into one field) and email first and then get the rest of the info. I understand if you want to use the form to qualify applicants, so it makes sense to have all fields there in that case. Don’t make it 100% wide.
Make the padding around the button a little bigger and add a border radius to match the button below it. My example below has padding set to 16px 40px with a 3px border radius. I also bumped the font size to 1.2em.
Before:
landing page form 1
After:
 landing page form 2

Communicate value proposition in Headers

Mike Fishbein (@mfishbein),  Inbound marketer and bestselling author at MFishbein.com

Try using headings that highlight value proposition more.I think changing “SEO workshop” at the top to something that highlights benefits/outcomes while still making it clear what it is would help. For example, “Learn the most most effective and up to date seo strategies” , “rank on google…” etc. Maybe also a line about who it’s for (ie “marketing teams at large companies” – or multiple segments) Could also try a larger font. I like the format of a long-form sales letter that tells a story while highlighting value propositions. Could also consider offering a free consultation here to incentivize sign up.

landing page headers

Use long-form storytelling to build trust

Marc Raco (@RacoMarc), Award-winning actor/filmmaker at MarcRaco.com

I approached this from a storytelling perspective. Your blue text with the quote on your photo looks blurred and is difficult to read. I suggest using large block letters, with some translucence, covering the right half or third of the photo. This will make it easier to read, will still allow us to see the photo and will catch more attention, and not compete with the photo the way the blue does.

Before:

-I will teach you SEO- - Matthew Capala (1)

After:

landing page design

The photos of you below are great, and they demonstrate you have done this in several environments, so there is credibility. However, how many times do we need to see you by yourself on the stage or in front of a room? We get it. If you have it swap out at least one photo with one that shows you actually interacting with one or more participants in that photo grouping. Give us a reason that there are several photos, from an information standpoint, a story arc standpoint. Tell us the different parts of the experience by the photos you show.

Matthew Capala

Use a floating form

Sam Hurley (@Sam___Hurley), Head of Search at Midas Media, Owner of Optim-Eyez.co.uk

Many experts have given their value here and I’m late to the party, so I’ll just add a quick couple of pointers!

Use a simplified form at the top of the page so visitors don’t have to scroll so far. You will capture more leads. You could even keep the form sticky on scroll at the right hand side of the page. This has worked when we’ve used it. Here is a landing page we use at the agency for an eBook, different concept but it works well:

floating form conversion

Also keep a wider-width form at the bottom for users who want to take the time to read the whole lot.

Landing page floating form

Don’t overload users with info, it all seems like hard work so get your points across succinctly and encourage visitors to take action by hooking them in with exclusivity and urgency. Think; ‘Only 8 places left’ or add a countdown timer for a discount deal. Put all your trust signals at the top of the page (past clients, testimonials on slide).

I hope you’ll find this information useful when you design your own high-converting landing pages.

I’m sure there is still a lot I can do to make my landing pages even better, so please drop me any feedback or share your own landing page optimization learnings in the comments below.

The following two tabs change content below.
Matthew Capala is an Internet entrepreneur, international speaker, and author. He is the founder of Alphametic, growth hacker at SearchDecoder, life hacker at SumoHacks, Adj. Professor at NYU, and Author of four books, including "SEO Like I'm 5" and, recently, "Facebook Marketing Like I'm 5.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *