Designing for E-Commerce: The Checkout Experience

A majority of e-commerce research focuses on the checkout experience because it is the final step in securing a sale. Research specialists, such as the Baymard Institute, have narrowed down the ideal checkout experience into three main design formats: one-page checkouts, accordion style checkouts, and traditional linear multi-step checkouts. This blog will give a brief overview of each design.

One Page Checkouts
One page checkouts typically display the address and credit card details and may depend on whether the user is a returning customer with previously saved information. It is extremely efficient and can increase the possibility of a user completing a sale, although it does not necessarily perform better than other checkout designs.

old navy

Accordion Style Checkouts
Accordion style checkouts have increased in popularity this year and are classified by a process of expanding and collapsing steps as the user enters checkout information. While it is a single page, studies show that most users experience an accordion style checkout as a multi-step process. One risk with the multiple-step perception is that a user may hit the back button rather than the edit box to revise information on a previously-completed step, sending the user back to the beginning of the checkout process and increasing the possibility of a user abandoning their cart.

This is an example of an accordion style checkout from Apple:


Multi-Step Checkouts
A multi-step checkout is a process in which the user submits information in multiple steps, usually across separate pages. One of the main risks of a multiple-step checkout is the possibility of the process becoming non-linear, (when the steps of the process fall out of order) which is confusing and frustrating to customers. This mainly happens when there are steps within steps, such as requiring a user to login during the checkout process, but can be prevented by never directing the customer towards a step that was shown previously. Showing the user which step they are on in the process is especially important with this checkout design, as the process extends over separate pages. This process for Target exemplifies the multi-step checkout:


Overall, the steps a user is asked to take during the checkout process will determine the quality of the user experience. Many users are familiar with a few standard steps within the checkout process- requiring more than the norm or complicating the process can cause a user to abandon their shopping cart. A good checkout experience may mean a return customer.

The checkout process is the final step in completing a sale for your website. For this reason, the design should be minimal; remove any distractions or links from the sidebar area to keep your customer focused on the checkout process. This process should also give indicators of progress to let the customer know where they are and how many steps there are to complete the sale. If a customer does not know how many steps are left within the checkout process, they may be more likely to abandon their cart. Indicators can be as simple as a progress bar or chevrons on the top of the page.

Determining which checkout process is best for your company may depend upon your industry, audience and company goals.

This entry was posted in Customer Experience, Technology and tagged , . Bookmark the permalink.