Would you pay first for your items and then proceed to provide the delivery details?
Traditional checkout flow of ‘fill-up-every-detail-first-and-then-pay’ has a few issues, mainly — by the time the customer-to-be reaches the final step, she is exhausted by the decisions she has had to take & fields she has had to fill.
The drop off rates stands testimony to that! Typically, most checkouts experience a 20–30% drop off during the checkout journey for each step. If you have a 3 step checkout (Sign-in/Email->Delivery Type -> Address -> Payment) you lose ~40% of your user by the time they reach the payment step.
Additionally, the driving force to complete the checkout — as the final hurdle between the customer & the products she is buying — dwindles substantially. This makes abandoned cart recovery very difficult, for early abandons.
Why get the Payment first?
Three reasons to make the payment first:
#1 — User is vested in completing the checkout
By getting the user to complete the payment first, a case can be made that the customer will want to ensure that their details are correct.
#2 — Abandoned cart recovery is much easier
Interested customers will always go through with the payment. The abandoned cart is no longer ‘abandoned’, but is incomplete for the shipping details. With money in the bank, it is a lot easier to capture the remaining information from the customer.
#3 — Shorter checkout journey
Even for complicated delivery requirements, the customer might feel that their checkout journey is shorter — as the biggest hurdle has been completed first.
How does it look?
It is a little complicated how the UI will look, but below are some indicative wires and flows.
High-Level Flow
By merging the Sign In/Guest & Delivery Type selection, we can jump straight to the Payment step. Following the success of that step, I imagine that the subsequent steps will easier to convert.
Note: These wires are inspired/reassembled from the great work done by Aycan Doganlar at Figma Resources. You can find the original Figma file here.
Here are some wireframes to ideate how that checkout will look for a home delivery experience:
Below are some explanations:
Step 1: Sign In/Guest
Step 2: Payment Details
Step 3: Delivery Details
Final Step: Order Confirmation
Trade-offs & Caveats
As always, there are a few trade-offs & caveats:
- Inherent issues in your checkout, like complicated fields demanded by CRM/Loyalty programs, will affect the conversion.
- Payment modifiers such as gift cards, coupons & reward points need to be either incorporated within the payment step OR completed before the checkout starts.
- If your delivery selection is picky (charges change by location), it will impact this flow. Though it is not difficult, order modification after payment will be a tough sell. Flat rates work the best.
- This entire flow requires heavy A/B testing — though I reckon that logged users will convert better on this flow.
- Other than the learning curve associated with this checkout, there is a trust issue at play here — customers cannot simply give money without seeing proof of delivery timelines. It falls on copy to create the right trust and assurances to the customer.
- Get ready for customer support teams to blow up if your payment recon isn’t solid. Separate Auth & Settle to ensure that it is easy for the customers to bail out.
- The definition of a completed order now changes — earlier orders were assumed complete if the payment went through. Now, you’ll have to hold the order in the e-commerce platform till the delivery details are not acquired.
I expect the drop-offs & abandon recovery graphs to follow this flow:
The Road Ahead…
Checkout flows have been analyzed and over-simplified for many use-cases, but each brand has a unique set of problems to overcome before they can provide a simple flow. It falls on the Product Designers/Managers to iterate as often and as quickly as possible, sometimes re-imagining the wheel, as we’ve done today.
After all, if this is successful, you’d have shaken up an ancient flow, set in stone from the early days of e-commerce itself. Innovate!
Thank you for reading. Please let me know if you have tried this flow before! I would love to hear your thoughts/experiences.