Checkout is the highest revenue creator for PayPal, with a market share of over 50% in the online payment processing arena.
The PayPal checkout experience had grown cluttered over time, making it difficult for consumers to understand all the capabilities offered. The goal of this project was to redesign the information architecture and navigation to make it easier for consumers to find the right payment method and make PayPal features transparent.
I aimed to deliver a set of updated product principles that could be used for maintaining and scaling the checkout experience while maintaining our 80% conversion rate.
A carousel design provides customers with access to their wallet while they have visibility of the benefits they can use under each card. The design solves for simplicity of use, and shows information in the context of the selected payment method.
Customers should have clear visibility of the features, advantages and rewards they will get by using PayPal. From analytics and in-person testing and interviews we found that customers care about:
I was tasked with leading the information architecture efforts for our project. To do that, first I helped my team to understand what was the relationship between all the features that form checkout and our business logic, to then ideate together different framework models. These respond to two possible mind models: "I want to pay my way" or "I want to use this card"
A lot of exploratory design was made for "I want to pay my way". The challenge was to fit about 30 features and legally binding content into a mobile-optimized solution. I identified the most critical use cases and each of the designers involved (myself included), created their own concept.
My role was to run critiques and help the team decide on the best ideas and interactions, to orchestrate one ideal design, and coordinate with design systems to leverage their latest patterns and a recently launched color palette. We all were working hand-in-hand with the legal and content teams to make sure what we proposed was concise and feasible.
As iterations were tested in usability reviews, I learned that people swiped and tapped on the cards to select them. Both interactions were accounted for during the implementation. Most participants commented on how streamlined was the information, and were able to draw relationships between applied rewards against a total, and use links to perform less frequent tasks like changing a shipping address or see their profile.
To design the concept for "I want to use this card" the focus was on cleaning up the existing experience using progressive disclosure to show the right information at the right time. This design leveraged the content and bottom sheet patterns from the carousel design.
When we tested these designs on usability sessions, most participants were able to access information using links, and complete a hypothetical purchase without difficulty.
A new feature explored for the new checkout was the ability to split purchases between different cards. My explorations and final outcome were heavily focused on perfecting the interaction, in a way that every click and transition helped the customer understand the next step.
The team decided to build the carousel design, and do the cleanup of our inline design and test both live. The carousel design showed a reduction in transaction time, and conversion rate. The inline design showed closely competing results.
In 2020, the "Pay my way" (carousel) design was introduced and it remained active for a year. In 2021, additional teams incorporated features such as Pay with Crypto. However, the intended transfer of two more APIs to this system was not finished and ultimately led to the discontinuation of the new checkout.
The “Use this card” (inline) design was left in its place. There were still benefits: The novel explorations served as playground and influence for the design that still remains. Customers enjoy a more efficient and simplified experience.
A push for innovation
The carousel checkout design pushed the boundaries of what we believed was possible to do.
Reduced mental load
Both designs, carousel and inline greatly reduced the mental load associated with understanding transactions.
Influence on PayPal
This design served as a model to follow for its use of progressive disclosure and emphasis on brief content.
