The design of your checkout page determines the ease and probability with which customers succeed to convert. Recently, Amazon.com underwent a noteworthy checkout page redesign. As one of the world's largest online retailers, Amazon has accumulated valuable knowledge about their customers' conversions. This post gives you an in-depth look at its before and after checkout page, as well as expert tips to use for your own redesign.
Elements of a Checkout Page
All elements of a checkout page should encourage, inform, and guide a visitor towards conversion. For Amazon, and many other websites, the sections of a checkout page usually include:
The header lets you know where you are in the process of placing your order. Although a customer can always use the back button, Amazon's header design focuses the customer on moving forward and advancing with his/her purchase.
The order total is in a bold, red font. This is the largest and most prominent text on the page.
Once you arrive to the checkout page, common viewing behavior denotes the last action before placing the order to be reviewing the order total. Positioning the box on the right side fits with one of the fundamentals of visitor behavior which is the Top-to-Bottom, Left-to-Right direction of reading a page.
Just like the shopping cart, the checkout page has full item details. It is always good to reassure your customers of what they are buying on the checkout page as well, so they do not feel the need to navigate backwards to check.
- Images: Use images to visualize the product your customer would like to buy. Keeping a solid image of what the customer is purchasing helps.
- Quantity: Note the quantity for each item, and provide customers the option of changing it according to their needs.
Delivery methods & shipping costs
Include the estimated time of delivery, when applicable. In addition, make shipping costs as clear as possible (PayPal Research) - Amazon adds this right after the order subtotal.
The call-to-action button
The bold writing and bordering give the famous Amazon call-to-action button a prominent presence on the page. To avoid the need to utilize the scroll bar, they have provided another call-to-action located on the bottom of the page.
Again, the page does not give visitors the option to get cold feet about their purchases, it reassures them.
The Before and After
- The call-to-action button was previously located outside of the Order Summary frame, making it not as easy to actually place an order.
- Bulk option to change quantities/remove products as opposed to providing quantity options for each individual product.
- Gift options are no longer in bold.
- Inclusion of product images "an absolute must!"
- Buttons were changed to links for the ability to modify customer selections throughout the page.
- Smarter use of white space and page layout on the Order Review section of the page.
Amazon's checkout page redesign, not only benefits its own website, but also provides us with some good guidelines to keep in mind when designing our own checkout pages.
- Keep visitors focused and guided to placing an order by eliminating options to bounce away from the checkout process.
- Give visitors clear Order Details and Order Summary by using images and displaying highly visibility totals.
- Make customer order modifications easier by giving customers a clear options to modify their order.
- Optimize the purchase review layout to give the page a cleaner look & feel.
Remember, a website is a constant work in progress and our visitors always have something new to tell us about our web usability. When designing your web pages, it's okay to learn from the mistakes and solutions of others. Even the "big guys" need a little guidance every now and then.