PayPal Checkout Framework

REDESIGN - MOBILE FIRST + WEB

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.

Role

I drove working sessions to understand the PayPal business logic, ideate different framework models, and converged in a final blueprint that organized all features together. I also guided other designers in their design explorations, and paired up with a content writer and a researcher to test variants of the redesign.

Show the right information at the right time

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.

Problem Space

The cluttered delivery of PayPal features and information obscures the opportunity to show the value of choice.

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:

PREVIOUS DESIGN: ABOVE AND BELOW THE FOLD

Discovery

Information architecture

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"

Working with mental models:

"I want to pay my way" (Carousel design)

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.

paypal checkout before

WORKING WITH 12 USE CASES AND 28 SUB-CASES
paypal checkout before

wallet with offers

foreign currency

Wallet w/ balance
desktop experience

Working with mental models:

"I want to use this card" (Inline design)

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.

wallet with offers
foreign currency
wallet with paypal balance

desktop experience

Split Tender

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.


Live experience


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.

RECAP

Impact

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.