“The idea is not to live forever, it is to create something that does.” – Andy Warhol.
If you’re a busy business owner, that idea resonates with you.
You’re not looking to work IN your business forever. Instead, you’re trying to work ON it.
You’re hoping to design, plan, strategize, refine, and keep scaling your business so it runs independent of you and brings in a passive income.
But for that, you need to stop falling into the trap of spending all your time figuring out what to do next.
If you launched your website months—or maybe years—ago but you aren’t converting (yet), you can turn your site’s prospects into leads in a snap.
And it all starts with nailing your landing page design.
In today’s article, you’ll learn…
- How to fix poor web design and nail the landing pages that score more conversion.
- The 17 easy tweaks you must apply to your web pages today to convert leads without working IN your business.
- Real-life examples of what to do and what not to do when trying to improve your landing page design.
- PLUS you get to download AutoGrow’s “Ultimate Checklist to Improve Your Landing Page Design & Boost Conversions” for FREE.
Ready to jump into the 17 simple tweaks to improving your landing page’s design? Let’s go!
1. Text Doesn’t Overlap with People’s Faces.
Your hero section is one of the most important sections of your landing pages because it’s where prospects first land on your page. It’s the very first impression they get from your website.
A poorly designed hero section can make your prospects leave immediately without even knowing what your core offer is. To avoid this, the text in your hero section (headline and subheadline) must not overlap people’s faces in the background image.
Including human faces into your landing page design is a proven method for upping your conversions. People just love seeing real, genuine human faces. But if you cover those faces with text, it can have the exact opposite effect.
Imagine meeting someone and the person is wearing a hat. But the hat is covering the person’s eyes. And while he talks to you, you can’t see into his eyes at all.
Well, think of it as your website. Covering someone’s eyes with text is as awkward as someone covering their eyes while talking to you.
Your impression in that situation would be to stop talking to the person as soon as possible. And the same thing happens to your site’s prospects. They’ll leave if what’s in front of them isn’t likable.
For instance, take the screenshots below as examples of poorly designed hero sections.
It’s much more likable to look at people’s faces clearly, right? Now let’s move on to the next tip.
2. CTA Button Is Above the Fold
If you bury your CTA on the page, you’re likely to lose sales because you’re making it more difficult for your site’s visitors to buy. When visitors are either returning to your website or already familiar with your offer, they’re expecting to see the button they need to click right there in front of them. They’re not expecting to scroll down to find the button.
As a matter of fact, a simple CTA button placed above the fold increased conversion rate by 31.12% to this website.
And they not only displayed the button above the fold, but they actually turned the text link that was buried at the bottom of the page into a noticeable button.
Your CTA simply must be visible in the hero section. Prospects shouldn’t scroll down to look for it.
In another case study analyzed in our Proven Sales Conversion Pack, a website increased revenue by 27.39% by simply moving the CTA above the fold.
And this validates one of the 11 Laws of Sales Funnel Physics—the Law of Visibility.
This law says that people will convert on offers that are highly visible and noticeable to them. If they don’t see it, they won’t convert.
If people see your CTA button, they’re more likely to click it and buy as well.
If, for instance, you run an ecommerce business, the placement and design of your CTA button is a key point of conversion leverage for you.
So, increase visibility in terms of placement of the CTA button and use a more noticeable color to create irresistible CTAs. This will lead to more clicks to checkout.
3. Logo Has Good Readability
Your logo is the strongest symbol of your brand. It builds brand recognition and it helps your target market recognize you wherever you are displayed on the web.
Your logo includes essential visual elements such as typography, color palettes, shapes, etc., and it gives your brand identity. But what does all that translate to if you don’t display it properly on your web page?
In order to give your logo maximum legibility and exposure, you must use a high-contrasting background color to make it stand out.
Add some areas of clearance around the logo to give prominence. You already know how to add white space to your landing pages at this point so that should be easy for you. And don’t forget to keep the logo high-res for easy readability.
Do you notice in the example below how pixelated the logo is?
Not good at all…
And by the way, did you notice that the logo actually has some small blue squares? Of course you didn’t notice. Why? Because it was placed on a blue background! It’s dumb, right? How can someone add a blue logo on a blue background?
Those are the exact types of errors you must avoid on your website.
4. Logo’s Placement is Consistent
Listen, if you’re looking to convert leads, it’s time to take care of all details across your landing pages.
The appearance of the logo across your website must remain consistent. In fact, according to Entrepreneur, consistent brand matters because it…
- Projects professionalism
- Establishes authenticity
- Provides clarity
- Builds trust
- And provides simplicity
Any alterations to the logo shouldn’t be made in terms of colors, size, or placement. Its placement, color, and composition should remain the same across your pages.
Take a look at the following example.
Both logos should be placed in the exact same place. When prospects navigate through your landing pages, they’ll notice these inconsistencies and it’ll kill your sales.
5. Text Has Good Readability
So, what’s the point of writing awesome copy if when it’s added to the landing page it doesn’t have good readability?
Take the example below. It’s completely hard to read. It’s text-heavy, the font size is too small, text color doesn’t contrast, and there isn’t enough spacing between lines and paragraphs.
All headlines, subheadlines, CTA button text, and body text in your landing pages must have good readability.
Letters should have enough space between them and there should be enough space between lines too.
6. Text and Background Contrast
This one goes for all text across your website: use a background color that contrasts with the text.
Don’t make your prospects work. Make the reading experience for them as smooth as possible.
And as a matter of fact, contrasting colors can make people purchase 57% more, and using high-contrasting color on a landing page can translate to a 10.66% increase in sign-ups. And that’s what happened to the website below…
This means that the colors you use for text and/or your background can provide an incremental (or better) increase in conversions.
The text has a better contrast against a white background and makes the reading experience easier. More comfort and a better experience mean less friction in deciding to sign up for your trial or not.
7. CTA Buttons Are Consistent
Do you really think no one will notice your website has different CTAs with different colors, shapes, sizes and font sizes like the ones below?
CTAs are a high point of leverage for growing your conversion rates so always be consistent with them, their font size and style, and their shape and size. Change your mindset from “no one’s gonna notice it” to “everyone will see it.”
CTA buttons must have the same color and shape. Or do you think your potential customers will not notice that the yellow CTA buttons above are not the same tone? Or that the green ones have different sizes and shapes?
The fact is, people are judging whether or not to buy your products or services/do business with you and/or your brand based on what they see on your website. So make sure to put your best foot forward and keep the design consistent.
8. CTA Buttons’ Colors Stand Out
A good design amplifies your copy. For instance, the color choice for your CTA buttons is critical to your website.
Highlighting the CTA on the website below yielded a 190% increase in conversion—and all by turning the text linked into a button.
Highlighting your text links with color or by simply turning them into buttons is always a safe bet to get more people to a key landing page.
And this other website, just by changing the color of the CTA button, translated to 35.81% increase sales…
In this case, changing the color and design of the “Add to cart” button increased sales (not clicks, but sales) by more than 35%. And this is because the visibility of the button was increased. It stood out on the page and was clearly recognized as a button (note the rounded corners). Also, note that the size of the button was increased as well.
For your CTA buttons, use a noticeable color. Red, green, orange—these often work well.
But it’s not about any single color. If you have a website with a “green-ish” theme and a green button, green won’t work so well because it’ll blend in with the rest of the site.
Also, keep in mind that you must use a contrasting color for the text in the button too. For instance, tweaking font color of CTA buttons on the following website resulted in an 18.01% decrease in click-through rates.
So to sum up, use a color that stands out and contrasts with the text. It should also be recognizable as a clickable button, i.e. rounded corners.
9. All CTA Buttons Work
So what’s the point of having beautiful, high-contrasting CTA buttons on your website if they’re broken? What’s the point of your prospects clicking on them and not being redirected to the next step?
This one is a fundamental step in ensuring your design works. Because with misdirected CTAs, you are essentially preventing your leads from buying your product or service.
Before launch, you must ensure all CTA buttons work and redirect to the next page in order for you to take prospects down your funnel.
At AutoGrow, we actually double and sometimes triple check for small errors like these during our digital marketing task walk-thrus. Both our Quality Assurance Specialist and our Project Manager click through every single stage of a client’s funnel to make sure that every step moves prospects along in the right direction.
10. Opt-in Forms Work
Same as the point above, if you’re collecting a prospect’s contact information or you’re asking them to fill out a survey so you can segment your audience, how do you do that if your opt-in forms don’t work?
Test all the opt-in forms you connect to your CTA buttons. Make sure the automation is properly set up and that the prospect will be redirected to the next page.
And don’t neglect the opt-in widget design. This is another error most designers make.
Dedicate some time to designing a nice opt-in form and use high-contrasting colors as you do for your landing pages. In fact, choosing the right form background color can increase form submissions by 91.7%. And this is exactly what happened to the case study below…
And there are two reasons adding a simple color behind the form worked for this website:
- Yellow had more alignment with the audience.
- Adding color for the background increased visibility of the form fields, drawing more attention to it via the contrast it created.
11. Include Social Proof
Adding trust badges to your landing pages can uplift sales conversions by a whopping 32%. This is because relevant trust badges are an easy way to unlock sales growth. Adding any form of social proof to your website reassures potential customers and grows sales.
A trust badge can be as simple as a reassuring visual element with some copy, as simple as a checkmark + “free shipping”.
Choose the most relevant one for your market and add it somewhere on the site where people will see it. Header navigation or footer areas work really well.
Another way of adding social proof to your landing pages is in the form of logos. But in some cases, less is more. And this simple tweak this website made helped them earn a 15.7% conversion rate.
The reason why less social proof in the example above converted better is that too many customer logos may be distracting. In other words, more logos can actually increase on-page friction. The additional logos move the page further out of alignment by looking like the site is “trying too hard.”
So when adding social proof, consider not overdoing it. People may perceive it as “trying too hard” or it might just be distracting from the message.
And not only should you remove some of the social proof, but you can also move them from one section to another. As a matter of fact, moving testimonials can translate to 64.53% more downloads.
And that’s what happened to the website below…
Increasing visibility for testimonials (especially the ones that work to reframe the value, and increase urgency) by placing them directly above the CTA is likely to grow conversions.
12. Use Real Photos
You may not always have the photos of the people who shared a testimonial with you. And that’s ok. That’s what stock photos are for.
But the secret is to use images that look as real as possible. Don’t use stock photos of people who look like supermodels. That’s not realistic.
A repeating conversion pattern Matt, the founder of AutoGrow noticed from creating our Proven Sales Conversion Pack was that using an authentic photo instead of a stock photo converted significantly better, to the tune of 20-30%, or more.
In fact, in the case study below, using a more personal photo resulted in an increase in webinar sign-up rate by 66%.
Over time, consumers have become more sophisticated at identifying anything that stands out as an ad or as something commercial. Using stock photos where it’s generic, clearly not an actual customer, is something the average visitor will easily pick up on.
For instance, using real images can boost form submission by 161%. And adding customers’ photos can translate to a 23% increase in “add to cart” sections. And adding real images to your landing pages gain more subscriptions by 34.7%.
This converts better because confidence in the purchase is increased thanks to social proof in the form of believable, authentic photos.
Replace your generic, stock photos of people from your website with a professional headshot of yourself or someone on your team.
13. Consistency & Symmetry
There must be consistency and symmetry along with the website. This translates to:
- The font size and font style are consistent. This means all headlines in your landing pages have the same font size and font style, all subheadlines have the same font size and font style, and all body text have the same font size and font style.
- Spacing consistency above and below sections, between text and headlines, between images and text, and between images and sections.
- Consistency with margins along with the page.
- Columns are balanced and have the same width and height.
Most designers don’t realize that when they create different landing pages for the same client, they’re still creating pages for the same client. And that means each page shouldn’t feel completely different from each other. They need to feel integrated.
And keeping consistency along the website is key in improving any landing page design.
14. All Elements Feel Integrated
All visual elements on the website must feel integrated. They shouldn’t be randomly placed.
Graphic/web design amplifies the copy and the whole website. When the elements from your landing page (text, headlines, logo, images, footer, sub-headlines, etc) are placed randomly or without care, your website won’t meet its goals (to convert leads into buyers).
The experience must feel integrated like the images aren’t cookie-cutter or just “thrown” on the page for instance.
There has to be a connection between your brand, your logo, colors, and the font style and size you choose. Otherwise, your brand ideas won’t be understood.
15. Headlines Shouldn’t Be Too Long
Headlines should fit 3 lines on your landing page.
You already know one of the 11 Laws of Sales Funnel Physics—the Law of Clarity—“be clear, not clever”. Don’t use fancy words to try to sound “too smart”. And don’t try to write a long headline expecting people to understand you better.
Simplicity and clarity are key on your copy. Especially when it comes to your headlines.
So keep your headline short and sweet. They shouldn’t take you longer than 3 or 4 lines (maximum) in the design.
Also, try not to add just one word in a new line. That doesn’t look good.
In fact, using a simple, short, and clear headline equates to 388% more opt-ins to download a lead magnet. And that’s exactly what happened to the website below. After reducing their headline (5 lines vs 4 lines) and being more clear, they saw spikes in their opt-ins.
16. Sections Aren’t Duplicated
Make sure your landing pages’ copy flows and that there aren’t any duplicated sections.
Ensure your landing pages are submitted for a final review and that copy on the design matches the original copy from the Google Doc (or whatever program you’re using for your copy). Double check the original copy to make sure you’re not missing any important text from it, or that any sections are duplicated.
These issues have been part of the biggest bottlenecks we’ve been facing with design at AutoGrow. I told you about it in January’s Growth Report and how we’re already overcoming those obstacles through our thorough quality assurance process. But this is something to keep an eye on.
Case and point: have a look at the example below.
Can you imagine coming across this duplicated section? Would you feel like you’d like to buy from a company that didn’t even notice such a glaring error on their sales page?
I don’t think so.
So, check for duplicates. Because otherwise, you’ll just look sloppy.
17. All Pages Are Mobile Optimized
Nowadays, most people check websites on their phones. So having your landing pages optimized for mobile is as important as having them optimized for desktop.
Check from a phone, tablet, and desktop to make sure everything is displayed correctly. Avoid mistakes like the one below where there was a double spacing between paragraphs and background image not properly displayed.
There you go. Those are the 17 tweaks you can make to your landing page to improve its design and boost conversions.
They can be done in a snap. All you need to do is follow each point, tweak your web pages, and start seeing conversions jump sky-high.
On your landing pages, everything matters. So make sure your text (headline, subheadline, and content) have good readability. Ensure you use high-contrasting colors for the CTA buttons, text, and backgrounds. And include realistic images on your pages and add social proof in the form of testimonials and/or trust badges.
Don’t forget to be consistent with spacing, font sizes, font styles, margins, and all elements in your pages. And the most important thing: optimize all pages for mobile and test the forms and widgets to make sure you’re moving prospects down your funnel.
Now tell me something, have you tried optimizing your pages to knock out a high-converting design? Have you tried any of the tweaks in this article? Which ones have converted better for your website?
Let me know in the comments below.
And if you want our instant all-in-one team of digital marketing pros to get your landing pages tweaked, designed, and optimized, just reach out to us and we’ll help you!
Keep AutoGrowing, stay focused,