Created with
Checkout Experience Case Study
Exploring how to increase conversions through opportunities to reduce cart abandonment in the e-commerce checkout experience.
Ecommerce
UX Design
Visual Design
Research
Hi-Fi UI
Problem
Although online shopping may seem quick and painless, businesses often experience abandoned shopping carts for numerous reasons. Many online shoppers may choose to back out of their purchases in what intitially seems like promising conversions when faced with a number of factors that deter them from moving forward with the checkout process.
Image Credit: Baymard Institute
In a 2022 study, Baymard Institute reported an average 69.99% cart abandonment rate. Although the study acknowledges cart abandonment may often occur when consumers are simply "window shopping" or comparing prices, some of the most common occurences of cart abandonment is due to high costs, wasted time, and untrustworthy sites.

Pain Points


Account creation is required. Many customers dislike the idea of creating yet another account for one simple purchase that will ultimately lead to spam emails.


Up-front costs (shipping, taxes, fees) not immediately visible. Cart abandonment is likely to happen when customers see unexpected extra costs of shipping, taxes, and more after starting the checkout process.


Checkout process was too long. A common drop-off point is when customers are unable to recognize how long the checkout process will be from the start and consider there to be too many steps to place an order.

There often seems to be too many unknown factors within the checkout experience, whether it be hidden fees or requirements to create a new account, that ultimately lead to cart abandonment by consumers.

Solution
Improve conversions by providing consumers a quick and trustworthy checkout process through immediate access to estimated costs and guest checkouts experiences.
User Flows
Generally, user flows for e-commerce sites remain consistent. For this case study, we will explore the checkout process through the following stages:


View Shopping Cart


Begin Checkout (Member vs. Guest)


Choose delivery method / shipping speeds


Select / provide payment method


Review Order

Wireframes
Two different types of checkout experiences were considered for this case study; one in which a progress bar is shown up top to indicate which stage of the checkout process the customer was in, and one in which all stages of the checkout process are shown within one page and expanded upon as each section is successfully completed.
Proposed Designs
Through the wireframing process, it was decided that the secondary method aforementioned would be the most efficient experiences for consumers.

CONSIDERATIONS:


Each stage of the checkout process is displayed up-front so that the consumer is visibly aware of upcoming actions; this would prevent the customer from going to the previous page to access previous steps and causing friction in the overall checkout process


Stages that are successfully completed are displayed with a green checkmark indicating previous steps were properly implemented


The order summary is shown in each stage so that the customer is aware of total costs at every step of the checkout process


Options to edit and go back to previous checkout stages are accessible in case the customer chooses to alter previously input information without having to "go back" and refresh older pages

The shopping cart allows customers to get a quick overview of what products are in their bag as well as have the ability to immediately edit size and quantity of each item as needed. An estimated cost is summarized on the side before consumers choose to proceed to the checkout process.
Consumers are provided the option to proceed with their checkout without already having an account with the store. By providing this option, customers do not feel restricted and forced into creating new accounts for a simple purchase. Only an email is required through the guest checkout experience to allow the entire process to continue seamlessly, without much unwarranted commitment.
Customers are led to their shipping options and are provided their order summary to the right of their screen. The consumer may edit the details of their order at any point by clicking the 'edit' button and are allowed to proceed to payment options after successfully inputting and selecting their shipping details.
In order to ensure the consumer is aware of all stages of the checkout process, previous accepted information is displayed with a green checkmark while future stages are greyed out until the proper requirements are met. Here in the payment stage, consumers are provided multiple options for form of payment and are ensured that their payments are secure through the acknowledged fields once completed.
Customers are provided a clear and final opportunity to review their order details from the previous information selected and provided in previous stages of the checkout process. No piece of information should feel unwarranted, and the customer should be able to confidently place their order with ease.
A common state users may experience while their purchases are being processed are loading states. Users should always be provided with visibility with what the system is doing in these occurrences. In these pockets of time between processes, users feel in control, are made aware of the context they are in, and are reassured the system is working properly.
An immediate confirmation order number will be provided to consumers along with the option to print receipts from placing the order. Customers may once again review that all formerly provided information is accurate and feel that their order has been accomplished successfully.