Skip to content

Design That Converts: UX Hierarchy That Turns Visitors into Leads

Design is behaviour before it is decoration. How hierarchy, clarity and argument order move a visitor from curiosity to a decision, with no dark pattern.

Mark Murphy, Founder & Managing Director Updated 9 min read

Bars of decreasing weight on off-white resolving into a hairline broken by one open copper ring.

Share

Every visual decision on a page is answered in milliseconds: where the eye lands, what feels trustworthy, what to do next. Design that converts is not louder or shinier. It is the deliberate engineering of those milliseconds, so that a visitor who is genuinely a fit reaches the decision faster and a visitor who is not can tell early.

This piece is about the craft: what hierarchy, sequence and restraint actually do to behaviour. If you have a site in front of you that is getting traffic and not producing enquiries, the diagnostic version of this argument is in why your website is not converting, which works through the causes in the order worth checking them.

Intent behind every element

We design with behaviour in mind before beauty. Clear hierarchy tells a visitor what matters most. Directional flow moves them through the page in the order the argument needs. Visual rhythm makes the journey feel effortless. From the scale of a headline to the space around a button, nothing is random. It is all pointed at the same outcome.

That does not mean manipulative. Countdown timers on evergreen offers, fake scarcity, a close button hidden in a corner and a newsletter box that reappears on every scroll all raise a number in the short term and cost trust in the long one. They are also the easiest thing in the world to copy, which tells you how much they are worth. Honest structure is harder to copy because it comes from actually knowing what the page is for.

Hierarchy is a decision about what to sacrifice

Hierarchy is usually taught as a way of emphasising things. In practice it is a way of de-emphasising things, and that is the part people resist. If a section has four equally weighted messages, it has none, because the reader has no way to know which one to spend attention on.

So the useful question for any screen is not “what should stand out?” but “what am I willing to make smaller, quieter or later?” Three levers do almost all of the work:

  • Scale. Size differences have to be obvious to register. A headline one step larger than the paragraph under it reads as an accident rather than a hierarchy.
  • Space. Grouping by proximity is faster to read than grouping by a box or a rule. A generous gap separates more confidently than a drawn line, and it does not add visual noise.
  • Contrast. Reserve the strongest contrast in the palette for the thing you most want pressed. If everything on the page has an accent colour, nothing does.

Colour and styling come last in that list on purpose. A page with the right structure converts in plain type. A page with the wrong structure does not get rescued by a nicer button.

Clarity is the conversion strategy

People do not explore confusing pages. They leave them. So the discipline is subtraction: fewer competing messages, space that gives the important things room, and a next step that is impossible to miss. Each screen carries one or two goals, never five.

Clarity is mostly a writing problem wearing a visual costume. The first screen has to say what you do, who it is for and what happens next, in language the visitor would use themselves. A clever line that needs a second line to explain it has already cost you the people who were only half interested.

When a visitor does not have to think about how the page works, all of their attention goes to whether the offer is right. That certainty is what converts: clarity first, confidence second, action third.

Structure that sells without pressure

The best pages read like a well-made argument: curiosity, connection, credibility, then a decision. We sequence sections deliberately, problem before solution, proof before price, evidence before the ask. By the time a visitor reaches the call to action, the path there has already answered their objections in the order they tend to arrive.

Two ordering mistakes account for most weak pages. The first is proof arriving too late, on a separate page the visitor never reaches, so the claims stand unsupported at exactly the moment they most need support. The second is price arriving too early, before the reader has any frame for judging whether the number is reasonable, which turns a fair price into a shock.

It is not a funnel that feels like a funnel. It is a well-told argument, and a well-told argument outsells pressure every time.

The first screen carries most of the weight

Whatever else a page does, the area a visitor sees before scrolling decides whether the rest gets read. It has one job: to confirm, in a couple of seconds, that they are in the right place. That means a specific headline rather than a slogan, one primary action rather than three, and a visible reason to believe you, whether that is a named client, a recognisable logo or a concrete result.

