August 13, 2020

Cut time to complete checkout from 90s down to 20s

Eyal Toledano @eyal

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:

  • first name
  • last name
  • email
  • address
  • apt/suite
  • city
  • state/province
  • zip/postal code
  • country
  • credit card

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:

  • apt/suite
  • city
  • state/province
  • zip/postal code
  • country

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!

Eyal out

Today's Top Milestones
  • Happy moment - Got our first paid customer 🎉🎉
    As an indie hacker with 0% investment and 100% expertise, you would be able to empathize with why am I so happy. A few months ago, I started Micro Saa
  • $500 in sales after 2.5 months for TailwindCSS lib
    It took 2 months and 10 day after beta release of Zukoni UI library to reach $500 in sales. While that is not a significant number in terms of money b
  • Finished MVP
    After about 2 months I've finished building the MVP for textreel. I mainly worked on this in the evenings but managed to make pretty good progress. In
  • 🍾 First Response & Second Sale
    What a day, I got a response from my first customer in the meantime, second sale happened. I sold a bundle which includes both August and September da
  • $500+ this month
    Pandemic Times! Work from home! Having a micro mindset is important. I micro everything and offer some services to my customers doing Branding & Marke
  • Development started
    This isn't the exact date, but we started in May. The idea was around for a long time, but this time we decided that it worth trying to be a serious p
  • Let's start promotion
    I obviously won't do paid advertising with 0 users, but these are the things I came up with to get traction: - Medium articles about specific coding c
  • v0.9.0
    There were a lot of versions in between this and the MVP, so this is an aggregation of the changes: Huawei / non-GMS support - App is now fully compat
  • My first dollar on the Internet 💵
    This week I made my first dollar on the Internet without expecting it. I was writing an e-book about how to not waste your time on Twitter becaus I ha
  • 1 year in Here are the 10 most impactful things I've learned as a founder after 1 year runni