Does a cleaner checkout design lift desktop conversion?

Our desktop checkout used heavy box shadows, a high-contrast fees section and plain field states. We tested a cleanup based on Material Design guidelines. Over 12 days, conversion was 0.5% lower, level with the original.

Not significant Desktop 12 days Not called

SURFACE

Checkout

DEVICE

Desktop

VERTICAL

Ecommerce (B2C)

PRIMARY METRIC

Conversion rate

VARIATIONS

1

The hypothesis

By cleaning up the desktop checkout design to follow Material Design guidelines, we will improve readability, feedback and accessibility, resulting in more completed orders.

Over earlier rounds of checkout tests, we had set aside several small design fixes. Together they could make the form easier to read and use, through clearer field states and less visual weight on the fees.

What we changed

Checkout restyled with lighter fees, field borders and clear states

We lowered the contrast of the fees section, swapped box shadows for field borders, and styled the active, error and validation states of each field. The first field was selected automatically when the page loaded. A matching mobile version ran at the same time.

VAR A: MATERIAL CLEANUP

Lower contrast fees section
Field borders replace box shadows
Styled active, error and valid states
First field selected on load

The result

Conversion was 0.5% lower with the cleaner checkout design

CONVERSION RATE

-0.5%

Over 12 days, the cleaner checkout converted 0.5% worse than the original, with revenue per visitor also down 0.5%. That is effectively no difference. The mobile version leveled out with its original in the same way, so we paused both after 12 days rather than keep spending traffic on them.

What we would do next

Test checkout copy and confidence, not visual polish

The cleanup made the checkout look more polished but did not change whether visitors paid. Earlier copy tests that addressed fees and expectations had moved conversion on this checkout, so we would keep the next checkout tests focused there.