We removed 4 fields from checkout. What we actually tested (and what failed)
Contents
Some months ago my team got the classic request: "checkout conversion is low, make it better". Very clear, thank you. I want to share what we did, because the result was good but not for the reasons people think, and one of our ideas failed completely.
Context: we are a mid size e-commerce in Brazil, home goods, and most of the traffic is mobile (around 80%). Checkout was one long page with 14 fields.
First we make a research, not a redesign
Before touching Figma I watched 40 session recordings of people who abandoned in checkout and did 6 remote interviews with recent customers. Recordings are boring but they show things analytics never show you. For example we saw many people typing the CEP (our postal code) and then typing the full address again by hand, because they did not notice we auto fill it. The filled fields appeared above the keyboard, out of view.
What we changed
- CEP first, alone on the screen. After you type it we show the address already filled, in a card, with "is this correct?" and an edit button. People only type the house number and complemento.
- Removed "confirm e-mail". Nobody types it, everybody pastes it. If the e-mail is wrong it is wrong twice.
- One field for full name instead of first and last. Brazilian names don't fit in two boxes, people with 4 surnames were suffering.
- Guest checkout by default, and account creation after the payment with one tap ("save your data for next time").
The idea that failed
We tried to hide the CPF field (tax id, we need it for the invoice) until the last step, thinking the form would feel lighter. It was worse. People reached the end, saw a field asking for a document number, and many left to go look for it. When we moved it to the first step with a short explanation of why we need it, completion went up again. Lesson: don't surprise people at the end with the hardest question.
Result
After 4 weeks of A/B test, completion from "start checkout" to "paid" went from 41% to 49% on mobile. Desktop almost no change, which make sense because the keyboard problem don't exist there.
The biggest win was the CEP screen, not the removed fields. Removing fields is easy to propose in a meeting, but the real problem was a field people did not see. You only find this watching real people, so please watch the recordings. I know they are boring. Put some music
Written by
Mariana Costa
Product designer in São Paulo, working on e-commerce checkout. I like design systems, accessibility and talk with real users. Figma all day, but I still write some CSS when nobody is watching.
Get the best of #figma_fatigue weekly
One email each Monday with the most useful posts. No spam; unsubscribe in one click.
Comments
Sign in to join the conversation.
Sign in to comment