The checkout process is an important aspect of any e-commerce website. In this case study, I will explain how I revamped the checkout process to improve the sales and conversion rate of the users.

Project Brief

As a Senior Product Designer at LocktheDeal, I worked on a project involving the redesign of our existing B2B e-commerce website. LockTheDeal specializes in energy and electronic products, catering primarily to retailers and distributors. The main challenge we faced was the low conversion rates from the cart to order, which stood at around 15-20%.

Challenges

• Low conversion rate from cart to order (15-20%).
• A multi-pages checkout process causing visibility issues and a drop-off in the funnel.
• Lack of a quick overview of order details.
• Prominent display of payment method-related offers and cart-related offers.

Goal

Our primary goal was to decrease the funnel drop-off rate and create a smoother checkout process for our users.

Research: Uncovering the Problems

To address these challenges, I began with comprehensive research, analyzing analytics and user data provided by the client. I also conducted heuristic analysis and competitive analysis to understand checkout trends. Additionally, I engaged in multiple sessions with stakeholders to gather insights into user pain points related to the current checkout process.

Gathering Requirements for Redesign:

Based on my research and persona data, I identified specific requirements for the redesign, which included:

• Providing a clear cart summary throughout the checkout process.
• Ensuring visibility of offers for each payment method.
• Implementing a multi step process (not multi pages) with a progress indicator for better visibility of process state and enhance user experience.
• Incorporating trust elements throughout the checkout process to build user confidence.

Redesign Process:

To create a focused and distraction-free checkout process, I eliminated navigation menus and search bars from the header, adhering to e-commerce best practices. I also designed a process-specific footer with mandatory links and trust indicators to instil confidence in users.

The major step was transitioning to a one-page checkout, consolidating multiple pages into a streamlined flow. Users could now handle shipping, address, and order review all in one page. Payment options were also optimized based on user data, making it easier for users to proceed. Payment method-specific offers were highlighted directly on the payment tab.

For responsiveness, we adopted a mobile-first approach, ensuring a consistent experience across all screen resolutions. Each step was carefully managed to reduce clutter and provide users with clear navigation options.

Results:

The results of our redesign were exceptional. The funnel improvement led to a 35-40% increase in the cart-to-success ratio. Additionally, our page response time improved by 50%, as clutter and unnecessary code were eliminated. A cleaner interface and a well-organized checkout process allowed users to make decisions quickly, resulting in an enhanced user experience.

By removing distractions and implementing a one-page checkout, we successfully achieved our goals and provided our users with a smoother and more efficient checkout process.

Overall, the redesign demonstrated the importance of a user-centric approach and the value of removing clutter to enhance user experiences and improve conversion rates.