When Design and UX Pull in Different Directions
A mid-size retailer relaunches its checkout page with a new brand look: more whitespace, a lighter font, bigger product photography. It photographs beautifully. Within a few weeks, conversion on that page drops by a noticeable margin — nobody removed a step, nobody changed the pricing, but the new visual restraint quietly hid form labels and shrank the "Complete Order" button into something that no longer read as the obvious next action. The team had optimized for how the page looked in a design review, not for how it performed in front of someone trying to buy something.
Why This Happens
It's worth being precise about what actually happened in that scenario, since "design broke UX" is a slight oversimplification. Nothing about the new visual direction was objectively wrong — the typography was legible, the color palette was accessible, the photography was high quality. What broke was the relative visual weight of elements: in trying to look more restrained and premium, the team reduced the contrast and size of functional elements (labels, the primary button) faster than they reduced the visual weight of decorative elements (whitespace, imagery), so the balance that used to make the "next step" obvious quietly disappeared.
Design and UX aren't naturally opposed — but they're evaluated by different people, on different timescales, using different evidence. A brand or visual designer's work gets judged in a review, often by other visually literate people, based on how polished and on-brand it looks in that moment. A UX decision's quality only shows up later, in conversion numbers, support tickets, or usability tests — evidence that's slower to arrive and less visually satisfying to look at than a mockup. When a deadline forces a shortcut, the highly visible visual polish tends to win over the slow-to-arrive usability evidence, even when the usability evidence matters more.
Where Brand and Usability Actually Compete
Contrast — a muted, "sophisticated" color palette that a brand team loves can quietly fail accessibility contrast minimums, making text harder to read for a meaningful share of users.
Whitespace and restraint — minimalist layouts can accidentally de-emphasize functional elements like error messages or required-field markers that need to stand out, not blend in.
Voice and tone — clever, on-brand copy ("Let's do this!") can obscure what a button actually does compared to a plain label ("Submit Payment"), especially for users who are anxious or in a hurry.
Motion — brand-driven animation can slow down perceived responsiveness if a transition takes longer than the user's patience for that specific action.
A Framework for Resolving the Tension
Usability consultant Jared Spool has argued for asking, of any visual decision, whether it's carrying information or purely decoration. If a color, an animation, or a layout choice is standing in for information the user needs (this field is required, this button is the primary action, this step failed), it isn't optional styling — it has a job to do and needs to be tested against that job, not just against how it looks in isolation. Purely decorative choices — background textures, illustration style, brand color on non-functional elements — have far more room to flex without hurting usability.
Two Real Approaches Worth Studying
brand teams are trained to write copy that's distinctive and persuasive — "Let's build something amazing together" reads well on a landing page. Put that same sentence on a button that submits a project creation form, and a user has to pause and infer what it
actually does, when a plain "Create Project" would tell them instantly. The brand voice isn't wrong on the landing page; it's misapplied on the functional button. A useful rule of thumb: the more a piece of text sits between a user and completing a task, the plainer and more literal it should be, regardless of how the rest of the page sounds.
Error messages are the sharpest version of this problem. A playful, on-brand error like "Oops, that didn't quite work!" might fit a casual consumer app's tone, but it tells the user nothing about what to do next. Pairing brand voice with actual diagnostic information — "Oops, that didn't quite work — your card was declined, try a different one" — lets a team keep its personality without sacrificing the information the user actually needs in that moment.
Top comments (0)