Checkout Flow Redesign: Fix Cart, Booking and Lead Form Drop Off

Most checkout problems I review look the same from the outside. Take a typical case: an online store with a 4 step checkout and 7 in 10 carts abandoned. The team has tested button colours and headlines on the cart page for a year. Nobody has watched a session recording of step 3, where the delivery form asks for a phone number, a second address line and a company name, and visitors on a phone give up. The fix is not a new cart page. It is removing 7 fields and moving the total above the form.

That is what a checkout flow redesign is for. Not a new look, but a shorter path between the decision to buy and the confirmation. The same method works for booking flows and for lead forms on service websites, because all 3 are the same design problem: a person has decided, and the interface is in the way.

In this post I explain how I find where a website flow leaks, what goes wrong in online store checkouts, booking flows and lead forms, how I redesign 1 flow in 2 to 3 weeks, and what to measure before and after.

What a checkout flow redesign fixes, and what it does not

A checkout flow redesign fixes the path from "I want this" to "it is done". It changes the number of steps, the fields, the order of information, the states and the copy. It does not fix a product nobody wants, delivery to a country you do not ship to, or a landing page that promises something the product page does not deliver. If people leave on the product page, the checkout is not the problem.

I check this in 1 afternoon before agreeing to any redesign. If 80% of visitors leave before adding anything to the cart, we talk about the product page first. If they add to cart and then leave in the checkout, we have a flow problem, and those are the ones a designer can fix in weeks.

How to find where the checkout leaks

I use 4 sources, in this order, and they usually agree.

Step funnel
Cart viewed, checkout started, contact step, delivery or date step, payment step, confirmation. I want the share of visitors passing each step, split by phone and desktop. Most stores have the first and last number and nothing in between. Adding the events is 1 day of developer time.

Field level data
For the form steps I want to know which field is last touched before the visitor leaves, how many times each field produces a validation error, and how long each field takes. The phone number field and the discount code field are the usual winners. A discount code field alone sends 10 to 20% of visitors away to search for a code.

Session recordings
20 to 30 recordings of abandoned checkouts on a phone. The scroll up to find the total, the tap on a date that is not available, the keyboard covering the continue button. Funnel data cannot show any of this.

Support and chat
3 months of messages tagged by topic. "Where is my order", "the date I picked is not available", "the form did not send". Every repeated question is a screen that did not say what it needed to say.

Then I put the candidates in a table: visitors entering the step per month, percent lost, and value of 1 completion. The largest number is where we start. I explain the wider method in conversion rate optimization for digital products.

The 6 things that lose orders in an online store checkout

1. Forced account creation
Asking for a password before the order loses 20 to 30% of first time buyers. Guest checkout first, account offered on the confirmation page when there is an order to attach it to.

2. Fields nobody uses
Company name, second address line, phone number required for a digital product, title, fax. Every field costs 2 to 5% of completions on a phone. I keep the fields the payment provider and the courier need and remove the rest.

3. Surprises at the last step
Delivery fees, taxes and service charges that appear only on the payment page. The total must be visible from the first checkout step and must not change without a reason the visitor can see.

4. Payment methods the visitor does not use
Card only, in a market where people pay with a wallet, a local method or cash on delivery. This is a research question, and the answer differs by country.

5. Error states
A red message at the top of the page for a field at the bottom. A card declined message with no way forward. A session that expires while the visitor looks for their card.

6. Mobile keyboard and inputs
Number fields that open a text keyboard, a continue button under the keyboard, a date picker that needs 40 taps. Half of your checkouts happen on a phone, and most were designed on a laptop.

Booking flows and lead forms leak differently

A booking flow has 1 problem a store does not: availability. The visitor picks a date, a time, a room or a seat, and the answer might be no. The leak is usually in the date step, where the calendar shows 30 days and 24 of them are full, or where "not available" appears only after the visitor has filled in 6 fields. I design availability into the calendar itself, show the next 3 open slots when the chosen 1 is taken, and hold the selection for 10 minutes so the form can be filled without losing it.

A lead form on a service website, for a clinic, an agency, a school or a B2B service, leaks for the opposite reason. There is no product to look at, so the form has to carry all the trust. It leaks when it asks 9 questions before the person has a reason to answer, when the phone field is required, and when the confirmation page says "Thank you" and nothing else. I cut the form to 2 or 3 fields, say who will reply and within how many hours, and move the qualifying questions to the first call or a second step after the first submit.

The measurement differs too. For a booking flow the primary metric is date selected to booking confirmed. For a lead form it is form started to form sent, and then the share of leads the team accepted, because a shorter form that produces worse leads is not a win. I describe the mobile app version of this problem in mobile app onboarding drop off.

