The Wally Shop Checkout Flow Redesigned

Description

While preparing to secure more orders on a monthly basis, the store's checkout flow was identified as a barrier to conversion and order processing. The first page in the process was dedicated to selling additional products, but was overwhelming to use. The checkout page lacked useful error handling, so our customers weren't being given any reasons why their orders wouldn't go through. Lastly, our team felt that condensing all of the checkout steps on one page was overwhelming to our customers. It was also unsightly, due to layout shift caused by interacting with features on the page.

To make the first page of the checkout flow less overwhelming, the number of additional products shown to the user was limited to a maximum of twelve. The products were also reorganized into a carousel to make room to show the customer's cart below. A call to action with a helpful tone was used to remind the customer to check for any forgotten or previously unviewed items. Lastly, Google Analytics event tracking was added to each product in the carousel to measure conversion when added to the cart. These changes reduced the likelihood of overwhelming our customers when they decide to add additional items to their cart and gave them another opportunity to review their cart before checking out.

To reduce the complexity and the layout shift on the checkout page, it was split into three separate pages. The first two pages were dedicated to shipping and payment, and the last page was dedicated to order review. A single column on each page allowed collapsible elements to continue to be used while reducing the awkwardness of the resulting layout shift. To further reduce layout shift and bundle size, shipping and payment forms were made into modals that could be lazy-loaded with React's Suspense package. Cookies were also leveraged to save customer-selected preferences to prevent completed parts of the checkout process from being reset.

Error handling was improved throughout the process by enforcing form-level and API-level data validation and sanitization on address, payment, and order submission forms. This change prevented erroneous data from ever reaching our database and also allowed us to display helpful messages to guide the customer through error resolution.