Native Checkout
A 3-step, one-screen iOS & Android checkout flow using bottom sheets to keep context while allowing complex data entry.
The problem
An underperforming checkout was due to a few key reasons: a web view was leading to high load times and a less integrated experience, and a 4-step checkout was leading to significant drop-off and poor conversion rates. We were seeing really problematic experiences via session replays in Contentsquare and underperforming metrics in Google Analytics.
What I did
- Competitor analysis to see how we were comparing to other retailers
- User journey mapped to identify key issues
- Full flow redesign
Process
Using competitor analysis we could start to see the gaps in our checkout compared to other retailers. One main problem was users couldn't compare and contrast pricing, delivery times and delivery speeds. Because we had a 4-step checkout process, users were having to flick back and forth through the funnel, which became annoying and ultimately led to them dropping off.
We could also see from previous usability tests the frustration of data entry, and the number of times customers were asked to add repeated information. Names and emails already previously entered weren't being carried through, and this led to a lot of friction in the funnel.
To map these frustrations we started adding findings to a user journey map so we could pinpoint exactly where things were going wrong. This allowed us to feed back to stakeholders the wider picture, the problems at the heart of it, and what exactly we should be focusing on.
We were aiming for two things: an easy-to-adopt checkout for new customers, and a one-click checkout for returning customers.
Page by page vs one page
We opted for a one-page design, sectioning areas into a scrollable checkout. It seems like a ubiquitous solution to checkout but it's still one we wanted to validate. We put a wireframe of page by page next to a one page design to see which one performed better, and we saw quite quickly that single page was the best. Especially for the compare and contrast use case that we saw so many of our customers doing.
Bottom sheets allowed us to condense information into specific pockets, adding an address look up or paying with Apple Pay. It really solved the main downfalls of page by page, by allowing us to cut up information.
View the designs
Outcome
Expected savings of around £9m after launch. We always knew this was going to be a key transformation piece, driving us into a more modern world of paying online.
3% conversion rate increase