PayPal
Improving consumers’ financial well-being
Overview
PayPal is a leading technology platform and digital payments company that helps consumers and merchants join and thrive in the global economy by enabling them to manage and move their money anywhere, anytime, and on any platform and device through simple and secure digital and mobile payments.
The Challenge
Understanding younger generations (i.e., Millennials and Gen Z) constitute the largest population and available workforce with many years left to live and work, PayPal wants to ensure these generations can properly manage their personal finances.
Objectives: Design a new personal finance management feature that embeds within PayPal’s current mobile application in iOS
Role: UX Researcher, UX/UI Designer, Interaction Designer
Duration: 2 weeks
Tools: Pencil + paper, Figma, Illustrator, Airtable, Trello, Mural, 850 Post-its + a Sharpie
This project and its content are used for educational purposes.
Design Process
01
Empathize
02
Define
03
Ideate
04
Prototype
05
Test
01
Empathize
I conducted research to learn more about the personal finance application and digital payments industries and their markets, competitors, and users.
PROCESS: 01 Plan research | 02 Conduct research | 03 Synthesize findings
01 Plan research
RESEARCH PLAN
To help direct my research efforts and what I wanted to learn, I created a Research Plan.
Research goals
Determine the customer’s goals, needs, motivations and frustrations regarding spending money
Determine the customer’s goals, needs, motivations and frustrations regarding saving money
Understand how customers generally manage their personal finances
Methodologies
Secondary: Market research, Competitive analysis, Provisional personas
Primary: Heuristics evaluation, User interviews
02 Conduct research
MARKET RESEARCH
I conducted market research to gain a broad understanding of personal finance application usage, the digital payments industry and market, and general demographic research for potential users of personal finance and payment applications.
Industry
MACROTRENDS
Payments are inevitably becoming instant, invisible and free (IIF)
AR enhances the reality of online shopping
There will be a growing volume of voice search
AI helps stores learn about shoppers
Insights are used to create individualized experiences
Big data helps create personalized experiences
Chatbots improve the shopping experience
Mobile shopping is still on the move
More ways to pay
Headless and API-driven e-commerce allow continued innovation
Customers respond to video
Subscriptions keep customers coming back
Sustainability is becoming more important
Businesses should optimize digital strategy for conversion
B2B is growing and changing
Online marketplaces
PAYMENTS
Globally, the top mobile payment platform is WeChat Pay
94% of Chinese users use mobile payments, while only 45% of Americans will
Americans favor PayPal over any other digital wallet (89% of the market)
Credit cards still reign as the primary payment method for larger online purchases
Mobile wallets are used 2X more often by Millennials and Gen Z than Gen X or Baby Boomers
Gen Z and Millennials report buying something more expensive than they were originally considering when financing was an option, at 41% and 44.12% respectively
ONLINE SHOPPING
Over 75% of people shop at least once a month online
The top three buying destinations: Amazon, branded e-commerce websites, and brick-and-mortar stores
Amazon is the leading mobile online shopping application
Convenience and price were top two reasons US consumers of all generations chose to buy an item on Amazon
Convenience, price, and free shipping were top 3 reasons US consumers across all generations chose to buy an item at a branded online store
43% of global shoppers research products online via social networks
Millennials and Gen Z spend the majority of their shopping dollars on products they find on Instagram and Snapchat
Despite historically suffering poor conversion rates due to customer frustration with checking out on a small screen, smartphones are driving m-commerce growth
In 2019, Statista estimated that by the end of 2021, 73% of e-commerce sales will occur on a mobile device.
Demographics
MILLENNIALS
As of 2020, Millennials are ages 24 - 39.
They spend more per year on:
Groceries
Gas
Restaurants
Their cellphone — Nearly all own a smartphone and comprise the highest usage
Hobbies, electronics, and clothing
They spend less than older generations on:
Television — correlating with the advent of online streaming services
Travel — which can be expensive and difficult to budget
Pharmacies
Furniture/building materials
PERSONAL FINANCE
Over the past five years, user activity on finance applications increased by 354%
Men use finance apps more than females
Across the funnel, females are more active
Females’ desire to engage in finance applications is higher than before
At 27.5% the engagement rate for iOS users is over 2x the rate for Android users (12.3%).
The majority (over 60%) in the US use finance apps for everyday banking and tasks (e.g., viewing account balances, budgeting and tracking expenses, paying bills and transferring money)
COMPETITIVE ANALYSIS
Because PayPal is a digital and mobile wallet, I had to understand how it is currently positioned amongst other digital payment providers.
However, PayPal wants to pivot its focus towards personal finance, so I also considered personal finance mobile apps as indirect competitors, which would help inform what PayPal could be in the future.
PROVISIONAL PERSONAS
Based on market research and competitor analysis, I selected provisional personas who may be PayPal mobile app users to help identify participants for user interviews where I would further explore them.
The Budget Conscious
Ages 25 - 40, tech-savvy, trying to make ends meet, trying to save, thrifty, has basic milestone saving goals
GOALS
Getting a good deal
Spending less than they earn
Meeting a savings goal
PAINS
Spending time to check balances often
Forgoing certain conveniences for the cheaper option
pending time to conduct research to ensure they are getting a good deal
The Planner
Ages 30 - 45; more cautious about providing personal data; has saving goals; has higher financial literacy; wants to understand how to manager overall financial wealth; tech-savvy
GOALS
Increasing overall net worth
Accessing financial information at any time
Meeting savings goals
PAINS
Assessing options to grow their wealth
Worrying about the security of personal data
Recovering from investment losses
HEURISTIC EVALUATION
In order to add a new feature to an existing mobile application, I conducted a Heuristic Evaluation to become familiar with the app’s current features and functions and evaluate its usability.
Evaluator: Floria Chan, UX Designer
Subject: PayPal Mobile App for iOS
Heuristics: 10 Usability Heuristics by Jakob Nielson
Total Number of Violations: 11
Visibility of System Status: 6
User Control & Freedom: 4
Error Prevention: 1
USER INTERVIEWS
To gather users’ perspectives, I conducted remote 1-on-1 interviews with six participants, who are PayPal users, to ask about their experiences with PayPal, spending and saving habits, and preferred payment methods.
Participants
Ages: 26- 35 (All Millennials)
Gender: 3 Male; 3 Female
Race: 3 Caucasian; 3 Asian
Occupation: 3 Working professionals; 1 part-time essential worker; 2 unemployed/student
Marital status: 4 Married; 2 Single
Dependents: None
Location: 5 Texas; 1 California
Key Findings
Asian participants use PayPal more regularly
Saving methods differed between participants in their 20s and 30s
Reactive saving: Participants in their 20s tend to spend what they need to first and then save whatever is leftover
Proactive saving: Participants in the 30s tend to save specific amounts before spending
Most participants had to know how much they normally spend in order to determine how much to save
03 Synthesize findings
After gathering interview observations, I needed to organize, analyze, and communicate my research findings.
EMPATHY MAP
I created an Empathy Map to extract user needs, motivations, frustrations, and goals regarding participants’ personal finance management methods and habits. With one observation per sticky note, I grouped (and regrouped) similar sticky notes into themes, distilled an insight from each of the most prominent themes, and extracted a need from each insight.
Below are the strongest insights and needs I decided to move forward with in my process.
Insights
Users value the security of their financial data
Users try to adhere to specific numbers
Younger users tend to use manual processes to track their expenses
Users follow rules they set for themselves to help them save money
Needs
Users need to understand how their financial data is being protected
Users need to know how to determine the amounts to save
Younger users need a way to easily view details for all their transactions
Users need to know which money-saving tactics will work for them
PERSONA
To communicate my research, build empathy with relevant stakeholders, and inform my design decisions, I encapsulated all my research findings into a persona.
Tiffany Lee
“If we can save, we do.”
THE BUDGET CONSCIOUS
Ages: 27
Race: Asian
Gender: Female
Location: Texas
Occupation: Career transition in the technology industry
Marital status: Married
Dependents: None
Goals
To be able to buy the things she wants
To still be able to enjoy some form of entertainment
To stick to the budget
Needs
To understand how her financial data is being protected
To know how to determine the amounts to save
To easily view details for all her transactions
To know which money-saving tactics will work for her
Frustrations
Not having enough money to cover bills
Encountering financial fraud
Actually spending more than anticipated
Motivations
To feel financially secure
To not have to work some day
To be able to afford the things she needs
02
Define
In this phase, I needed to frame the issues regarding personal finance management in different ways to facilitate ideation.
PROCESS: 01 Frame from user perspective | 02 Frame for problem solving
01 Frame from user perspective
POV STATEMENTS
I created point of view statements (POV) to frame the problem from the user’s point of view by structuring user insights and needs from my Empathy Map in the following format: User [need] because [insight].
The user needs to understand how his/her financial data is being protected because users value the security of their financial data.
The user needs to know how to determine the amounts to save because users try to adhere to specific numbers.
02 Frame for problem solving
HMW QUESTIONS
I thought of a How Might We (HMW) question for each POV statement to help frame the problem in a question that enables brainstorming for many solutions.
How might we help users feel more comfortable about the security of their financial data?
How might we help users determine the amounts in their budget?
How might we clearly convey all of a user’s financial transactions?
How might we help users determine which money-saving tactics will actually help them save money?
03
Ideate
After framing the issues into questions, I could begin to find the best solutions for them.
PROCESS: 01 Generate ideas | 02 Strategize | 03 Build information architecture | 04 Design for interaction | 05 Sketch
01 Generate ideas
INDIVIDUAL BRAINSTORMING
I started the ideation process brainstorming as many ideas as I could for each HMW question to explore the solution space and draw my own major themes.
Method
For each HMW question, I used Mindmapping for 2 rounds (3 mins each) and conducted Synthesis (1 min) afterwards to identify major themes.
HMW Question 4: How might we help users determine which money-saving tactics will actually help them save money?
GROUP BRAINSTORMING
To introduce diversity of thought (and potentially validate some of my own ideas), I conducted a group brainstorming session.
Method
For each HMW Question (each constitutes a Round), I conducted remote Brainwriting for 3 sub-rounds (3 mins each) at 3 different “stations” and Group Discussion (3 mins)
For each sub-round, participants brainstorm as many ideas/solutions as possible or (for subsequent sub-rounds) build on existing ideas at the new “station”
Group Discussion allows participants to share ideas and observations and make connections between ideas
Preparation
Coordinated 5 participants in 3 time zones to meet over Zoom for 1 hour
Created a MURAL BOARD with “stations”
Crafted RULES of facilitation to enable all participants to contribute ideas in an uninhibited environment
Participants Brainwriting during Round 2 to solve for HMW Question 2: How might we help users feel more comfortable about the security of their finance data?
02 Strategize
PRODUCT GOALS VENN DIAGRAM
To help define the product goals, I had to understand how goals of different stakeholders align and would impact my design decisions. First, I identified each stakeholder’s goals:
Business goals: I referenced the project brief.
User goals: I pulled the goals from the Persona.
Technical goals: I thought of goals developers may have regarding the app.
After plotting the goals in a Venn Diagram, I could see the aligned goals (in the middle) that would inform my design decisions for the remainder of the process.
PRODUCT FEATURE ROADMAP
After identifying the product goals, I needed to prioritize product features that would best address the project objectives, the HMW questions, and products goals.
The Process
01 Research features indirect competitors have
02 Identify how features address product goals
03 Determine effort required to implement features
04 Estimate feature’s effectiveness in meeting product goals, project objectives, and/or user motivations, frustrations, and needs
05 Prioritize features to identify which feature(s) to design first
The New Feature
Since PayPal is trying to enter a different (but related) market, I prioritized features that work closely together and would provide a foundation for future development of more personal finance features.
The new feature would be: A way users can easily and accurately categorize expenses to help them monitor their budget.
03 Build information architecture
APPLICATION MAP
After determining the new feature, I created PayPal’s Application Map to visualize how to integrate it into PayPals’s existing information architecture, considering its current navigation, hierarchy of screens, and content and feature groupings.
An excerpt of the higher level screens that involve the new feature in the information architecture
04 Design for interaction
To determine the new feature’s content placement and validate its integration into the existing information architecture, I thought about how users might find and interact with the new feature to accomplish major tasks.
UI REQUIREMENTS DOCUMENT
Based on the Application Map, I created a UI Requirements Document to document and communicate which screens, contents and functions are required for the new feature to complete the following task: To change the expense category for a gas station expense to Food.
TASK FLOWS
Mapping out the task flow helped me think about how users may find and interact with the new feature to accomplish the following task: To change the expense category for a gas station expense to Food.
USER FLOWS
To determine feature content placement and functionality that would assist users in making decisions and accomplishing their tasks, I mapped user flows for the Persona and a new customer, selecting their tasks and noting my assumptions about them before I began.
Persona
Task: Persona is a return customer who wants to evaluate whether to update the maximum on her Food Category
Assumptions:
Already set up the new feature for Food and Gas
Is only monitoring Food to see how the feature might help her understand how much she spends on food;
Has only used the feature for 2 weeks
Randomly selected maximum amount for Food
New Customer
Task: New customer wants to set up an expense category for Food
Assumptions:
Already connected all his bank and card accounts
Knows Food is a major budget category but does not know how much he normally spends
Food and grocery stores he goes to regularly
Remembers seeing something on the app about a new feature to track expenses
The persona’s user flow for the task described above
05 Sketch
Sketching helped me visualize the layout for new and existing screens, decide where to include content and product features, and apply information architecture.
LOW-FIDELITY SKETCHES
Using the UI Requirements Document, Task and User Flows, and Application Map as guides, I used printable wireframes to sketch all the screens the new feature may involve. All the while, I crosschecked the layouts with existing screens in the app and selected common patterns that best meet the product goals or Persona’s needs.
04
Prototype
I built a high-fidelity prototype of PayPal’s mobile app to test the new feature’s usability and its integration into the existing information architecture.
PROCESS: 01 Understand the brand | 02 Create high-fidelity wireframes | 03 Build prototype
01 Understand the brand
Firstly, to seamlessly integrate the new feature into PayPal’s existing mobile app, I needed to understand the brand to ensure consistent design. I browsed PayPal’s website and mobile app to identify its color palette and typography and grasp its overall style and tone.
UI KIT
To ease applications of PayPal’s UI, I applied PayPal’s branding to repeating elements, components, and templates to create a UI Kit.
02 Create high-fidelity wireframes
HIGH-FIDELITY WIREFRAMES
Using the low-fidelity sketches and the UI Kit, I recreated high-fidelity wireframes of existing screens users would interact with to complete tasks related to the new feature.
03 Build prototype
HIGH-FIDELITY PROTOTYPE
To create a prototype for usability testing, I first identified major tasks related to the new feature and built more high-fidelity wireframes to flesh out these task flows. After connecting all the wireframes, I hoped to gather more accurate feedback regarding the new feature’s integration.
05
Test
Testing the high-fidelity prototype provided an opportunity to observe the new feature’s usability and integration into PayPal’s existing information architecture.
PROCESS: 01 Decide what to test | 02 Conduct usability tests | 03 Synthesize findings | 04 Revise high-fidelity prototype
01 Decide what to test
USABILITY TEST PLAN
I selected tasks that test the main functions of the new feature using the wireframes I created. To direct my testing efforts, I wrote a Usability Test Plan.
Method
Remote Think-Aloud usability testing for PayPal’s high-fidelity mobile application prototype in Figma
Tasks
Create an expense category for coffee that limits your spending to $50 a week
Assign your recent purchase at Everlane.com to the Clothing expense category
To help PayPal tag Sonic as Food expenses, add Sonic as a vendor to your food expense category
02 Conduct usability tests
USABILITY TEST FINDINGS
Using my Usability Test Plan and my high-fidelity prototype, I conducted usability testing with five participants, who shared their mobile device screens while completing the tasks.
Participants
Ages: 23 - 32
Gender: 3 Female; 2 Male
Racial Identity: 3 Asian; 1 Turkish; 1 Caucasian
Marital status: 2 Married; 3 Single
Dependents: None
Occupation: 3 Students, 2 Employed (various industries)
Location: Various US & Canada cities
Traits:
All PayPal users
4 iPhone users; 1 Android user
Average completion time: 12 mins
Test metrics
Test Completion Rate: 93% of the users completed all three tasks
1 participant did not complete Task 2
Error-free Rate: 96% of the tasks were completed without errors
03 Synthesize findings
AFFINITY MAP
I created an Affinity Map to organize and analyze my testing observations, which helped me identify users’ main frustrations and generate and prioritize actionable revisions to improve the new feature’s usability.
The Process
01 Write one observation per sticky note
02 Group (and regroup) sticky notes into themes
03 Draw an insight from each of the largest themes focused on user frustrations
04 Think of specific, actionable improvement for each insight
05 Prioritize revisions based on the effort required to make the revision and the impact the revision would have on the new feature’s usability
Below are the insights and correlating revisions in order of priority.
PRIORITY
High
Insight: All users expected to see a button to confirm they are assigning an expense category to a specific expense
Improvement: Add a button using existing UI patterns to the Expense Category Selection sub-screen that is obvious the user is finalizing the process of assigning an expense category to an expense
Medium
Insight: More than half of the users were confused about what to do to add a vendor to an expense category
Improvement: Add an obvious explanation about this feature in a logical place within the information architecture
Low
Insight: More than half the users expected to be able to access more detail about expenses in each expense category from the Expense Category sub-screen
Improvement: Move expense category totals and detail to a screen(s) imbedded under recent activity in the existing information architecture to align with the user's mental model
04 Revise high-fidelity prototype
Using my UI Kit and priority revisions from usability testing, I could revise the high-fidelity prototype to help stakeholders envision the new feature.
PRIORITY REVISIONS
I revised the high-fidelity wireframes based on the effort and impact of each revision and therefore, decided to only make high- and mid-priority revisions.
Depicted here is the high-priority change: Add a button using existing UI patterns to the Expense Category Selection sub-screen that is obvious the user is finalizing the process of assigning an expense category to an expense
HIGH-FIDELITY WIREFRAMES
I retouched the remaining high-fidelity wireframes to ensure their designs are consistent with the UI Kit.
HIGH-FIDELITY PROTOTYPE
Once I revised the high-fidelity wireframes, I updated interactions in the high-fidelity prototype to further flesh out the tasks flows and help stakeholders visualize the user experience for the new feature.
Conclusion
In assisting PayPal with seamlessly integrating a new feature into its existing mobile app, here is what I learned:
Addressing needs is more important than innovation. Since PayPal wants to pivot into another industry, it needed to refine its expense classifications. While not an innovative feature in itself, it addresses user needs and frustrations, is the foundation of many personal finance apps, and would allow PayPal to build more robust features in the future.
Users orient themselves in an application by going back home. Therefore, it’s important to consider the levels of screens or pages down from the home screen/page in any design.
Integrating a new feature into an existing product may force you to follow design patterns you don’t agree with. Not every app or website has everything figured out, so it’s important to notify relevant stakeholders for potential improvements.
Next steps
Hand-off current revised version of the prototype to developers using Figma’s spec tool
Work on lower priority revisions
Build out additional screens for expense summaries, metrics, alerts, and push notifications
Monitor for and adapt to changes in the market and user needs, motivations, goals and frustrations
OTHER CASE STUDIES
Google Aria
Assisting caregivers manage asthma
Coppell Deli
Enabling online sales channels
Kaus
Boosting insurance sales online