Tailoring a modern checkout experience

Reducing order abandonment, boosting average cart value, and unveiling new revenue opportunities

2020 -> 2022

Remote

Payment Team

6-8 members

Product Design

Design system

3 initiatives

Recover the payment

Context

One of the objectives of the Payment team was to reduce the percentage of abandoned orders during the purchasing process. After an analysis by the product manager, a high-potential opportunity was identified: orders abandoned after a payment attempt.

This was the most advanced point in the e-commerce funnel; at this stage, the user had shown a high purchase intention, and the return for the business was undeniable.

One of the objectives of the Payment team was to reduce the percentage of abandoned orders during the purchasing process. After an analysis by the product manager, a high-potential opportunity was identified: orders abandoned after a payment attempt.

This was the most advanced point in the e-commerce funnel; at this stage, the user had shown a high purchase intention, and the return for the business was undeniable.

One of the objectives of the Payment team was to reduce the percentage of abandoned orders during the purchasing process. After an analysis by the product manager, a high-potential opportunity was identified: orders abandoned after a payment attempt.

This was the most advanced point in the e-commerce funnel; at this stage, the user had shown a high purchase intention, and the return for the business was undeniable.

One of the objectives of the Payment team was to reduce the percentage of abandoned orders during the purchasing process. After an analysis by the product manager, a high-potential opportunity was identified: orders abandoned after a payment attempt.

This was the most advanced point in the e-commerce funnel; at this stage, the user had shown a high purchase intention, and the return for the business was undeniable.

Challenge

The challenges of this initiative were clear:

  • We needed to allow the user a new opportunity to attempt the payment immediately after it had failed, providing clear communication, options, and guidelines for retrying the payment.

  • Additionally, we needed to enable the recovery of an abandoned order after a failed payment attempt from the user panel.

Process

First, we started researching; we needed to thoroughly understand the various payment methods, their flows, which ones were failing the most, and why.

During this process, I created two tools in Figma that were key to facilitating collaboration among back-end developers, front-end developers, business intelligence, the product manager, and design (me) by providing a visual framework that made discussions very intuitive.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

The main reasons for payment failures were two-factor authentication by the user, a card with a spending limit applied, and technical synchronization issues.

Solution

After the research and several feedback loops with the team, I created the necessary hand-off to implement the screens, strictly applying the components from our Design System at that time:

  • Retry Payment, a distraction-free page to immediately retry the payment after it fails or select an alternative payment method.

  • The error messages were specific to the problem, providing the user with a single directive needed to successfully make the payment, such as indicating that a card had reached its spending limit.

  • Pending Payment, a new user flow that allows recovering an order from the user’s profile up to 3 days after the first purchase attempt.

After the research and several feedback loops with the team, I created the necessary hand-off to implement the screens, strictly applying the components from our Design System at that time:

  • Retry Payment, a distraction-free page to immediately retry the payment after it fails or select an alternative payment method.

  • The error messages were specific to the problem, providing the user with a single directive needed to successfully make the payment, such as indicating that a card had reached its spending limit.

  • Pending Payment, a new user flow that allows recovering an order from the user’s profile up to 3 days after the first purchase attempt.

After the research and several feedback loops with the team, I created the necessary hand-off to implement the screens, strictly applying the components from our Design System at that time:

  • Retry Payment, a distraction-free page to immediately retry the payment after it fails or select an alternative payment method.

  • The error messages were specific to the problem, providing the user with a single directive needed to successfully make the payment, such as indicating that a card had reached its spending limit.

  • Pending Payment, a new user flow that allows recovering an order from the user’s profile up to 3 days after the first purchase attempt.

After the research and several feedback loops with the team, I created the necessary hand-off to implement the screens, strictly applying the components from our Design System at that time:

  • Retry Payment, a distraction-free page to immediately retry the payment after it fails or select an alternative payment method.

  • The error messages were specific to the problem, providing the user with a single directive needed to successfully make the payment, such as indicating that a card had reached its spending limit.

  • Pending Payment, a new user flow that allows recovering an order from the user’s profile up to 3 days after the first purchase attempt.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Cart Redesign

Context

The shopping cart in an e-commerce site is crucial for users to review and confirm their selected products before payment. The front-end was outdated, making maintenance and updates difficult. Additionally, inconsistencies, lack of spacing, and poor readability complicated the user experience.

Challenge

The goal of this project was to not only revamp the look and feel of the cart page, but also establish a foundation for a strategic revenue boost. We aimed to make a refresh migrating to a more modern and agile front-end framework while establishing a foundation for clearer visualization of the services available for each product. This enhanced visibility would pave the way for future upselling and cross-selling opportunities.

Process

Executed primarily by a front-end developer and myself as the product designer, with the support and supervision of our product manager and feedback from various team members. I worked closely with the front-end developer in a 1:1 collaboration. We completed the project over a month.

Solution

We redesigned this step of the payment process using a component-based approach, aiming for better collaboration between design and engineering. We thoroughly defined all possible permutations, focusing on improving the product cards by changing the layout and providing more space for cross-selling opportunities. Components related to products were encapsulated with a border for better visual distinction.

Then, we implemented a roll-out strategy defined by our product manager, gradually deploying to 5%, 10%, 50%, and 100% of users that took approximately another month. Over that period, I intensively participated in the testing to ensure a smooth process, look at the metrics and feedback from users and stakeholders and iterated over many details that enhanced the user experience.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

List of payment options

Context

Choosing the payment method is one of the most critical moments in any checkout process and is a major cause of abandonment (in our case, it was the second most abandoned step).

Challenge

Our team hypothesized that several potential growth payment methods were being overlooked because they were hidden under tabs grouping the payment options. Specifically, we believed that Bizum could see greater usage among our users. This represented a business opportunity as this payment method has a lower cost for the e-commerce.

Process

We conducted several tests to validate our hypothesis, including a preference test showing a Figma prototype with a new organization of payment methods, and an A/B test on the production version, changing the UX writing, conducted by our product manager without the development team’s intervention.

Connect to Content

Add layers or components to swipe between.

Solution

We opted for a list format instead of tabs for selecting the payment method, which increased awareness of the available payment methods and boosted the use of other methods like Bizum, which are more profitable for the business.

The design was mostly created during the validate phase of the initiative, requiring only refinements on the interaction and the creation of a deliverable for development that considered all permutations to launch it in production.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Last updated July 10th

designed and built by Roberto RG