The false split between pretty and performance
I have sat in the meeting more times than I can count. On one side of the table there is a designer defending a layout because it feels right, because the spacing sings, because it would look good in a portfolio. On the other side there is a growth lead holding a spreadsheet, asking why the add-to-cart rate dropped after the redesign. Both of them think they are having a disagreement about design. They are actually having a disagreement about a false split, and the split is the most expensive myth in my field.
The myth goes like this: there is pretty design, which is about aesthetics and craft and awards, and there is performance design, which is about conversion rate and revenue and A/B tests, and the two pull against each other. Pick a side. Either you make it beautiful or you make it work. I have watched entire teams organize themselves around that fiction, with the brand people on one floor and the optimization people on another, quietly resenting each other across a P&L.
Here is what I actually believe after years of being judged on revenue rather than on likes. The best design does both, and it does both because they are the same skill pointed at the same goal. A beautiful page and a high-converting page are not enemies. They are usually the same page, because the things that make a page feel considered, the clear hierarchy, the confident typography, the generous space, the honest imagery, are the exact same things that make a stranger trust you enough to hand over a credit card.
The reason the myth persists is that both sides have seen the other side fail badly. The growth lead has watched a gorgeous redesign tank conversion because the designer buried the button, removed the price, and turned the value proposition into a poem nobody could parse. That is real. It happens constantly. And the designer has watched a conversion-obsessed team turn a brand into a landfill of red urgency banners, fake countdown timers, and buttons that scream, a page that converts a little better this quarter and cheapens the brand for years. That is also real.
So both camps are reacting to a true observation and drawing the wrong conclusion. The true observation is that design done badly hurts business. The wrong conclusion is that design and business are opposed. The right conclusion is harder and more useful: most pretty-but-broken pages are not actually well designed, and most ugly-but-converting pages are leaving money on the table that better craft would collect. Bad hierarchy is not beautiful, it is just decorated. A page that converts by nagging is not high-performing, it is borrowing next year's trust to hit this month's number.
When I look at a page, I am not asking if it is pretty or if it performs. I am asking one question that dissolves the split entirely: does this design make the right thing easy? Easy to understand, easy to trust, easy to do. A page that makes the right thing easy tends to look calm and considered, because clarity is a large part of what we perceive as beauty. And it tends to convert, because a person who understands what you offer, believes you can deliver it, and can act without friction is a person who buys.
That is the frame for everything that follows. I am not going to teach you to choose between craft and conversion. I am going to argue that they are one discipline, and then get specific about how to practice it: how the eye moves, how trust gets built or broken in the first second, how to design heroes and product pages and buttons that carry their weight, and how to settle design arguments with evidence instead of with whoever in the room has the loudest opinion about a shade of blue.
How the eye actually moves across a page
Before you can design something that converts, you have to accept an uncomfortable fact: nobody reads your page. Not the way you wrote it, anyway. People scan. They arrive with a question, they sweep the screen for the answer, and they leave the instant they decide you do not have it. Your careful left-to-right, top-to-bottom argument is being consumed by a jittering eye that lands for a fraction of a second, jumps, lands again, and forms a verdict long before it has read a full sentence.
So the first job of design is not decoration. It is directing attention. Visual hierarchy is the tool for that, and hierarchy is simply the deliberate ranking of elements so the eye goes where you want it, in the order you want it, and skips what does not matter. Every page has a hierarchy. The only question is if you designed it on purpose or let it happen by accident, in which case the loudest element wins and it is usually the wrong one.
The eye is drawn by a short list of physical properties, and you can predict its path if you know them. Size: bigger things get looked at first. Weight and contrast: a heavy or high-contrast element pulls harder than a faint one. Color: one saturated element in a calm field becomes a magnet, which is exactly why your primary button should be the only thing on the page wearing your loudest color. Isolation: an element surrounded by empty space reads as important because nothing competes with it. Direction: faces and arrows and the implied line of a body pointing at your headline will drag the eye along with them. Motion: anything that moves wins, which is why you spend movement carefully and almost never on decoration.
There are two reading patterns worth knowing because they show up again and again in eye-tracking studies. On text-heavy pages, people tend to read in an F-pattern: a fuller sweep across the top, a shorter sweep below it, then a fast vertical scan down the left edge. That tells you to front-load meaning, to put the important words at the start of lines and headings, and to never hide your value proposition at the end of a paragraph nobody will reach. On sparse, visual pages, people follow more of a Z-pattern: top-left to top-right along the header, diagonally down to the bottom-left, then across to the bottom-right, which is exactly where a well-placed call to action wants to sit.
These patterns are defaults, not laws. The moment you introduce strong hierarchy, a big image, a bright button, a bold headline, you override the pattern, because a dominant element beats a reading habit every time. That is the entire move. You are not fighting how the eye moves. You are placing a few deliberate anchors and letting the eye hop between them in the sequence that tells your story: what is this, why should I care, what do I do next.
The most common hierarchy mistake I see is flatness. Everything on the page is roughly the same size, the same weight, the same importance, so nothing leads and the eye has nowhere obvious to land. A flat page feels vaguely tiring to look at, and users do not know why, they just bounce. The fix is contrast, and contrast requires sacrifice. You cannot emphasize everything. If three things are shouting, none of them is heard. Real hierarchy means deciding what is most important and then being brave enough to make everything else quieter, smaller, and calmer so the important thing has room to dominate.
A practical test I use: squint at the design until it blurs, or shrink it to a thumbnail. In that blurred state, can you still tell what the one most important element is? Can you see the path the eye is meant to take? If the blur turns your page into gray mush with no clear focal point, you have a hierarchy problem, and no amount of pretty typography will save a page the eye cannot navigate. Fix the blur first. The details only matter once the big shapes are leading correctly.
The psychology of trust: the real conversion engine
Conversion is a trust transaction. Before anyone buys, subscribes, or signs up, they make a rapid, mostly unconscious judgment about how legitimate, competent, and safe you are to transact with. Most of that judgment happens in the first second, before a single word is read, based on how the page looks and feels. Design is the first impression, and the first impression is doing more conversion work than any headline you will ever write.
Start with whitespace, the most misunderstood tool in the kit. Clients and stakeholders see empty space as wasted space, as an opportunity to add one more thing. It is the opposite. Space is what tells the eye that an element matters, what makes a page feel calm and expensive rather than cramped and desperate. Cheap products crowd everything together because they are trying to shout. Premium brands use space lavishly, because space signals confidence: we do not need to fill every pixel to convince you. Generous whitespace around your value proposition and your primary button is not decoration, it is a trust signal that reads as competence.
Typography carries an enormous amount of trust, and most of it operates below awareness. People cannot tell you why a page feels professional, but they feel it, and a large part of that feeling is type. Consistent, well-set type with a sensible scale reads as care, and care reads as competence, and competence reads as trust. Sloppy type, mismatched fonts, cramped line spacing, text too small to read comfortably, all of it registers as a company that either does not know better or does not care, and neither is a company people hand money to. You do not need an exotic typeface. You need a disciplined one, set with real attention to size, line height, and measure.
Color sets emotional tone and, more practically, does the job of directing action. I keep brand palettes deliberately restrained, because a restrained palette makes the one action color mean something. If your buttons, your links, your badges, and your headings are all fighting in five saturated colors, none of them can signal which one to click. Discipline in color is not an aesthetic preference, it is a functional one: reserve your strongest color for the action you most want people to take, and let the rest of the page stay calm so that color can lead.
Then there is social proof, which is the single most reliable trust lever I know, because humans are herd animals who look to other people to decide what is safe. Reviews, ratings, testimonials, customer logos, real numbers of customers served, all of it lowers the perceived risk of being the first fool to trust you. The details matter enormously. A testimonial with a real name, a real face, and a specific outcome is worth ten anonymous five-star blurbs, because specificity reads as true and vagueness reads as invented. Place proof near the decision, not buried in a carousel at the bottom. The moment of doubt is right before the click, and that is where a relevant piece of proof does its work.
Imagery might be the fastest trust signal of all, because a picture is processed in an instant and a stock photo is detected almost as fast. The generic smiling headset call-center photo, the businesspeople-shaking-hands cliche, the flawless model who obviously has nothing to do with your product, all of these actively reduce trust, because they signal a company hiding behind decoration instead of showing the real thing. Real product photography, real people, real screenshots of the actual thing you are selling, all of it outperforms polished fakery, because authenticity is legible and people are exhausted by being sold to.
The uncomfortable truth underneath all of this is that trust is fragile and asymmetric. It takes many small right decisions to build and one wrong note to break. A single typo, one broken layout on mobile, a testimonial that smells fake, a price that appears only after you have entered your card, any of these can undo a page's worth of carefully earned credibility in a second. So designing for trust is not about adding trust badges. It is about removing every small thing that leaks doubt, and there are always more of those than you think.
Designing hero sections that carry their weight
The hero is the most valuable real estate you own. It is the first thing a visitor sees, it is often the only thing they see before deciding to stay or leave, and it is where an astonishing share of your bounce happens. Get the hero wrong and nothing below it matters, because most people never scroll to find out what you buried. So I treat the hero as a standalone test: if a stranger saw only this, in a few seconds, would they know what you offer, believe it is for them, and know what to do next.
That gives the hero three jobs, and exactly three. First, say what this is, in plain words, fast. Not a clever tagline that requires the rest of the page to decode, an actual clear statement of what you do and who it helps. Cleverness that sacrifices clarity is the most common hero failure I see, because designers and founders are bored of their own value proposition and reach for wordplay to keep themselves entertained. The visitor is not bored. The visitor is confused, and confusion is the enemy.
Second, answer why should I care. A clear statement of what you do gets someone oriented, but the reason to keep reading is the benefit, the specific thing that gets better in their life or their business. The strongest heroes pair a plain what with a concrete why, and they resist the urge to list ten benefits. One or two sharp, specific benefits beat a wall of feature bullets, because a scanning eye can hold one idea, not ten.
Third, offer an obvious next action. The hero needs one primary call to action that is impossible to miss, visually dominant, and honest about what happens when you click it. Start free, see pricing, book a demo, shop the collection: whatever the action is, it should be the loudest interactive element in the hero and it should not compete with three other buttons of equal weight. If you give a visitor five equally weighted choices in the hero, you have given them a decision to make, and a decision is friction. Give them one obvious path and a quiet secondary option for the small share who need it.
The supporting cast matters too. Hero imagery should show the actual product or the actual outcome, not a mood. If you sell software, show the interface doing the valuable thing. If you sell a physical product, show it in real use, at a real scale, in a way that helps someone imagine owning it. The image is not there to be pretty, it is there to help the visitor picture the value, and an abstract gradient blob or a generic stock photo helps them picture nothing. A hero image that teaches something about the product earns its enormous footprint. A decorative one wastes it.
Layout-wise, the classic split hero, text on one side and a supporting image on the other, endures because it works: it lets the headline lead while the image reinforces, and it reads cleanly on a scan. Centered heroes can work when the message is short and the image sits behind or below. What almost never works is a hero so busy that the eye cannot find the headline, or one where the background image fights the text so hard you have to squint. Contrast between text and background is not optional. If people cannot read the headline instantly, the hero has failed at job one.
One more thing I have learned the expensive way: the hero is where brand and conversion meet most visibly, and it is where the false split gets litigated hardest. The brand instinct wants atmosphere, a striking image, a poetic line, a lot of space. The conversion instinct wants the offer, the proof, the button, above the fold. The answer is not to pick one. The answer is a hero with genuine craft and atmosphere that still, unmistakably, tells a stranger what this is and what to do next. You can have the mood and the clarity. Refusing to choose between them is the job.
The anatomy of a high-converting landing page
A landing page is an argument. It exists to take a specific visitor, arriving with a specific intent, and walk them from curiosity to action without a single unnecessary step or unanswered objection. Everything on the page either advances that argument or gets in its way, and the discipline of a good landing page is mostly the discipline of removing everything that gets in the way.
The first principle is one page, one goal. A landing page that tries to do three things does none of them well. If the goal is to book a demo, then every element serves booking a demo, and the navigation that would let people wander off to your careers page and your blog probably should not be there at all. Removing the global navigation from a focused landing page is one of the highest-impact changes I know, because every link out of the page is a chance to lose someone who was about to convert. Focus is not a constraint on a landing page. Focus is the entire point of one.
The structure that reliably works is a sequence, and the sequence mirrors how a skeptical person actually decides. Hero first: what this is, why it matters, what to do. Then proof, immediately, because the first reaction to any claim is show me you are real. Then the substance: how it works, what you get, the specific benefits made concrete, ideally shown rather than described. Then objection handling, the part most pages skip, where you name the doubts a real buyer has and answer them before they become reasons to leave. Then more proof, deeper this time, the detailed testimonials and case results. Then a final, confident call to action that repeats the offer for the people who needed the whole page to get there.
Objection handling deserves special attention because it is where average pages and great pages separate. Every offer has a short list of reasons people hesitate: it is too expensive, it will not work for my situation, it looks hard to set up, I do not trust that you will deliver, I can get this cheaper elsewhere. A great landing page knows those objections cold and answers each one, in the flow, near where it arises. Pricing anxiety gets a clear pricing section and a guarantee. Setup anxiety gets a three-step how-it-works. Trust anxiety gets specific proof. You are not hiding the objections, you are disarming them, and a disarmed objection converts far better than an ignored one.
Length is the argument everyone has about landing pages, and the honest answer is that the right length is exactly as long as it takes to make the case and not one section longer. High-intent, low-risk offers can convert on a short page, because the visitor is already sold and just needs the button. High-consideration, high-price offers usually need a long page, because there is more skepticism to overcome and more proof to present. The mistake is not long or short, the mistake is padding. A long page full of substance converts. A long page full of filler exhausts. Cut anything that is not advancing the argument, regardless of the total length that leaves.
Call-to-action placement follows a simple rule: repeat the primary action at every point where a motivated person might be ready to act. That means one in the hero, and then another after each major proof or benefit block, so nobody who becomes convinced two-thirds of the way down has to scroll hunting for a button. These repeated CTAs should be the same action, worded consistently, so the page has one clear ask stated several times rather than a confusing menu of different requests. Repetition of a single ask is clarity. Variety of asks is noise.
The last thing I check on any landing page is the momentum. Read it top to bottom as a stranger would and feel for the moment the energy sags, the section where you would drift off or start looking for the back button. That sag is almost always a place where the argument stalled: a claim without proof, a benefit that was not concrete, an objection you raised and did not answer, or just a stretch of text that earned nothing. Find the sag, fix the sag, and the page converts better, because conversion is mostly the absence of reasons to leave.
Product pages: where intent meets doubt
A product page is a special kind of pressure. The visitor is closer to buying than almost anywhere else on your site, which means the stakes per pixel are higher and the mistakes are more expensive. Someone on a product page has intent. They are considering giving you money for this specific thing. Your job is to remove every remaining reason not to, in the exact order those reasons surface in a buyer's head.
Start with imagery, because on a product page the images are not illustration, they are the product, as far as a remote buyer can tell. People cannot touch the thing, so the photography has to do the touching for them. That means multiple angles, real scale, the product in use and in context, zoom that actually reveals detail, and for many products a short video that shows it moving, worn, or working. Thin imagery is the single most common product-page failure I see, and it is a direct tax on conversion, because a buyer who cannot see it clearly will not risk buying it.
The information architecture of a product page has to answer questions in priority order. What is it and what does it cost, immediately and unmissably. Then the details that matter for the decision: size, materials, specs, what is included, how it compares. Then the reassurance that lowers risk: shipping, returns, warranty, availability. A product page that makes a buyer hunt for the price, or that hides the return policy three clicks deep, is creating doubt exactly where it can least afford to. Every question a buyer has to work to answer is a moment they might decide it is not worth the effort.
Social proof on a product page is not optional, it is structural. Reviews are frequently the first thing a serious buyer scrolls to, because they trust other buyers more than they trust you, and rightly so. The rating and review count belong near the top, by the title, where they reassure before the doubt sets in. The detailed reviews belong lower, where a buyer in deep consideration goes to resolve specific questions. And the reviews should be real, specific, and include the unglamorous ones, because a wall of nothing but five stars reads as fake and a mix of mostly-positive-with-honest-caveats reads as true and actually converts better.
The add-to-cart region is the most important few square inches on the page, and it should be treated that way. The price, the primary action, the key variant selectors, and the core reassurances should live together in a tight, unmissable cluster that stays available as the buyer scrolls the details. The button itself should be the loudest thing on the page, worded plainly, with nothing competing for the same visual weight. Variant selection should be obvious and forgiving: if someone has to guess which size is which or cannot tell what is in stock, you have introduced friction at the worst possible moment.
Then there is the quieter work of removing anxiety. A product page converts better when it preempts the small fears that stall a purchase. Will it fit, and can I return it if not. When will it arrive. Is it in stock or am I about to fall in love with something sold out. Is my payment safe. None of these are exciting to design, and all of them move the number, because a purchase decision is a risk decision and every reassurance lowers the perceived risk. The best product pages feel less like a sales pitch and more like a patient salesperson who has already anticipated every question you were about to ask.
What ties it together is that a product page is where brand and conversion have to coexist under maximum pressure. The brand wants the page to feel like the brand, considered, distinctive, on-voice. The conversion instinct wants the price, the button, and the reviews doing their job without interference. A product page that sacrifices brand feels like a spreadsheet and undercuts the premium you are trying to charge. A product page that sacrifices clarity for brand atmosphere loses the sale. The craft is to make a page that is unmistakably yours and still answers every buyer question in the order it arises, with the button always within reach.
CTA design: the moment the whole page pays off
The call to action is where all the trust you built gets converted into a decision, and it is astonishing how often teams craft a beautiful page and then treat the button as an afterthought. The CTA is not an afterthought. It is the moment the page pays off or fails to, and it deserves more attention per pixel than almost anything else on the screen.
Start with the obvious that everyone gets wrong anyway: the primary CTA must be visually dominant. It should wear your strongest action color, it should have enough size and padding to feel clickable and confident, and it should have space around it so nothing competes. The most common failure is a button that blends into the page, the same weight as everything around it, so the eye never registers it as the thing to do. If you squint at the page and the button does not pop as the clear focal point of its section, it is not doing its job.
Contrast is the mechanism, and precision about it pays off. A button converts because it stands out from its surroundings, which means the surroundings have to be calm enough to let it stand out. This is why disciplined color across the rest of the page is a conversion tactic, not just an aesthetic one. If the whole page is loud, the button cannot be louder. Reserve the loudest color for the action, keep the rest quiet, and the button becomes a beacon without any tricks.
The copy on the button matters more than its color, and this is where I see the most easily fixed mistakes. Vague, generic button text, submit, click here, learn more, continue, wastes the single highest-attention word on the page. Specific, first-person, benefit-oriented copy consistently outperforms generic copy, because it tells the person exactly what they get and frames it from their point of view. Start my free trial beats submit. Get my pricing beats learn more. Send me the guide beats download. The button should complete the sentence the visitor is already saying in their head, which is I want to, so write the words that come after it.
One primary action per screen is close to a law. Every additional equally-weighted button you add divides attention and adds a decision, and decisions are friction. The pattern that works is one dominant primary CTA and, when needed, one quiet secondary option styled as a ghost button or a plain link, clearly subordinate. That way the person who is ready has an obvious path, and the person who needs more can take the quiet alternative without the two competing. When I see three buttons of equal weight in a hero, I know conversion is leaking, because the visitor has been handed a menu instead of a recommendation.
There is also the honesty dimension, which matters more than the tactics. A CTA should tell the truth about what happens next. If clicking start free trial actually demands a credit card, say so near the button, because the surprise at the next step destroys more trust than the friction of disclosing it up front would have cost. Fake urgency, a countdown timer that resets on refresh, only-two-left claims that are not true, these can lift a number this week and poison the brand over months, because people are very good at eventually noticing they have been manipulated. I do not use tricks that borrow next quarter's trust to hit this quarter's number, because I am judged on the durable line, not the spike.
Finally, think about the micro-moments around the click. The button should give clear feedback that it registered the tap, especially on mobile where a laggy or silent button makes people tap again and doubt the whole flow. The state before the click should invite it, the state during should reassure, and the state after should confirm. These are small details, and small details around the single most important action on the page are exactly the details that separate a design that merely looks finished from one that actually converts.
Mobile-first and the tyranny of the thumb
For most brands I work with, the majority of traffic is on a phone, held in one hand, operated by a thumb, in a distracted moment, on a connection that is often worse than the designer's. If you design on a large monitor and check mobile last, you are designing for the minority and hoping it degrades gracefully for the majority. It rarely does. Mobile-first is not a slogan, it is an admission of where your customers actually are.
The physical reality of one-handed use governs everything. A thumb reaches comfortably to the bottom and center of the screen and strains to reach the top corners. That single fact should reshape where you put your important controls. Primary actions belong in the thumb's easy zone, toward the bottom, not stranded in a top corner that requires a hand-shuffle to reach. The navigation, the key buttons, the things you want people to tap, all of it should respect the arc a thumb can actually travel. Fighting the thumb is fighting your own conversion rate.
Tap targets are the next non-negotiable. On a phone, a link or button that is too small or too close to its neighbors produces mis-taps, and every mis-tap is a small dose of frustration and doubt. Interactive elements need to be large enough to hit confidently and spaced far enough apart that a thumb does not catch the wrong one. This sounds trivial and it is the difference between a checkout people complete and one they abandon in irritation. The most expensive real estate on mobile is the space between two tappable things, and cramming it is a direct tax on completion.
The small screen forces a brutal, useful prioritization. On a wide desktop layout you can get away with putting several things side by side and letting the user choose. On a phone, everything stacks into a single column, which means you are literally deciding the order in which things are seen. That order is your hierarchy, made unavoidable. What goes first, what a person sees before they have to scroll, is the most important design decision on mobile, because a large share of people decide from that first screen alone. If your value proposition and primary action are not in the first mobile screenful, many people will never see them.
Speed is a design concern on mobile, not just an engineering one, and designers who wash their hands of it are ducking part of the job. A gorgeous hero image that weighs several megabytes and takes five seconds to appear on a mobile connection has converted worse than a plain one that loaded instantly, because a meaningful share of people left before it rendered. The design choices, the size and number of images, the fonts, the amount of movement, all directly affect load time, and load time directly affects conversion. Designing something beautiful that is too heavy to load is not a performance problem to hand off, it is a design decision with a conversion cost.
Forms are where mobile conversion goes to die, so they deserve disproportionate care. Every field is friction, and friction on a phone keyboard is worse than friction on a desktop keyboard. Ask for the least you can. Use the right input type so the correct keyboard appears, the number pad for a phone number, the email keyboard for an email, so people are not fighting the wrong keys. Keep the whole form visible without a lot of scrolling, show clear inline validation so nobody submits and gets bounced back to a mystery error, and make the submit button big, obvious, and in the thumb zone. A checkout that respects the phone in the user's hand completes. One that treats mobile as a shrunken desktop leaks buyers at the last step.
The deeper point is that mobile-first is a discipline that makes everything better, including the desktop experience. When you are forced to fit the message into a narrow column, into a thumb's reach, into a slow connection, you are forced to decide what actually matters and cut what does not. That prioritization, imposed by the constraint of the small screen, produces clearer, calmer, more focused designs at every size. Designing for the phone first is not a limitation on craft. It is a forcing function for it.
Accessibility is not charity, it is conversion
Accessibility gets filed under compliance, or under doing the right thing, and both framings undersell it. Yes, designing for people with disabilities is the right thing and often a legal requirement. But the reason I bring it up in a conversion article is simpler and more self-interested: accessible design converts better for everyone, because the things that help people with disabilities are the same things that reduce friction for all your users.
Take contrast. Sufficient contrast between text and background is an accessibility requirement because low-vision users cannot read faint gray text on a white field. But nobody reads faint gray text comfortably, low vision or not, especially on a phone in bright sunlight, which describes a huge share of real usage. When you meet the contrast standard, you are not just serving the users who need it, you are making your text readable for the person squinting at their screen outside, and readable text converts better than pretty-but-illegible text every time. The trendy light-gray-on-white look is an accessibility failure and a conversion failure wearing the same clothes.
Text size and spacing follow the same logic. Type that is large enough and spaced enough to be read by someone with a visual impairment is type that is comfortable for everyone, on every device, in every lighting condition. Designers love small, tight type because it looks refined on a large studio monitor. Real users on real phones need it bigger than the designer's instinct, and the accessibility guidelines happen to point exactly where conversion wants you to go. When comfort and compliance agree, listen to both.
Clear labels and structure help screen-reader users navigate, and they also help everyone else. A form field with a real, persistent label is usable by someone using assistive technology and also by the person who tapped into the field and forgot what it was asking. Descriptive links, get the pricing guide rather than click here, help screen-reader users who scan by link and also help sighted users understand where a link goes. Logical heading structure helps assistive tech build a map of the page and also reflects the kind of clear hierarchy that helps sighted scanners. Good structure is good for machines, for assistive tech, and for humans, all at once, which is a recurring theme in how I think.
Keyboard and focus states matter more than most designers realize. Some people navigate entirely by keyboard, and they rely on a visible focus indicator to know where they are. Designers frequently remove focus outlines because they find them ugly, which quietly breaks the site for anyone not using a mouse. The fix is not to remove the indicator, it is to design a focus state that fits the brand and is clearly visible, so the experience works for keyboard users and still looks intentional. It is entirely possible to have accessible focus states that look good. Refusing to design them is a choice to exclude people to save a little polish.
There is also the plain business case, which I make without apology because it is true. A meaningful percentage of the population has a disability of some kind, permanent or temporary or situational, the broken arm, the bright sun, the noisy train, the aging eyes. Every one of them is a potential customer, and an inaccessible design turns some share of them away at the door before they ever reach your offer. You do not usually see the customers an inaccessible design loses, because they leave silently, which is exactly why this gets neglected. The lost revenue is invisible, and invisible losses are the easiest to ignore and the most worth fixing.
My honest position is that accessibility is a quality bar, not a feature. A design that fails color contrast, that breaks under keyboard navigation, that confuses a screen reader, that uses tiny illegible type, is not a beautiful design with an accessibility gap. It is a design that does not work for a meaningful set of real people, which means it is not finished. When I review work, accessibility failures read to me the same way a broken layout reads: as evidence the design is not done yet. Meeting the bar is not extra credit. It is part of what it means to have designed the thing at all.
Test design decisions instead of arguing about taste
Most design arguments are unwinnable because they are arguments about taste, and taste has no referee. I like this blue, you like that blue, the loudest or most senior person wins, and the decision has nothing to do with what actually works. The single most freeing shift in my career was to stop arguing about taste and start settling design questions with evidence. Once you can measure, the meetings get shorter and the pages get better, because the user casts the deciding vote.
| Method | Question it answers | Strength | Limitation |
|---|---|---|---|
| A/B testing | Which version converts better | Turns opinion into fact | Needs traffic; only tests what you tried |
| Heatmaps | Where do people look and click | Cheap, reveals wrong assumptions | Shows where, not why |
| Session replay | How do real people struggle | Watch reality, not imagination | Anecdotal; easy to over-index |
| Analytics | Which pages and steps bleed | Points you at the biggest wound | Tells you what, not the fix |
A/B testing is the backbone of this. You show version A to half your visitors and version B to the other half, you keep everything else constant, and you watch which one produces more of the outcome you care about. Done properly, it converts an opinion into a fact. The discipline is in doing it properly: test one meaningful change at a time so you know what caused the result, run it long enough and on enough traffic to trust the number, and pick the success metric before you start so you are not fishing for a flattering result after the fact. A sloppy test that stops the moment it shows the answer you wanted is worse than no test, because it launders a guess as evidence.
The honest caveat is that A/B testing needs traffic, and a lot of businesses do not have enough of it to test small changes and reach statistical confidence in a reasonable time. That is fine. It just means you test big, high-impact changes rather than button shades, and you lean harder on the qualitative tools for everything else. Anyone who tells you to A/B test the corner radius of a card on a site with modest traffic is selling rigor theater. Match the method to the traffic you actually have.
Heatmaps are the next tool, and they answer a different question: not which version wins, but what people are actually doing on the page you have. A click map shows you where people tap, and it is humbling, because they click things that are not links, ignore the button you were sure was obvious, and swarm an element you thought was minor. A scroll map shows you how far down people actually get, which usually reveals that the thing you put at the bottom is seen by a small fraction of visitors. Heatmaps do not tell you why, but they are excellent at showing you where your assumptions about attention are wrong, and they cost almost nothing to run.
Session replay goes deeper still. Watching anonymized recordings of real people using your page is uncomfortable and enormously educational. You see the hesitation before a confusing form field, the rage-clicking on something that looks interactive but is not, the person who scrolls past your beautiful hero without stopping, the mobile user fighting a menu that does not behave. Ten session replays will teach you more about where your design fails than a month of internal debate, because you are watching reality instead of imagining it. The catch is that replay shows you problems, not solutions, and it is easy to over-index on one dramatic recording. Use it to form hypotheses, then confirm them across many sessions or with a test.
The tools work best together, as a loop rather than a menu. Heatmaps and session replay show you where the problems are and generate hypotheses about why. A/B testing confirms if your proposed fix actually helps. Analytics tells you which pages and steps are bleeding the most, so you know where to point the whole apparatus first. You watch to find the wound, you form a theory, you test the fix, you measure, you move on. That loop turns design from a series of opinion battles into a system that gets reliably better, and it changes what a designer is: not a person with good taste defending it, but a person with good taste who checks it against reality.
I want to be careful not to oversell measurement, because the data-only extreme fails too. Testing tells you which of the options you tried did better. It cannot invent the great option you never thought to try, and it cannot see the long-term brand damage from a short-term conversion trick, because the damage shows up outside the test window. So taste still matters enormously. Taste generates the hypotheses worth testing and vetoes the wins that would cost you more in brand than they return in conversion. The goal is not to replace judgment with data. It is to stop wasting judgment on questions data can answer, and save it for the questions only judgment can.
Brand consistency at scale: the design system
Everything I have described so far is achievable on a single page by a careful designer. The hard part is doing it across hundreds of pages, dozens of screens, several teams, and years of change, without the whole thing drifting into inconsistency. That is the job a design system does, and a design system is where brand consistency and conversion efficiency stop being in tension and start reinforcing each other.
A design system is a shared set of decisions made once and reused everywhere: the colors, the type scale, the spacing rules, the components like buttons and forms and cards, and the guidelines for how they go together. Instead of every designer and every page reinventing what a button looks like, there is one button, defined once, used everywhere. That sounds like a constraint on creativity, and stakeholders sometimes resist it as such. In practice it is the opposite. It frees designers from re-solving solved problems so they can spend their creativity on the problems that are actually new.
The conversion argument for a design system is consistency, and consistency is trust at scale. When every page looks like it belongs to the same confident company, when the buttons behave the same way, when the type and spacing and color are steady from the homepage to the checkout, the whole experience reads as competent and coherent. When pages drift, when one section uses a different button style and another uses a different blue and the spacing lurches from tight to loose, the experience feels held together with tape, and that feeling leaks doubt at exactly the moments you need trust. A consistent system is a trust signal spread across the entire product.
There is a pure speed argument too, and speed compounds. When a team shares a system, building a new page is assembling proven components rather than designing from zero, which means pages ship faster and with fewer bugs and fewer inconsistencies. That speed matters for conversion indirectly but powerfully: a team that can ship and test quickly runs more experiments, learns faster, and improves faster than a team that hand-builds every page. The design system is not just about looking consistent, it is about the whole organization moving faster with less waste, and in a fast-moving landscape that speed is a real advantage.
The components themselves should have the conversion lessons baked in, which is the part teams often miss. If your button component already encodes proper contrast, proper size, proper spacing, and an accessible focus state, then every button on the site is a good button by default, and nobody has to remember the rules. If your form component already uses proper labels and the right input types and inline validation, then every form is a decent form without the individual designer re-deriving best practice. A good system does not just enforce visual consistency, it distributes hard-won conversion and accessibility knowledge to everyone who uses it, so the floor for quality rises across the whole product.
The failure mode to watch is a system that calcifies into a cage. A design system should be a living thing that evolves as you learn, not a set of tablets that can never change. If the system cannot accommodate a genuinely new need, people route around it, and once people start routing around the system it fragments and dies. The discipline is to hold the line on consistency for the ninety percent of cases the system covers well, while keeping a real, non-bureaucratic path for the new cases that should feed improvements back into the system. A system that cannot grow will be abandoned. A system that grows with the product stays alive and keeps paying off.
Underneath all of it is a single idea I keep returning to across everything I do: build the shared foundation once, and let it pay off in many places. It is the same instinct as building one clear source of truth for how a brand shows up. A design system is that instinct applied to the interface: decide who you are visually and behaviorally, encode it once as reusable parts, and then every page, every screen, every new feature inherits the brand and the conversion craft automatically. That is how you get consistency and quality at a scale no individual designer could hold in their head, and it is why a serious design system is one of the highest-return investments a growing product can make.
The mistakes designers and marketers keep making
After enough years you start to see the same handful of mistakes on repeat, made by smart people who should know better, including me on my worse days. They are worth naming plainly, because most of them come from a single root: forgetting that the design exists to serve a stranger who is not you, does not think like you, and did not read the brief. Almost every conversion-killing mistake is a form of designing for yourself instead of for that person.
The designer's classic mistake is prioritizing novelty over clarity. We get bored. We have seen a thousand conventional layouts and we itch to do something fresh, so we reinvent the navigation, hide the menu behind a clever gesture, replace clear labels with icons only we understand, and make the interface a puzzle. The user did not come to admire your originality. They came to accomplish something, and every convention you break for the sake of novelty is a thing they now have to relearn. Convention is not the enemy of good design. Convention is accumulated knowledge about what people already understand, and you break it only when you have a genuinely better answer, not because you are bored.
The marketer's classic mistake is the opposite failure, cramming. Everything is important, so everything goes on the page: every feature, every offer, every proof point, every link, all at maximum volume. The result is a page with no hierarchy, where nothing leads because everything is shouting, and a shouting page converts worse than a calm one because the eye cannot find the point. Adding is easy and feels productive. Subtracting is hard and is usually the higher-value move. The best conversion work I have done has more often been removing things than adding them.
Then there is designing for the boss instead of the user, which corrupts more work than any skill gap. The stakeholder wants their pet feature above the fold, the executive likes the blue they like, the loudest voice in the review gets their way, and the actual user, who is not in the room, loses every one of these arguments. The antidote is evidence. When you can show what real users do, the conversation shifts from whose opinion wins to what actually works, and the boss's taste stops being the deciding factor. This is the deeper reason to measure: not just to improve the page, but to change who gets to decide.
Another recurring one is chasing trends off a cliff. A visual trend appears, everyone copies it, and suddenly a technique that made sense in one context is everywhere regardless of fit. Ultra-thin low-contrast type, tiny illegible text, autoplaying video that buries the message, animation that delays the content, all have had their moment of fashion, and all hurt conversion when applied without thought. Trends are worth watching and occasionally worth adopting, but the question is never is this trendy, it is does this help my specific user do the specific thing, and most trends fail that test for most situations.
A subtler mistake is treating the funnel as a series of isolated pages rather than a single journey. A gorgeous landing page that dumps into an ugly, confusing checkout loses the sale it worked so hard to earn, because the experience broke exactly where the money changes hands. The visitor does not experience your pages as separate designs, they experience one continuous flow, and the flow is only as strong as its weakest step. I have seen more revenue recovered by fixing a broken checkout than by any amount of homepage polish, because the checkout is where intent turns into money and a leak there is the most expensive leak you have.
The last mistake is falling in love with the work and refusing to let the data change your mind. You design something, you are proud of it, you become invested, and when the numbers say it is underperforming you argue with the numbers instead of listening. I have done this. It is human. It is also the enemy of getting better, because the whole point of measuring is to be corrected, and being corrected only helps if you actually update. The designers who improve fastest are the ones who hold their work loosely enough to kill a piece they love when the evidence says it is not working. Ego is the most expensive thing you can bring to a conversion problem.
A worked example: redesigning a page for conversion
Let me make this concrete with a composite example, the kind of redesign I have run many times. Picture a product landing page for a mid-priced subscription. It looks fine at a glance, someone competent made it, and it is underperforming for reasons that are invisible until you go looking. Nobody on the team can agree on why, so the debate has been running in circles about the color of the hero. The color of the hero is not the problem. It never is.
| Element | Before | After | Why it moves the number |
|---|---|---|---|
| Headline | Clever brand line, no meaning | Plain what and who | Strangers understand in a second |
| Primary CTA | One of three equal buttons | Single dominant action | The eye finds the path to act |
| Proof | Buried at the bottom | Right under the hero | Answers show me you are real early |
| Signup | Many fields, drop-off | Fewest fields, right keyboards | Removes friction where money is lost |
| Mobile | Shrunken desktop | Thumb-zone, first-screen value | Serves the majority of real traffic |
Start with diagnosis, not opinion, because opinion is what got the page stuck. The analytics show a high bounce on the landing page and a steep drop at the second step of signup. The heatmap shows almost nobody scrolls past the first screen, and a surprising number of clicks land on the hero image, which is not clickable, meaning people expect it to do something and it does nothing. Session replays show visitors hovering near the top, hesitating, and leaving. The scroll map confirms the beautiful proof section and testimonials, all placed low on the page, are seen by a small fraction of visitors. Before touching a pixel, I already know the story: the first screen is failing to make the case, and everything good is buried below where anyone looks.
Now the hero, which was doing none of its three jobs. The headline was a clever brand line that told a stranger nothing about what the product actually is. There was no clear benefit. The primary button existed but was the same visual weight as two other buttons beside it, so the eye never singled it out, and the whole first screen was a large atmospheric image with the actual message squeezed into a corner. The redesign is not subtle: a plain headline that says what the product is and who it helps, one concrete benefit underneath, a single dominant call to action in the brand's action color with real space around it, and the previously buried star rating and review count pulled up beside the headline so the first thing a visitor feels is that other people already trust this.
Hierarchy comes next, because the old page was flat. Everything was roughly the same size and weight, so nothing led and the eye had nowhere to land. The redesign establishes a clear order: the headline dominates, the benefit supports it, the button is the unmistakable focal point, and everything else steps back to let those three lead. Squint at the new first screen and you can instantly tell what the product is and what to do. Squint at the old one and it was gray mush. That single change, giving the first screen a real hierarchy, tends to move the number more than any other, because it fixes the exact moment where most people were leaving.
Then restructure the flow to match how a skeptic decides. The proof that was stranded at the bottom moves up to right after the hero, because show me you are real is the first reaction to any claim. The how-it-works becomes a simple, visual three-step so the product stops feeling like work to adopt. An objection-handling section gets added where there was none, naming the real doubts, the price, the commitment, the will-this-work-for-me, and answering each. The primary call to action gets repeated after each major block, worded identically, so anyone who becomes convinced partway down has a button right there instead of a scroll-hunt. And the signup step that was hemorrhaging people gets stripped to the fewest fields, with the right mobile keyboards and clear inline validation, because that second-step drop was people fighting a form.
Then mobile, treated first this time rather than last. The old page was a shrunken desktop, with the value proposition pushed below the fold on a phone and the primary button stranded in a hard-to-reach spot. The redesign puts the value and the action in the first mobile screenful, moves the primary action into the thumb's easy zone, enlarges the tap targets, and cuts the heavy hero image down to something that loads fast on a real connection. A large share of the traffic was on phones, so for most visitors this is not a secondary polish pass, it is the main event.
Finally, and this is the part that separates a redesign from a guess, you do not ship it as a finished truth. You ship it as a hypothesis and you test it. Run the new page against the old one, watch the real metrics, the bounce, the scroll depth, the signup completion, and let the users vote. In the composite version of this story, the pattern is the familiar one: the clearer, more focused, mobile-first page with proof up front and a single dominant action converts meaningfully better, in the range I have come to expect from fixing hierarchy and flow, roughly a quarter more completions, without a single change to the underlying product or price. Nothing about the offer changed. The design just stopped getting in the way of it.
What is next for design that converts
The tools change constantly and the fundamentals barely move at all, which is the most useful thing I can tell a designer trying to figure out where to invest. Interfaces have shifted from desktop to mobile to voice to whatever comes next, the visual fashions cycle every few years, and through all of it the underlying job has stayed exactly the same: help a real human understand, trust, and act. Bet on the fundamentals. They outlast every tool that claims to replace them.
The clearest near-term shift is that a growing share of decisions now happen before anyone reaches a page you designed. People form opinions inside search results, inside AI-generated answers, inside social feeds, inside app stores, in a dozen places where your brand is being represented by a snippet, a thumbnail, a rating, a summary you did not lay out by hand. Design increasingly has to work at that compressed scale, in the small surfaces where a brand shows up before the click. The discipline of hierarchy, of leading with the one thing that matters, of earning trust fast, applies just as hard to a search snippet or a social card as it does to a full landing page, arguably harder, because you have less room and less time.
Personalization is the other direction of travel, and it is a double-edged one. The ability to tailor an experience to a specific visitor is real and getting more powerful, and used well it means the right person sees the right message with less friction. Used badly it means a fragmented, creepy, inconsistent experience that erodes the brand and unsettles the user. My view is that personalization should adapt the message while holding the brand and the trust fundamentals constant. Change what you say to whom, do not change how clear, honest, and easy to act on the page is. Those are not the knobs to turn.
Motion and richer interaction keep getting cheaper to produce, which raises the temptation to over-use them. Movement is powerful precisely because it commands attention, and that power is exactly why it should be spent carefully. Motion that guides attention, clarifies a state change, or gives feedback on an action earns its place. Motion that exists to show off, that delays the content, that makes people wait for a message they came to read, actively hurts. As these capabilities get easier, the discipline to use them sparingly becomes more valuable, not less. The constraint is the craft.
Through all of it, the accessibility and performance fundamentals only get more important, not less, as the audience broadens and the contexts multiply. More people, on more devices, in more situations, on more variable connections, reaching your brand through more surfaces. Every one of those expansions is an argument for the boring durable disciplines: readable, fast, clear, usable by everyone, consistent everywhere. The exotic new capability is fun and the fundamentals are what actually determine if a stranger converts, and that ordering is not going to flip.
So if you are a designer wondering what to get good at, my answer is unromantic. Get good at clarity. Get good at hierarchy, at trust, at removing friction, at designing for the person who is not you. Get comfortable with evidence, so you can tell a real improvement from a flattering guess and settle arguments with data instead of rank. Learn to build and use a system so your craft scales past a single page. Those skills have paid off through every platform shift I have lived through, and I would bet everything I have that they keep paying off through the next one, because they are not about any tool. They are about people, and people are the one thing that does not get deprecated.
The whole argument of this piece comes down to a single sentence I would attach to every design review if I could. Beautiful and effective are not opposites, they are the same craft practiced well, and the work of a designer who is judged on revenue is to refuse the false choice between them, over and over, until making the right thing easy is just how you design.
Frequently asked questions
Is there really no trade-off between beautiful design and high conversion?
There is no fundamental trade-off, though there are bad versions of each. A beautiful page that buries the button or hides the price is not well designed, it is decorated. A page that converts by nagging is borrowing future trust for a short-term number.
What is the single highest-impact change to improve conversion?
Fix the hierarchy of the first screen. Most pages fail because the eye cannot instantly tell what the product is, why it matters, and what to do.
How do I know if my visual hierarchy is working?
Squint at the design until it blurs, or shrink it to a thumbnail. In that blurred state you should still be able to see the one most important element and the path the eye is meant to take.
What actually builds trust on a page?
Small right decisions, and the absence of wrong ones. Generous whitespace, disciplined typography, a restrained color palette with one action color, specific social proof placed near the decision, and real imagery instead of stock all read as competence.
How should I write button copy?
Specific, first-person, and benefit-oriented. Generic text like submit, continue, or click here wastes the highest-attention word on the page. Complete the sentence the visitor is already saying, which is I want to. Start my free trial beats submit. Get my pricing beats learn more.
Why does mobile-first matter so much?
Because for most brands the majority of traffic is on a phone, held in one hand, run by a thumb, often on a slow connection. If you design on a big monitor and check mobile last, you are designing for the minority.
Is accessibility really a conversion issue, not just compliance?
Yes. The things that help people with disabilities reduce friction for everyone. Sufficient contrast makes text readable for a low-vision user and for anyone on a phone in sunlight. Larger, spaced type works better on every device. Real labels help assistive tech and forgetful users alike.
How do I settle design arguments without it coming down to opinion?
Replace taste debates with evidence. Use analytics to find which pages and steps bleed the most, heatmaps and session replay to see where people struggle and form hypotheses, and A/B testing to confirm if a fix actually helps.
How long should a landing page be?
Exactly as long as it takes to make the case and not one section longer. High-intent, low-risk offers can convert on a short page. High-price, high-consideration offers usually need a long one, because there is more skepticism to overcome and more proof to show.
What is a design system and why does it help conversion?
It is a shared set of decisions made once and reused everywhere: colors, type scale, spacing, and components like buttons and forms. It helps conversion three ways. Consistency reads as competence and builds trust across every page. Speed lets teams assemble proven parts and ship and test faster.
What mistakes should designers and marketers watch for most?
The same root error in different clothes: designing for yourself instead of the stranger who has to use it. Designers over-value novelty and break useful conventions. Marketers cram everything on until nothing leads.
What is the one idea to take from all of this?
Make the right thing easy to understand, easy to trust, and easy to do. That single test dissolves the fake split between pretty and performance, because a page that makes the right thing easy tends to look calm and considered and tends to convert.
I'm Frederick Sona, and I've spent most of my career chasing one question: why do some brands break through while others, often the better ones, don't? I've looked for the answer as a marketer, a designer, a technologist, a salesperson, and a founder, and the honest answer is that it takes all of it: being easy to find, easy to trust, and easy to buy from. Search Everywhere Optimization is one piece of how I think about that, but this blog covers the whole picture, from search and technology to brand, design, and the work of turning attention into revenue. If any of this was useful, come say hello at fredericksona.com.