top of page
Paypal's Split the Bill Feature Redesigned
Redesign of Paypal’s Split the Bill feature with the vision of making it the best online payment system platform.
April 2022
​
PROJECT OVERVIEW:
The scope of work took place in a 2 week sprint that involved 8 users and 4 UX designers. The team of 4 UX designers (generalists) played multiple roles in research, design and prototyping.
​
MY ROLE:
UI Designer, UX Designer, UX Researcher
DURATION:
2 Week Sprint
​
TOOLS:
Figma, Figjam and Canva
Overview
Mission: Redesign the "Split the Bill" feature leading to a great user experience.
My team and I began a redesign of Paypal’s Split the Bill feature with the vision of making it the best online payment system platform anyone would want to use out of a vast sea of companies like Venmo, Google Pay and Apple Pay.
The goal of this particular project was to identify any pain points or any usability issues with the merchant bill pay process and determine the critical features to prioritize for the next iteration of the product and improve the user experience.
Prototype
Research
COMPETITIVE ANALYSIS
Research began with competitive analysis as I looked into the 3 most popular financial payment applications that focused on bill payment. Google Wallet, Venmo and Zelle are all direct competitors. While all apps gave focus to bill management, not all offered a split bill feature.
COMPARATIVE ANALYSIS
On the comparative side: Apple and Dropbox are apps that revolved around user interaction and communication in their respected spaces. Although not true financial applications, they still offered two-factor authentication (2FA) alone with account security.
RESEARCH METHODS
As we continued our research methods we conducted interviews with 8 initial candidates developing two prototypes changing the homepage for users to navigation with questions revolving around our assumptions and original hypothesis. The interview questions were broken down into 4 different categories: Bill spit, Data visualization, Financial Privacy, and Personalization tracking the users process.
That brought us to our results where we gathered our insights and initial takeaways. Taking our findings from the user interviews we began synthesising our responses with affinity mapping. Users had multiple likes and dislikes and we ultimately found 12 major categories, but focused primarily on reoccurring themes around: financial data privacy, useful features, navigation system, personalization and feedback.
Synthesize
PERSONA
As we synthesized our data we built out our persona that was inspired by our findings from user research.
Emma is a software developer who enjoys meeting up with her friends and needs to have a simple way to calculate differences in bills. Also a confirmation when any transaction is done to give her piece of mind would be welcomed.
PROBLEM STATEMENT
Emma is going out with her close friends to eat at Cheesecake factory. Emma is using Paypal’s feature “Split the Bill” to calculate the cost. When she attempts to settle the bill, she is finding it alarming that the money is sent without any verification or confirmation that it is being sent to the correct person.
HOW MIGHT WE
How might we allow users to easily calculate the bill across multiple people?
How might we help users feel reassured that the money is being accurately sent?
How might we include shortcuts for users to enter the total cost of their bill?
SOLUTION
We believe that by creating a mobile application feature where a user can easily select a payment option and divide or split the bill or receipt among any number of users.
USER FLOW
Before we began our design phase we mapped out the journey of a user by going in the Paypal app, look for an option to split the bill evenly amongst your three friends: Joseph, Laurie and Robin. Take a photo of your receipt from Cheesecake Factory. Review that your bill has been split evenly then, enter passcode to confirm payment.
Design
SKETCHES
To begin our design phase we sketched out our ideas and decided to focus on the bill split option between friends based off of our problem statement. We wanted to present a design that would help us to determine the affective of the task.
WIREFRAMES
After sketching out the original design we moved to wire-framing 2 mid-fi prototypes for usability testing. We had an A and B prototypes that had different home screens. Here is where we would get a first look at a users interaction with our solutions.
Prototype A
Home Screen
Receipt
Photo
Prototype B
Home Screen
Success
Screen
USABILITY TESTING ROUND 1
The Scenario: Go on Paypal's home page, look for an option to split the bill evenly amongst your three friends: Joseph, Laurie and Robin.
Task 1: Take a photo of your receipt from Cheesecake Factory.
Task 2: Review that your bill has been split evenly then.
Task 3: Enter passcode to confirm payment.
QUANTITATIVE
-
Conducted A/B testing on 8 users.​
-
2 min 30 secs average completion time.
-
3 average misclicks
QUALITATIVE
-
"I didn’t think the icons down at the bottom were functional."​
-
"I was thinking tip when I saw a percentage and I was thinking, okay, so you're going to indicate what percentage of a tip you were going to give somebody?"
-
"I was a bit confused on what the instructions were. I thought the “Capture, Confirm, Split, Pay” were elements that could be done on the same page?"
Iterate
ITERATION
Our data from our A and B prototypes moved us into a 2nd mid-fi prototype that included features like the Friend Selection, Home and Transaction Completed screens.
USABILITY TESTING ROUND 2
The Scenario: Go on Paypal's home page, look for an option to split the bill evenly amongst your three friends: Joseph, Laurie and Robin.
Task 1: Take a photo of your receipt from Cheesecake Factory.
Task 2: Review that your bill has been split evenly then.
Task 3: Enter passcode to confirm payment.
QUANTITATIVE
-
Conducted 6 useability tests.​
-
1 min 36 secs average completion time.
-
1 average misclicks
QUALITATIVE
-
"It was a really intuitive flow. The only thing is still the homepage could be better laid out. I really liked the tab bar but thought the font was quite small."​
-
"I really like how we can know which page we are in, it’s beautifully done.”
Home Screen
Friend Selection
Transaction Completed Screen
DESIGN SYSTEMS
After the first round of testing was completed we decided to move forward and bring our mid-fi prototype to the next level and made the adjustments there so we could use a hi-fi version down the road.
Our design systems incorporated PayPal's themes and we used Roboto for typography with iconography to compliment PayPal's logo and simplistic feel.
Final Iteration
UI DESIGN / FINAL ITERATION
Based on the analysis of our usability test from the second mid-fi prototype, we changed and added:
-
App feature info onto the Homepage
-
Enlarged text and adding dividers for the tab bar
-
Minimizing screens and adding info onto the same frame (without overloading users with info)
-
Brought progress bar up and brought the search bar down within proximity of inputs
-
Removed excessive icons and added universal “text” input box
-
Tip options
-
More specific feedback page.
Next Steps
NEXT STEPS & TAKEAWAYS
Gathering designs and ideas then coming together to compare and contrast each others data, research and designs and iterate upon them building out a new hi-fi prototype.
We made sure to reference our ideations to the data based on research from our findings of usability testings. Below are a few points to take in the future.
​
-
Retest a New Hi-fi Prototype
-
Return to the C&C Analysis
-
Create better UX Writing
-
Update the App Message and Notifications Center
bottom of page