Checkout the Amazon Way

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:

Amazon11 Checkout the Amazon Way

Amazon’s page header design encourages the customer to move forward and advance with his/her purchase.

Page Header

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.

Order Total

The order total is in a bold, red font. This is the largest and most prominent text on the page.

Amazon21 Checkout the Amazon Way

This is the largest and most prominent text on the page.

Order Review

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.

Amazon42 Checkout the Amazon Way

It is always good to reassure your customers of what they are buying on the checkout 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.

This includes:
• 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

Amazon52 Checkout the Amazon Way

The Before

• 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.

Amazon62 Checkout the Amazon Way

The After

Impressions

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.

About the Author

eliran profile small Checkout the Amazon WayEliran Mesika leads the Customer Experience Consulting group at ClickTale, focusing on business, user experience and conversion consultation. His portfolio includes Fortune 100 clients working on some of today’s leading websites. Eliran holds an Industrial Engineering & Management degree from the Technion.

Comments

comments