Today, I took some time to capture couple of checkout flows that are known to be well AB-tested and optimized: 1800flowers.com and Vistaprint.com.
Here is the summary of my review.
- Flower and vase options are given first
- The overall checkout flow is reduced to five steps: Product Page -> Shopping Cart -> Sign-in or Continue as Guest -> Shipping -> Billing Info and Credit Card Info
- It is highly noticeable that the last page has probably two to three pages worth of form fields
- There are a lot of ‘free’ product offerings that kick off a checkout flow
- There are literally thousand paths for it to become a paid offering
- As you customize your product, you see more and more personalized / customized visual representation of recommended products
- Users are put through four ‘Add A Vase’ pages where the last one shows ‘Free Offers’. When you read the details, they are 30 day free trials that are actually available to anyone.
- The final step of order checkout flow has two CTA’s (Call-To-Action’s). The first one that is placed in the middle of the page allows you to check out the original, intended order. The second one that is placed at the bottom right corner of the page is actually for buying one more product that you never added to the cart. (If you don’t pay attention, it is very easy to accidentally add another product on your way out.)
- When you complete (or abandon) the checkout flow and come back to the home page, it gives you long list of personalized, customized product offerings. They are using something more secretive technical method than browser cookie; I deleted my cookie and went back and it somehow pinpointed me. (It was kind of disturbing, to be honest.) (I did a quick research and as a matter of fact, somebody tracked down the technique: http://tips.webdesign10.com/flash-cookies-privacy)
Screenshots of 1800flowers.com & Vistaprint Checkout Flows:
Other articles on checkout flows:
> Apple Store’s Checkout Form Redesign by LukeW: http://www.lukew.com/ff/entry.asp?968