Unified Card System

A Revamp of PayPal's card management system through simplification of the navigation, key actions, and overall cognitive load.

Project Overview

Problem Statement

The PayPal card management system lacks cohesion across different card types, platforms, and account types, creating a fragmented user experience. Inconsistencies between web and mobile, as well as consumer and merchant accounts, complicate awareness, enrollment, activation and servicing. This disjointed experience affects ease of use and overall user satisfaction.

My Role

I collaborated with a team of designers to unify servicing and management experiences for PayPal's card offerings. I helped conduct research, created wireframes, and created high fidelity mockups. I also helped ensure consistency in overarching design, improving usability for both consumer and merchant accounts.

Project Goals

Create consistent card experiences that are adaptable and scalable to meet the needs of various product stakeholders across both current and future markets.
Refresh the UI to match PayPal's current design standards and best practices.
Implement new service features based on customer research, including card locking, copying card numbers, and automatic top-up for debit cards.

Design Process

01.

Define.

Design scalable, cohesive card experiences for diverse needs. Update UI to match PayPal standards. Adds features: lock card, copy number, auto top-up, based on market and customer insights.

02.

03.

04.

Empathize.

User maps

Empathy maps

User Journey map

User Interviews

Ideate.

User Flow

Information Architecture

Wireframes

UX variations

Prototype.

Visual Design

Design reviews

High fidelity Prototypes

A/B testing

05.

Test.

Usability Testing

Compliance Review

Dev Review

01. Define

User Research Process

1. Content Audit and Organization with In-Lab Card Sorting

Conduct a thorough review of existing content and structure it using in-lab card sorting exercises.

2. Unmoderated Task Testing/Baseline

Conduct unmoderated task-based testing to establish a usability.

3. In-Lab Qualitative Research

Conduct in-depth qualitative research in a controlled lab setting.

Insights

User Feedback from In-Lab Research:

Qualitative research sessions identified that users want a more customizable experience, especially when managing multiple cards. A majority of participants (80%) expressed a preference for being able to set personalized labels or nicknames for their cards, which helped them quickly distinguish between different accounts.

User Preferences for Card Organization:

The content audit and in-lab card sorting exercises revealed that users prefer a clean and intuitive card management interface. Grouping features like card activation, transaction history, and balance checks into distinct categories improved overall user navigation and reduced task completion time by 15%.

User Satisfaction

with PayPal UI

Key Insights

The survey showed 30% of users continuing to express their concerns about security and usability, further confirming the need for updated work on the PayPal credit card system.
Although 60% of people found the UI easy to navigate, we still saw results showing that 25% didn't enjoy their experience, and 15% found it difficult to use.
Feedback on card management shows 40% of users found it intuitive, but 35% experience confusion, highlighting the need for enhanced clarity in managing multiple cards.

02. Empathize

User Personas:

Using PayPal's existing research from user feedback and behavioral analysis, I developed detailed user personas to better understand the key pain points and goals users experience when managing their cards. This process allowed me to gain deeper insights into the challenges faced by users, helping to inform the design decisions needed to enhance the card management experience.

Mike and Linda's journey map highlighted frustration with card management and confusion during navigation. This helped pinpoint areas for improvement like simplifying the activation process. As a result, the design focused on resolving these pain points for smoother experience.

User Journey Maps:

The user journey maps highlight the experiences of two personas - an E-commerce business owner, and an owner of a small online book store - as they navigate the PayPal credit card management system. Both users faced unique challenges and emotional stages throughout their interactions, revealing key insights into areas for potential improvement.

To construct the User Journey Maps, each stage of the card management process was outlined using insights from user interviews. Each touchpoint was analyzed to identify pain points, user goals, and emotional responses.

03. Ideate

For the Ideation stage of my PayPal case study, I'm using insights gathered from user interviews and surveys to guide the brainstorming process. I generated solutions centered on usability and security. These findings highlight pain points and unmet needs within the current card management experience.

Information Architecture

I collaborated with a team of researchers to structure the Information Architecture and User Flow for PayPal's card management, focusing on card activation, virtual card creation, and card settings. The structure simplifies navigation and enhances usability by organizing features into intuitive sections.

