13 Design Mistakes That Are Killing Your Conversions—With Visual Examples

When things aren't going well on a landing or sales page, copy is often what people blame but more often than not, they should actually be looking at the design.

As a marketer with a design background, I cringe at a lot of landing and sales pages. Sometimes, I get so distracted by conversion holes that I don't purchase or enter my information in the form.

So give these a glance and see if you're doing any of these things so you can correct them immediately. Most of these tweaks are stupid simple, too.

There are a lot more than these 15 points that lead to a conversion, but if you plug up even 2 or 3 leaky holes in your conversion boat, I'm confident you'll see a big boost.

For the record, I like the companies whose pages I'm using as examples here. You can like a company and respect its founders for what they've built and still think they're leaving a metric crapton of money on the table.

And for the UX/UI/web designers that read this: Yes, some of these examples are taken to the extreme. This is meant to help marketers who are often designing their own landing and sales pages—they don't have the same appreciation of design rules nor the knowledge of when to break them that you do.

1. Inadvertent vertical grid lines

When you have multiple items in near-perfect alignment on a page (in this case, the header, the subscription toggle, and the middle of the options table) visually, your eyes create a vertical grid and read straight down.

Your eyes will ignore and de-prioritize information that falls out of the vertical grid because your brain wants the easiest path to a decision, and in this case, that's right on down.

I know this can't have been an intentional choice because they left their most compelling pieces of social proof outside of the grid (which I'll talk about shortly).

This tip applies more broadly to any type of shape. LinkedIn creators LOVE their shaped posts, but your eyes go "OOH A SHAPE", and they stop reading the context.

I tested this recently with a post. My comments were way less enthusastic about the content and people picked up only on one of the first lines because their brains couldn't read anything else.

Seriously, try to pick out some of the larger messages of this post.

I bet you're having a hard time processing the actual content of the post. That's because your brain is saying "SHAPE SHAPE SHAPE" 100 times over.

2. Lack of differentiation in text sizes

Scale is one of your best friends in design to help your ideal client easily understand what's what. Attention spans are short, so helping your ideal client or customer decide as quickly and effectively as possible should be your main priority.

Brains are size queens. They need strong gaps in size between text to make sense of the information.

The header is 24pt, and the rest of the text is 16pt. Best practice is to 2x your header size. The subheader even looks a little bolder with just that change in size.

This also fixes our grid problem in number one. If I were redesigning this page, I'd also adjust the subheader and the size of the plan names.

3. Not putting your social proof in the most strategic place

If you are going to create a vertical grid intentionally, then you'll want to put your best social proof into the grid. But really, you want to put it where it makes the most sense.

The big credibility markers for this product are twofold:

1. It's used by over 6200 creators
2. Justin Welsh & Codie Sanchez use it

Centralizing these in the vertical grid, changing the size, and adding a recognizable woman to break up all the men in the five central spaces will all boost conversion in this case.

4. Only having purchase buttons at the top or bottom of your options table

I understand that having buttons at the top and bottom can feel heavy-handed. But there are two groups of people looking at your options table:

1. The people who buy first, ask questions later
2. The people who overly research and read every last word on the page and think about it for 3 hours

(I'm the first, so I apologize if you're number two and that's a hyperbole, but that's what it feels like to me haha)

But then move them to the bottom of the options table. Don't make someone scroll through all the features and then not put a button when they actually have the information they need to make a decision.

Make it easier, not harder, for your ideal person to buy from you.

Every single time someone gets frustrated or has a sub-optimal conversion experience, you experience dropoff.

5. Not making things that look like buttons into buttons

If it looks like a button, quacks a button, it should be a button.

Don't make things look like buttons if you don't plan on making them clickable. This is what started me down this wormhole.

Our brains operate in signs. Your brain will say, "Oh! Button! I should press to sign up!" and get weirded out when it can't.

That's enough to make someone click off.

6. No heat mapping tool installed

A heatmapper tracks click hot and cool zones on your —basically, where people are and aren't clicking and at what rate. This tool would've helped the page in number 5.

This includes places that actually have links and places that don't but should have something you can click.

I've seen many poorly performing pages that are missing buttons in key places or where the developer made only the text clickable instead of the whole button, and a heatmap picks it up.

Mostly, remember this: If you make something look like a button, people will expect it to be a button and act accordingly.

7. Preferred plan not default mobile option

Always make your first option in a mobile purchase experience the plan you want people to buy.

From the desktop table version, we know that the company wants people to choose the middle plan (you can safely assume this in most three-plan option tables). But for some reason, that plan doesn't appear first in the mobile experience.

Leadpages gets this right by clearly emphasizing the plan it wants people to choose from the outset, but making it easy to browse the other plans.

It's Leadpages, so I expect them to have a nearly unclockable conversion experience, of course. But this same principle applies to any three-payment scenario.

