The UI Redesign That Tanked Conversion: A Postmortem
A visually stunning redesign shipped, and checkout conversion dropped 18% within two weeks. Here's what actually went wrong, and the review step that would have caught it before launch.
We were brought in to diagnose a redesign a different agency had shipped six weeks earlier. The new design was genuinely well-crafted: clean typography, a cohesive visual system, modern spacing. Checkout conversion had dropped 18% within two weeks of launch and hadn't recovered. The client's instinct was that something had broken. Nothing had broken. The design had simply optimized for the wrong thing.
What actually happened
The old checkout page was visually dated but functionally direct: a single-column form, a clearly labeled "Place Order" button in a color that stood out from everything else on the page, and shipping cost shown before the final step. The redesign moved to a cleaner two-column layout, restyled the primary button in the new brand's muted color palette (which matched several secondary elements on the same screen), and moved shipping cost calculation to appear only after clicking through to a summary step.
Individually, every one of these choices was defensible from a pure visual design standpoint. Together, they removed the specific friction-reducing signals the old page had, even if accidentally: the button no longer stood out clearly from secondary actions, the two-column layout introduced ambiguity about task order on mobile where it collapsed awkwardly, and hiding shipping cost until later in the flow, a well-documented cause of cart abandonment, was reintroduced by a redesign that wasn't checking against that specific, known risk.
Why this is a common failure mode, not a one-off
Visual design and conversion design are related but not identical disciplines, and a redesign led purely by visual coherence, without conversion-specific review, will often make a page look better while quietly making it perform worse. This isn't a knock on visual design skill. It's a gap in process: nobody on that project asked "does this specific change affect a known conversion lever" for each significant decision, because the review criteria were aesthetic, not behavioral.
What we do differently on checkout and conversion-critical flows
Any redesign that touches a checkout, signup, or lead-capture flow goes through a specific review pass separate from general design review: does the primary action remain visually dominant against every other element on the screen, is any cost or commitment information delayed past where a user expects to see it, does the mobile layout preserve the same task order as desktop, and does the new version get tested against the old one with real users, or at minimum a structured heuristic walkthrough, before it fully replaces the version that was already converting.
For anything genuinely conversion-critical, we push for a staged rollout, or at minimum a short A/B test window, specifically because visual improvement and conversion performance don't always move in the same direction, and the only way to know for certain before a full launch is to measure it, not assume good design habits carry over automatically.
The fix, and the lesson
We rebuilt the checkout keeping the new brand's visual language but restoring the specific behavioral cues the redesign had accidentally removed: a dominant, unambiguous primary action color, shipping cost shown upfront, and a task order that held on mobile. Conversion recovered within the following two weeks. The lesson wasn't "the old design was better." It was that a redesign needs a conversion-specific review pass, not just an aesthetic one, on any page where a small behavioral change has a direct revenue consequence.
More on Design & UX
Have a project this touches on?
Tell us what you're building or running today. We'll give you a straight answer, not a sales pitch.