Oh boy, Batch retailers are in for a treat next production deployment!
The average checkout flow takes about 60-90 seconds to complete. Due to the nature of our product and interacting with both full price items and discounted purchases (offers), the need to surface more information dramatically increased the time needed to complete a checkout, which in ecommerce is the kiss of death.
By far, the biggest drop-off for us was the checkout form itself, not the Batch UX. Offers were selected in droves, but the checkout was not being completed at a high enough rate, despite users not having to pay anything to place an offer.
The previous iteration contained several form fields:
Good God. Ten form fields (including the CC field).
While all of these are required, and most checkout flows simply deal with this issue, we decided to experiment with ways to abstract information non-critical to the user, and otherwise automating data entry where possible to reduce the number of actually required form fills for the checkout to be possible.
The first change was to combine the first and last name fields. Whenever the text field is filled, I cut up the name into an array (in case there are middle names), assign the last element to the last name and everything else before it as the first name. Works wonderfully.
The next change was to abstract all secondary address fields, namely:
That would represent a super meaningful 50% reduction in the number of fields to fill, but they are still needed, so how to abstract them?
For this, we reached for Google Maps' autocomplete. There are a few libraries around. This allows us to capture as few as 3 keystrokes into the address field, propose possible addresses, and automatically fill in all of the other address fields based on the clicked address.
The second part of this task was designing an abstraction for the secondary address fields. They start off hidden (though their values are still committed to the state so they can be sent over to the payment process.
When the Google autocomplete is filled in, the found address is clearly returned to the shopper as a new UI element so they can validate their selection. An 'Edit' button hides the that UI element and makes the form fields visible again, enabling anyone having selected a wrong or incorrect address to modify their selection.
The last change was to fully remove an initial summary screen between the offer selection and the checkout flow. Since that information is already reflected in the final confirmation screen, it made sense to simply remove it.
All said and done, these product changes enabled us to trim the time it takes to complete a checkout from an average of 90 seconds down to less than 20 seconds, a 450% improvement that both shoppers and merchants will benefit from.
And it's going live today for all Batch merchants!