Before/After: PetalPay’s Checkout Redesign Cuts Cart Abandonment by 18%

Tech · 5 min read

PetalPay, a commerce fintech for independent retailers, had a multi-step checkout that combined address, shipping, billing, promo codes, and an upsell carousel. Heatmaps and funnel analysis showed that users were dropping off mainly on the payment and promo-code steps. The design team ran workshops to map essential versus optional elements and established a new goal: reduce perceived friction under 60 seconds to complete.

The redesign consolidated the critical path into a single, scrollable page with sticky summary and contextual input masks (address autocomplete, card scanning). Upsells moved to a post‑purchase screen and promotional code input was hidden behind a reveal link to prevent distraction. A visual progress indicator with microcopy focused on trust (security badges, estimated delivery) replaced dense legal links.

After a staged rollout, PetalPay reported an 18% reduction in cart abandonment and a 9% increase in conversion for mobile users. Revenue per session remained stable because upsells on the post‑purchase screen converted at a comparable rate. The team recorded lessons: test hiding optional elements carefully, prioritize input convenience, and treat perceived time as a metric in checkout design.