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
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.
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
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.
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.
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.
Last updated July 10th
designed and built by Roberto RG