Optimizing the Checkout Flow

Overview

Challenge:
The checkout page suffered from a high drop-off rate due to a cluttered layout, confusing payment options, and an overall disjointed flow. These factors led to poor conversion rates and frustrated users, as indicated by user feedback and analytics.

My Role:
As the UX design lead, I spearheaded the redesign of Obilet's one-page checkout process, guiding the project from concept to launch. I collaborated closely with cross-functional teams including product management, development, and business stakeholders, ensuring that user experience improvements aligned seamlessly with business objectives and technical limitations. My focus was on streamlining complex payment integrations to reduce friction and boost usability.

Impact:
Improving the old checkout process was crucial for enhancing UX and business results. The design caused high drop-off rates and friction during checkout, leading to lost revenue. By optimizing the process, the goal was to boost conversions, reduce cart abandonment, and create a smoother user experience.

Client
Obilet

Year
2024

Defining the problem

Challenge:
The checkout page, though functional, had several UX issues that hurt conversion rates. Disorganized content on the layout and the complexity of integrating various payment options made the user journey more difficult

Role:
I led the redesign of Obilet’s one-page checkout process, overseeing the entire UX design from ideation to implementation. Collaborating with management, developers, and product managers, I aligned the user experience with business goals while integrating technical constraints and multiple payment options. Despite challenges with a busy interface, we streamlined the checkout to improve both conversion rates and user experience, resulting in a more user-friendly, conversion-focused process.

Impact:
Improving the old checkout process was crucial for enhancing UX and business results. The design caused high drop-off rates and friction during checkout, leading to lost revenue. By optimizing the process, the goal was to boost conversions, reduce cart abandonment, and create a smoother user experience.

Client
Obilet

Year
2024

Understanding the user

Based on a heuristic review and direct user feedback, several key issues have been identified in the checkout process. Below is a summary of these issues, the corresponding usability heuristics violated, and their impacts on users:

  1. Distractions in the Header

    • Heuristic Violated: Recognition rather than recall

    • Impact on Users: Non-essential links distract users during checkout, leading to unintended navigation away from the funnel. Users expressed frustration at losing focus, causing them to abandon the purchase.

  2. Absence of Crucial Information on the Page

    • Heuristic Violated: Help and documentation

    • Impact on Users: Users struggle to find critical information (e.g., price details, currency converter), leading to uncertainty and premature exits from the process.

  3. Disorganized Three-Column Layout

    • Heuristic Violated: Aesthetic and minimalist design

    • Impact on Users: A cluttered layout with information in an illogical sequence confuses users, causing decision fatigue and disrupting the checkout flow.

  4. Disappearance of CTA Button During Scroll

    • Heuristic Violated: Visibility of system status

    • Impact on Users: When the "Complete Purchase" button disappears as users scroll, it increases cognitive load and irritates users, significantly disrupting the checkout flow.

  5. Inadequately Displayed Payment Options

    • Heuristic Violated: Visibility of system status

    • Impact on Users: Hiding preferred installment payment options behind a dropdown limits discoverability, causing unnecessary friction and reducing users' ability to choose suitable payment methods.

  6. Excessive Requirement of Personal Information

    • Heuristic Violated: User control and freedom

    • Impact on Users: Requiring excessive personal information feels invasive, adding interaction costs and leading to higher abandonment rates as users seek a more streamlined experience.

  7. Upsell Popup Interrupting Purchase Completion

    • Heuristic Violated: Consistency and standards

    • Impact on Users: The appearance of an upsell popup after clicking "Complete Purchase" breaks user expectations, leading to frustration and increased abandonment rates due to the desire for a smoother process.

What do you do?

Take a minute to write an introduction that is short, sweet, and to the point. If you sell something, use this space to describe it in detail and tell us why we should make a purchase. Tap into your creativity. You’ve got this.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

"Adri is so patient and thoughtful. She helped me highlight my work in a way that makes me so proud of my unique approach to design."

— Collette Noll