By the way, this page from the tool better reflects what I was talking about in terms of hierarchy of scale, by the way. You know what text the company wants you to focus on. Great job there!

8. Not aligning features in your options table

I was very surprised to see this when trying to help a client decide on a project management software recently. This is one of the leading apps, if not the market leader.

There are two purposes to a three-option options table:

1. To help people decide between options
2. To push people towards the middle option

Three-option option tables always make the middle seem like the best deal or the most ideal set of features.

The right option is the one that's not needed for the majority of the base as it's too comprehensive.

The left one is usually the down-sell for people who find the middle price a stretch. The down-sell is 100% a tease to get people to upgrade.

The table we're looking at is one of the rare times when the cheapest option is the one in the middle, and the left one is for intermediate users—a weird choice in and of itself. But I digress.

To create that browsing ease that people want when they're making a decision, you must align all features in an options table.

That way, people can clearly see what is different between each plan and this helps them decide on the level of features that they feel is appropriate for their needs.

Not to be too much of a simp for Leadpages here, but they do this well.

I don't even use their product but I do stalk what they're doing because I know they know conversion.

It's easy to see the difference in what you're getting because everything is well-aligned and you can see the differences by scanning your eyes across.

Personally, I'd have found a way to make the AI engine the same one-line no matter what, but it's not so ragged and distorted that your eyes can't make an easy comparison.

9. Color combos that are hard to read

No one should have to turn on dark mode to read any part of your page. Ensure there's enough contrast in your design so that the text is easier to read. This is also an accessibility issue.

This could have been just a skosh darker and it would've been fine.

Seriously, look at how minimally I had to drag this down the colour picker to make a big difference in readability. It's not like one is a brand colour — this brand traffics in shades of blue.

The darker yellow also contains a similar amount of grey as the blue behind it so they blend more harmoniously.

10. Designing without previewing in screen darkeners

Just assume about half of your audience is using dark mode. If you try to enforce light mode on them, many will outsmart you by using a screen darkener. Long live vampire mode.

When I'm designing for light only, I will toggle with three different screen darkeners to see how it looks in dark mode, just to make sure everything's still readable.

And you know… to make sure my colors aren't accidentally turning into poop brown. I don't know about you but that's not a color I want to be anywhere near my stuff.

Great design should design for both dark and light mode as it's about a 50/50 split and it's not all that hard to do, but if it's not something you can do right now, at a bare minimum, look at your stuff in a screen darkener.

Most people don't toggle their darkeners on and off, and you can lose people if you design something a dark-mode person can't read or looks ugly.

This is especially important if you're using gradients. I've seen so many dark mode pages where you can only read half of something.

11. Not adding purchase buttons before and/or after testimonials

Always make it easy for people to buy when they're convinced. Don't make them scroll up or down for the conversion. There's no faster killer of conversions than a button not being where it should be.

Why? Because it makes you likely to hit the dreaded "I'll come back to this later" no man's land of being a bookmark that collects dust or even worse — a tab that's bound to get closed in the fury to find that one tab you really really need mid-meeting when your browser has 50 tabs open.

This particular testimonial section has a testimonial from Neil Patel. I'm not sure there's any social proof that could be more convincing?

So make sure to add a button before and after your testimonials.

12. Keeping monthly pricing toggled rather than yearly

If you have monthly vs. yearly or pay-in-full vs. instalments, always choose the yearly or in-full option.

Whether your currency in your business is time or money, either way you're paying a lot to get someone to this page. You might as well push them to take the most ROI-positive option for them and you.

Payment plans and monthly options also have a higher attrition rate. Services like Klarna, Affirm, etc. help to mitigate these risks for vendors, but if you aren't eligible for those services or don't want to use them, then it can leave you in a bad situation.

13. Not putting your buy or opt-in buttons above the fold

I understand wanting your pages to "breathe" and to have white space in your design. I do. But in the year 2024, we should all know the basic immutable principle that buttons need to be above the fold.

Most places get this right (but not all) on desktop, but people often take a hit on mobile.

And I know, you might be thinking "well surely people don't sign up for stuff on their phone" and I avoid it like the plague, but what I've learned is that that makes me a technological luddite apparently, because most people do sign up for stuff, even landing page builders, via phone.

I don't understand it, I hate small screens, but I'm a designer so that makes me a little weird by default.

Leadpages is the only company I will clock by name in this article because I've already praised them twice.

Nobody's going to get it right 100% of the time, so if you have made some of these mistakes, just know that even a website that's all about optimizing for conversion doesn't always get it right.

And look, sometimes you can make choices in the name of design over conversion. I do that all the time because it's a balancing act, but sacrificing your primary conversion area (aka the first chance people can sign up or buy) for the aesthetic is not the move.

Want more marketing tips and tricks? Subscribe to the Better Marketing newsletter The Marketing Memo here.