There are a lot of design tactics that go into designing landing pages that convert. In this post, we’re going to start with just framework pieces. Layout, important concepts, and a few must-have elements.
First up, what’s the difference between a landing page and a home page? CRO’s favorite answer: it depends. Sometimes nothing if you have a small site. Typically though, your home page is going to lead into other sections of your site, like a blog or different product types. A landing page focuses on one thing: conversion.
So some of this will be applicable to a home page, but on a home page you might have multiple calls to action and focus on engagement. Check your intention for the page. If your sole aim is conversion, then this will all apply to you. If not, then you may have to adjust it a bit to your own page’s goal.
Starting at the top, navigation. If you want to be hard core conversion focused, your landing page will not have navigation. People either convert or they leave. If they are higher intent (i.e. they indicated they are interested in your offer) then narrowing their choices increases the likelihood that they will actually chose to take an action rather than leaving.
Starting at the top: navigation
If you want to focus on designing a landing page for conversion, your landing page will not have navigation. People either convert or they leave. If they are higher intent (i.e. they indicated they are interested in your offer) then narrowing their choices increases the likelihood that they will actually chose to take an action rather than leaving.
Setting up your hero
The hero, the top section, I what everyone sees first. It’s where they look when they are deciding whether or not your page is worth reading. The hero is a critical piece of designing landing pages that convert so take your time with this section and make sure you get things right.
I can’t believe I’m saying this in 2021, but do not make this a carousel. Please. I’m either not going to see some of the content or, when I go to click on it, it’s going to disappear and I’m going to get annoyed. Don’t annoy your visitors. Plus, carousels are NOT ADA compliant. Your design should never exclude people based on disabilities.
The one exception to the carousel rule is when it’s used to create visual interest rather than change the message. I’ve seen this trend popping up recently and I really like it. Unbounce does a fantastic job.
Choose an image that, in some way, connects to your product. Ideally people using your product. People like seeing people, which is why you get so many uncreative stock photos of people smiling up there when a company doesn’t think they can do better. But you can do better, right?
According to MDG Advertising, 67% of online shoppers rated high quality images as “very important” in their purchase decision. That was more than “product specific information”, “long descriptions”, and even “ratings and reviews”!
Marketing Experiments tested a real client photo against a high performing stock photo and saw a 35% increase in sign ups.
People really do know the difference and they react differently to stock photos and custom photos.
If you simply must use a stock photo, get a designer to customize it for you. Do something unique and creative with it. This is the first impression people will have of your product or service. Do you want to flash “generic” at them? No! You want personality and punch.
Love it or hate it, it’s hard to argue that Birddogs shorts doesn’t have memorable personality. I would never buy their product, the personality doesn’t really appeal to me. But normally I can’t remember brand names for the life of me. I remembered Birddogs, though, after seeing maybe two of their ads.
Establish credibility
With the headline we talked about in the third video post and this hero set up, your visitors should know where they are, what that can do or get, and the core of the why.
Now’s a good time to establish some credibility. Testimonials, number of customers, press, years in business–something that tells people why they should listen to you. As I mentioned in the last video, this is not strictly necessary, but it sure does help. You’re also going to want to weave more of this throughout the page as you go.
Now you start to tell your story. Keep it well spaced and supported with images. People remember 4 times more of what they see and do than what they read, so create graphics with meaning.
Stats are excellent ways to support your story. The first part of my own story calls attention to the fact that my visitor is competing with companies spending millions on advertising. Did you know spending on social media ads increased 32% in 2018 and it’s expected to grow 73% in the next 5 years?
See how that supports my point that my target audience is competing with big money? I pulled that out to highlight it.
Show the visitor where to look
Cue the visitor where to look next as they travel down the page. That means, typically, a linear format where they focus on one thing at a time. Do not try to shove too much in the section above the fold.
It’s tempting to put a lot up there. What about the percent of people not scrolling? What if the key piece of content to make them stay isn’t up there?
They really aren’t any more likely to convert if you inundated them on landing. Instead, just make sure your most important and engaging message is first. You’ll get better results from a single strong, clear message.
Do not horizontally place different sections. I’m not sure why some people get uncomfortable taking up a lot of vertical real estate, as though it takes effort for a visitor to scroll. It takes way less effort to scroll than to figure out where to look in a crowded, busy frame.
Here are some visual cues to experiment with for guiding the visitor:
You can use a color pattern like we did here. Your eye naturally follows the blue and purple elements on the clean design.
You can use white space and an extremely linear layout like Unbounce is doing.
Or you can use motion like I’m doing. If you do choose to use motion, use it delicately. Motion is the strongest form of visual influence. It’s next to impossible to ignore and, if it’s heavy handed, it gets extremely irritating.
The chat bots that make my browser tab flash between the site name and “1 new message” infuriate me because of that. I can’t help but look at them every time they move! I end up closing the tab I’d been planning to go back to.
I’ve also seen sites periodically shake the call to action in the corner. Absolutely do not do this because it breaks attention every time it moves. It makes reading the page difficult and disjointed. Your message is less likely to be clear, you’re visitor will be annoyed, and they will be more likely to leave.
Explainer videos
If it’s relevant, add a video. Pages with videos increase time on page, can increase conversion rate, and give visitors another option for hearing your message. Don’t force people to watch it, don’t make it autoplay, please, that’s annoying.
Don’t put anything in there they can’t find on the page either, in case they’re oddball like me and actually prefer to read. Mostly because I can skim an article or page but not so much with video. I’m like the worst target audience.
Don’t add a video just for the sake of adding a video. Make sure it correctly conveys your message and adds value. People are going to be watching this trying to decide if they want to convert.
CTAs
I mentioned these in the last video, but it’s worth repeating:
Put your call to action throughout the page. The same call to action even if it’s worded differently. You will get a higher conversion rate if you present the visitor with a single decision option.
End the page with a strong call to action. Ask for the conversion. I was looking at a page that started with the call to action “Get Started”, which was fine, but it ended with “Find out more”. Then it took me to the Help page…it’s like an invitation for me to meander rather than converting.
Message match
One last item.
I got an email this morning with the CTA for me to sign up to get a call. I was interested so I clicked through. The landing page told me to enter my phone number for text updates.
WHAT?
Make sure your messages match throughout the flow. If your marketing tells me “click here to do something” you better make sure that the landing page reassures me that I can do the thing there. Otherwise I’m confused, I’m disconcerted, and I’m leaving.
That’s it for now on designing a high converting landing page! Next up, super fun, super sexy: cold emails. Yeah, you know you need that. Click through to the next video post.
