E-commerce: CRO & Checkout Optimization
A forced login wall sat between the cart and the checkout. I removed it and shipped the replacement as an A/B test.
Summary
Analytics showed people leaving Grutto's checkout immediately after entering it. The first thing they met was a login and registration screen. I designed and built the email-first flow that replaced it, and ran it as an A/B test on live traffic.
The Challenge
Everyone was stopped by a login wall before giving an address or seeing a shipping cost.
Removing accounts was not an option: returning customers rely on saved details, and the order system expects a customer record.
My hypothesis: the password is the barrier, not the account. Ask for an email first, then decide what to request based on the answer.
The constraint
Analytics showed people leaving immediately after clicking through to checkout. The first thing they met was a login and registration screen, before they had given an address or seen a shipping cost. Removing accounts entirely was not an option: returning customers rely on saved details, and the order system expects a customer record.
My hypothesis: the password is the barrier, not the account. Ask for an email first, and decide what to request next based on the answer.
What I decided
I replaced the login wall with a single email field that routes on what the system already knows. Nobody is asked to remember a password until there is a reason to believe they have one.
Email first
One field. No choice between logging in and registering, because that choice is the shop's problem rather than the customer's.
Routing on the result
The address is checked against existing customers, and the flow branches on the answer.
- Recognised: then, and only then, a password is requested.
- Not recognised: straight to the address form with the email already filled in.
What I built
I designed the flow and wrote the React for it: the email step, the branch to password or address, the validation and error states on both paths, and a progress indicator across the five checkout stages.
The stepper: Cart, Details, Shipping, Payment, Confirmation. A checkout that now branches part way through needs to say where it is, or the branch reads as an error.
Error states: a wrong password on a recognised address and a rejected address on a new one are different problems, and they needed to fail differently.
How it was decided
The old flow was not replaced on my opinion. It ran against the new one as an A/B test on live traffic.
A, control: the existing login and register screen.
B, test: email first, then routing.
B won on progression to the shipping and payment stages, and it is the flow the shop runs today.
Where it stands
The email-first flow won its test and shipped permanently. It is what customers meet at grutto.com today.
The conversion numbers behind that decision are Grutto's data and I do not have permission to publish them. I would rather say that than put a percentage on this page that I cannot show you.