It also means resisting the urge to put everything there. A first screen crammed with a headline, a sub-headline, a form, a badge row, a video and two buttons is a hierarchy problem pretending to be thoroughness.

Accessible design and converting design are the same design

Large enough type, real contrast, a visible focus state, buttons that look like buttons, labels that stay visible while the field is being filled: every one of those is an accessibility requirement, and every one of them raises completion rates for people who have no accessibility need at all. The overlap is not a coincidence. Both disciplines are about removing work from the reader.

The same is true of speed. A page that takes its time is a page that gets abandoned before any of this design work is seen, which makes performance a conversion decision rather than a technical one.

Design that converts is measurable, or it is an opinion

The last part of the craft is being willing to be wrong in public. Decide before you change anything what the measure is, usually enquiries per hundred visitors on the pages you touched, over a fixed window either side. Change one structural thing at a time so you can attribute the result. Watch quality as well as volume, because a shorter form can raise both and a vaguer one can raise volume alone.

Design that cannot be measured is still worth doing when it serves clarity. It just should not be defended with a claim about conversion that nobody checked. When the structure itself is the problem rather than the styling, that is a website redesign question, and the rankings you already have need protecting through it.

FAQs

Questions this article gets asked.

The ones that come up most, answered straight.

Does design really affect conversion, or is it just the copy?

Both, and they are less separable than the question suggests. Copy decides what the argument is. Design decides the order it arrives in, what the reader notices first and how much effort each step costs. A strong argument buried in a flat, undifferentiated page does not get read, and a beautifully set page with nothing to say does not get acted on.

What is the single most common conversion mistake in design?

Too many competing calls to action. A page that offers four equally weighted next steps gets fewer of all four than a page that offers one. The fix is to decide what each page is for, make that action the visually loudest thing on it, and demote the rest to ordinary links.

Are dark patterns effective?

They can move a short-term number, which is why they persist. They also raise refunds, complaints, unsubscribes and the amount of scepticism a visitor brings to everything else you say. Several are now restricted under EU consumer and data protection rules as well. Honest structure is the better commercial bet and the safer one.

How much white space is too much?

There is no fixed answer, but the test is functional rather than aesthetic. Space is doing its job when it groups related things and separates unrelated ones. It is too much when a reader has to scroll to connect a heading with the content it belongs to, and too little when everything reads as one block.

Should the call to action always be above the fold?

The primary action should be visible without scrolling, and it should also be repeated where the argument has done its work. Most people do not decide in the first screen. They decide after the proof, which is exactly where a second, identical call to action belongs.

How do I know whether a redesign actually improved conversion?

Pick the measure first, hold it steady, and give it at least four weeks of comparable traffic. Compare enquiries per hundred visitors rather than raw totals, since traffic moves on its own. If several things changed at once, you will get a result you cannot attribute, which is the usual reason redesigns are argued about rather than learned from.

The next step

If your site looks fine and still is not producing enquiries, the problem is usually structural: the order of the argument, the number of things competing for attention, or a first screen that does not confirm quickly enough that the visitor is in the right place. Send us the address and we will tell you which of those it looks like. Mark or Adam will reply, and if the honest answer is that you do not need us, that is the answer you will get.

Talk to us about your website, or email hello@loco.ie.

  • Conversion
  • UX
  • Strategy
  • Hierarchy

Share this article

Keep reading

More from the build.

Design 10 min read

Why your website is not converting (and what to fix first)

Design 8 min read

Bridging Design & Development: From Figma to Production

Design 8 min read

What Your Brand Actually Needs: A System, Not a Rebrand

Let’s talk

Got a project
in mind?

Prefer a call?

Book a free 30-minute call

Opens a booking panel here, or a new tab if scripts are blocked. Cookie Policy.

Fields are required unless marked optional.

You’ll hear back from Mark or Adam within one working day.

We use what you send only to reply to you. See our privacy policy.

This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.