Mobile Checkout

Streamlined the mobile checkout experience for a grocery delivery app to address a 73% cart abandonment rate at payment.

mockup of mobile screen from this project

5 Months

UI/UX Designer

FreshCart is a grocery delivery app serving urban households who want their weekly essentials delivered within two hours. Despite strong add-to-cart behavior and healthy average order values, the app was hemorrhaging users at the final step. A 73% cart abandonment rate at the payment screen had become the single biggest obstacle to revenue growth, and the business was losing customers who had already done all the work of building a full basket. The brief was focused and clear: find out why people were dropping off at the last moment and redesign the checkout experience to get out of their way.

a abstract art of flowing gradient

The existing checkout flow required users to navigate through five separate screens to complete a single order, re-entering delivery details even when they had ordered before, manually typing card numbers with no autofill support, and choosing a delivery slot before they could see the total price. Session recordings revealed a consistent and almost predictable abandonment pattern where users would reach the payment screen, pause for several seconds, and then either close the app or abandon the cart entirely. User interviews with twenty participants confirmed what the data was hinting at: the process felt untrustworthy, effortful, and poorly timed. Price surprises at the end, especially delivery fees and surge charges that only appeared at checkout, were cited by fourteen out of twenty users as the primary reason they had abandoned an order in the past.

The redesign collapsed the five-screen flow into a single scrollable checkout page where the delivery address, slot selection, applied coupons, price breakdown including all fees, and payment method were all visible at once without a single page transition. The total cost, including delivery, was surfaced at the top of the screen before any input was required, directly addressing the price surprise problem. Apple Pay and Google Pay were integrated as the default payment options with a single tap to complete, while saved cards were surfaced immediately below for returning users. A persistent order summary bar was anchored to the bottom of the screen throughout, so users never lost sight of what they were buying. Delivery slot selection was redesigned as a compact horizontal scroll rather than a full screen, reducing it from an 8-tap interaction to a 2-tap one.

a abstract art of flowing gradient

After two rounds of usability testing and a phased rollout, the cart abandonment rate at payment dropped from 73% to 29%. Checkout completion time fell from an average of 4 minutes 10 seconds to 58 seconds. Returning user checkout, where saved details and payment methods were pre-populated, averaged just 19 seconds from cart to confirmed order. Revenue per session increased by 38% in the first month post-launch, and customer support tickets related to checkout confusion dropped by over half. The core insight the project kept returning to was that checkout is not a neutral transaction, it is the moment of maximum doubt, and every unnecessary step, hidden fee, or moment of friction is an invitation for the user to reconsider. Removing that doubt systematically, rather than just simplifying the interface cosmetically, was what made the numbers move.

Create a free website with Framer, the website builder loved by startups, designers and agencies.