Cart

No delivery fee or total

Checkout · scroll

The only place with the total

Guess first

People kept opening checkout and going back to the cart. Why?

Not this one. That’s what the funnel suggested too. Compare the bottom of the cart with the checkout.

Yes. The cart didn’t show the delivery fee or the total. The only place to see what you’d pay was the bottom of checkout, so people opened it, checked the price and went back.

The checkout leak

The funnel showed a lot of exits from checkout, and session recordings showed what people were actually doing there.

Rafeeq

A super-app in Qatar with food delivery, grocery and a marketplace.

App Store

My role

Senior Product Designer

I looked into what people were doing, found the causes and proposed changes to the cart and the promo code flow.

Status

Not released yet. The business moved its focus to other projects, and the change was put on hold.

What the numbers couldn’t explain

The product manager asked me to look into low checkout conversion. In Amplitude, I found a lot of exits, but the numbers didn’t explain what people were trying to do.

I watched longer session recordings. People opened checkout, looked at the total, sometimes applied a voucher and went back. Some repeated this several times in one session. That’s when I understood what was going on.

The cart didn’t show the full price: order sum, delivery fee and final amount. Checkout was the only place to find it. In the funnel, these visits looked like people giving up, even when they were still choosing what to buy.

Two related problems. Vouchers were also applied at checkout. People could get all the way there before finding out that the discount or the total wasn’t what they expected. New users often didn’t even know they had a welcome code.

Support requests showed a separate bug: some promo codes didn’t apply. I passed it on to the developers.

Order sum, delivery fee and totalThe total on the button

The fix was one step earlier

Instead of redesigning checkout, I changed the cart: I added the order sum, delivery fee and total, and put the total on the checkout button.

A clearer welcome promo code is planned as a separate change in checkout.

What I took from it. Analytics showed where people left, and recordings showed what they were doing. Without the recordings, I might have spent time simplifying checkout, when the missing information was actually one step earlier.

Next case

Prime — premium restaurants

I designed a premium restaurant section for Rafeeq, built its working prototype in React and made the entry animation in code.