2022 ・UX design

Webex Website Checkout Revamp

Catalog

  • Solutions & Proposals

  • Data

  • Challenges

  • Result impact (prototypes)

  • Why

  • Business goal

  • Target audiences

Problem Statement

  • Checkout data diagram image

    11.6% of payment failure during checkout

    Users are stuck in the checkout process due ti an unknown payment failure.

  • Insufficient payment options

    Today we have 83% of users are using Windows. Those users can't use Apple Pay as an express payment option.

  • A long stairs

    Process too long

    Currently, there are 13-22 steps(clicks) before completing Webex’s checkout flow.

  • Scrolling a phone

    Unfriendly layout for scrolling

    With too many input fields in a task, users need to scroll up and down to review their inputed content.

“An ideal checkout flow can be as short as 12-14 form elements (7-8 if only counting the form filed).”

— Baymard Institute research team

Business goal

“We hope to reduce the checkout friction and raise the checkout conversion rate with a design that requests less engineering effort. It means we should maintain the backend architecture logic as much as possible.”

Target audiences

“While our primary focus is on individual users purchasing our service, it is important for us to also consider and prioritize the user experience (UX) of enterprise users. Since those users can also utilize this flow.”

Data Support

In addition to analyzing internal checkout flow data to identify current pain points, I conducted a comprehensive competitor analysis. This analysis served as valuable design support and provided useful references, allowing me to gain insights into the average users' expectations of online checkout experiences.

Solutions & Proposals

Add social sign-up option

01

Through the implementation of the social sign-up option, we can streamline the initial step, reducing the required clicks from 5 to 2. This is achieved by eliminating the need for first and last name inputs, email address inputs, and password creation inputs.

Display a single task request at a time

02

Currently, the process combines the 'create account' and 'billing address' steps into a single task, leading users to perceive a significant amount of input requirements. This approach also complicates the task of reviewing inputs for potential errors.

Add more third-party payment option

03

By expanding the payment options, I restructured the layout and components to enhance visibility and achieve a cleaner presentation.

Never ask for redundant info

04

With the inclusion of social sign-up and third-party payment options, there's no need to re-request information like name and billing address from users, unless they wish to use different details. In such instances, they can easily modify this information during or after the checkout process.

Challenges

during the process

Tech side:
Integrating a third-party payment method requires us to use their specific call-to-action (CTA) button, limiting our flexibility to design the checkout process with a single button that aligns with our user experience goals.

Different opinions from the leadership:

To implement my proposal, we require approvals from both the financial and legal teams. It involved extensive meetings and discussions to successfully convince them about the proposed changes, which required considerable time and effort.

Final Results

Through the new checkout flow, I successfully reduced the minimum process from 13 steps to just 5 steps, with a significant decrease in input fields from 9 to 1. To further enhance payment convenience and reduce friction, the team has made the decision to incorporate Google Pay as an additional payment method for our online users. With these improvements, we are aiming to increase the checkout conversion rate from the current 65% to an ambitious 80% following the release of this revamp.