Wireframes

During the wireframing process, we conducted a closed card sorting session with customers to validate the structure outlined in our brainstorming. We then iterated on initial designs based on insights from the card sorting session, ensuring a logical flow and intuitive navigation. The results then informed the final wireframes layout.

04-05. Prototyping Iterations & Testing

After brainstorming and card sorting, I defined initial content groups and UI changes but needed to validate them with visual prototypes and user feedback to refine the solution

Following the brainstorming session and card sorting research, I developed initial concepts for structuring the content, labels, and UI adjustments, but needed to confirm these ideas using visual prototypes and user feedback to refine the solution.

For my first attempt, I reduced the amount of information on the initial screen to minimize decision fatigue and improve scalability, grouping settings into a “card details” category. I prioritized testing the "lock card" feature to assess user interest and used a subtle icon to see if users would understand they could copy the card number.

I noticed the flow involved too many taps, resulting in a disjointed experience. While users responded positively to the Lock Card feature, some struggled with its discoverability. Many missed the option to copy the card number and had difficulty locating spending limits. Additionally, new users found the automatic top-up feature confusing, and the presentation of card details raised accessibility and security concerns.

The First Iteration

Based on insights from the previous session, I hypothesized that users would be comfortable with a nested flow for card details, while surfacing other settings on the main page. To improve scanability, I adjusted the typography and layout, grouping features into clearer sections.

Given the positive feedback, I prioritized Lock Card as a high-use feature and revised the automatic top-up content to aid first-time users. I also redesigned the copy card number interaction for better clarity.

This version tested better overall, with users scanning the page more effectively, but some groupings still needed refinement.
Users responded well to Lock Card, but conversations revealed that its placement was too prominent and didn’t fit logically with its group. The copy card number button worked well, but placing card details in a flow caused confusion and required simplification. Additionally, the “eye” icon placement led to tapping issues.
The new content for automatic top-up improved comprehension, though it still needed polishing. Spending limits remained hard to find, and the green color choice was unnecessary and not scalable globally.

Arriving at the Solution

At this stage, I surfaced as much information as possible and grouped features appropriately, refining the typography and icons to enhance scannability and scrollability. For card details, I implemented an accordion style, allowing information to stay hidden but easily accessible without leaving the page.

Previously, users were split between wanting their balance and limits upfront or finding it excessive. To address this, I aligned this content with the card on the landing page, distinguishing it from other features and reducing its visual prominence.

Balance and Limits

Checkout Information

Funding

Security

Cancel Card

Evolution of Entry Points:

In addition to reorganizing the feature architecture, several UI improvements were made to enhance the overall experience.

Grouping related features boosted comprehension, while adjustments to typography and content clarified hierarchy. Changing the icon colors to blue further improved clarity and modernized the design.

Card Copy Number:

The new feature concept emerged from brainstorming, informed by market analysis, customer spending data, and upcoming product requirements.

We noticed customers manually entering cash card details at merchants without a PayPal checkout option, so I aimed to support this behavior and empower our users.

I focused on designing an experience that was easy to use, maintained accessibility, and ensured card details remained hidden until the user was ready to view them for security purposes.

Results

New Feature: Lock Card

This feature emerged from a blend of market analysis and customer feedback. We noticed it in competing products and found that users often canceled misplaced cards only to reactivate them later, leading to frustration and unnecessary costs for PayPal.

The feature design was straightforward - a switch was ideal for an on/off function. To ensure clarity, I collaborated with the content designer to refine messaging based on user research. It was crucial to communicate what users could and couldn't do in a locked state, with messages appearing only when most relevant to keep the experience streamlined.

Lastly, I designed a new icon for lock card states that followed PayPal's UI guidelines while visually reinforcing the features status.

The Locked States

The Locked States:

Results & Summary

The redesigned settings for the PayPal consumer app were met with strong positive feedback during user testing, leading to a measurable increase in usability and customer satisfaction. The new Unified Card System (UCS) successfully launched in February 2020 and positioned PayPal to scale card products into multiple new markets. The implementation of the UCS has also enabled the development of new features and a prioritized card product launch, slated for Q4 2020, further highlighting its impact on PayPal’s strategic growth.