Checkout Flow

Problem

The existing checkout process at Mojocare, while functional, has several pain points that hinder a smooth user experience. Users find it cumbersome, which leads to cart abandonment and lower conversion rates. Our objective was to identify these issues and redesign the checkout flow to make it more user-friendly and efficient.

Research

To understand the challenges faced by our users, we conducted comprehensive user research, including:

1. We interviewed users who had recently completed a purchase or abandoned their carts to gather qualitative insights into their experiences.

2. We conducted usability tests with a diverse group of users to observe how they navigated the current checkout process and identify specific pain points.

3. We analysed user behaviour data from our website to identify common drop-off points and friction areas within the checkout flow.

Current Checkout Flow Screen

The current screen where drop-off occurs include the following elements:

1. Product details with the option to adjust quantity.

2. Section to add the shipping address.

3. Sections for payment method and price details/coupons, which are collapsed by default.

4. A prominent "Place Order" button.

Identified Pain Points

Add address section

1. The current design does not effectively guide the user through the checkout process. The collapsed sections may cause confusion about the steps required to complete the purchase.

2. The "Add Address" button is not immediately intuitive. Users do not realize they need to click it to proceed, leading to drop-offs. (Only 10% users fill the address before clicking "Proceed to pay")

3. The "Place order" button is prominently placed but may not be actionable until all required information is filled, potentially causing frustration.

Payment Sections

There are multiple payment online payment options for users which provides them choice overdose of choosing which parter to choose for payment. This results in less people opting prepaid option.

Proposed Solution

1. Use of step-by-step indicator to show the progress of the checkout process instead of cluttering all the information in a single page.

2. Ensure that address form is placed before "Proceed to Pay".

3. Implement a multi step checkout process to provide clear guidance and improved user experience.

   1. Cart: Review items and adjust quantities

   2. Address: Enter and confirm shipping address

   3. Payment: Complete the payment using the most reliable method.

   
   

Output

By addressing the identified pain points and implementing the proposed solutions, we successfully restructured the checkout flow into distinct, intuitive steps. As a result, the conversion rate increased by 55%, indicating a significant improvement in user experience and satisfaction. This enhancement not only reduced drop-offs but also streamlined the purchasing process, contributing to higher revenue and reinforcing our commitment to delivering a seamless and efficient shopping experience for our customers.