A 12 point first pass you can run yourself

Open your site on a phone, in a private window, and try to buy or book something with a real card. It takes 30 minutes.

Can you complete the purchase without creating an account?
How many fields are there in total, and how many does the payment provider or courier actually need?
Is the total, with delivery and fees, visible on the first checkout step?
Does the total change at any later step without an explanation?
Is there a discount code field, and does it send visitors away to search?
Can you see which step you are on?
Does the number keyboard open for number fields on a phone?
Is the continue button visible with the keyboard open?
What happens when you enter a wrong card number? Where does the error appear?
For booking: can you see availability before you pick a date?
For lead forms: does the confirmation say who will reply and when?
Have you watched 10 recordings of abandoned checkouts in the last 3 months?

If you answered no to 4 or more, the flow is worth a redesign, and questions 2 and 3 are usually where it starts.

What to measure before and after

1 primary metric per flow, set in week 1: checkout started to order confirmed, date selected to booking confirmed, or form started to form sent. This is the number the redesign is judged on.

Then 3 secondary metrics. Drop off per step, so we can see whether we moved the problem instead of removing it. Validation errors per completed order, which should fall clearly if the fields were the problem. Support messages tagged to the flow per week. For lead forms, the share of leads the team accepted.

We compare 30 days before with 30 days after on the same traffic mix. Stores with more than 20,000 checkouts a month can run a proper A/B test. Below that, a before and after comparison with a written baseline is enough to make the decision.

Where AI tools help and where they do not

They help with the volume. Tagging 3 months of support chats by topic in 1 hour. Drafting 40 error messages in the right tone. Producing a first pass of the field list from the payment provider documentation.

They do not help with the local decisions. An AI does not know that your customers expect cash on delivery, that your courier needs a landmark instead of a postcode, or that your booking system releases a slot after 5 minutes. It cannot watch a visitor tap a full date 3 times. Those are research findings, and they still come from data and sessions.

Mistakes I see in mobile app onboarding drop off

Testing button colours while 12 fields sit below them. The button is not the problem. The form is.

Designing on a laptop for a flow that happens on a phone. The keyboard, the date picker and the error position all behave differently, and the drop off is usually clearly higher on mobile.

Keeping fields because the data is "nice to have". Every field has a cost. If nobody reads the company name, remove it.

Making the discount code field prominent. It is a leak, not a feature. Collapse it behind a link.

Designing availability as an error. "This date is not available" after the form is filled is a dead end. Availability is information for the calendar, not a message for the end.

FAQ

What is a checkout flow redesign?
A redesign of the path from cart or date selection to confirmation, based on step data, field data, session recordings and a usability test. The output is a shorter flow with fewer fields, visible totals, designed error states and dev ready screens for phone and desktop.

How do I reduce cart abandonment with UX design?
Offer guest checkout, cut the fields to the ones the payment provider and courier need, show the full total from the first step, add the payment methods your market uses, and design the error states. In the stores I audit those 5 changes cover most of the drop off.

How long does a checkout redesign take?
2 to 3 weeks. Audit and baseline in days 1 to 4, wireframes by day 8, usability test with 5 real customers by day 12, dev ready screens by day 15. A lead form takes 2 weeks, a checkout with several payment methods takes 3.

What is a good checkout conversion rate?
Checkout started to order confirmed between 40 and 60% is typical for a store with a tuned flow, and 25 to 35% is common before a redesign. On mobile the rate is usually 10 to 15 points lower, and the gap is a design finding.

Should a booking flow show availability before the date is chosen?
Yes. Availability belongs in the calendar, not in an error message after the form. Showing the next 3 open slots when the chosen 1 is taken keeps a large share of the visitors who would otherwise leave.

How many fields should a lead form have?
2 or 3. Name, email or phone, and 1 question that lets the team reply well. Every extra field costs 2 to 5 percent of completions. Qualifying questions go to the first call or a second step after the first submit.

Working with us

We redesign checkout, booking and lead form flows for online stores, marketplaces, booking platforms and service websites. 1 flow takes 2 to 3 weeks: audit findings on day 4, wireframes tested with 5 real customers by day 12, dev ready Figma screens for phone and desktop by day 15. We work async in Figma, Slack and Loom, across timezones.

We also say when you do not need us. If the fix is guest checkout and 7 fewer fields, your developer can ship that this week and we can talk after you have measured it.

If people add to cart, pick a date or open the form and then disappear, and nobody can say why, send us the flow. Book a free 15 minute intro call and we will tell you what we see, even if your team fixes it themselves afterwards.