Split with Apple Pay
Adding a pre-payment bill splitting feature to Apple’s financial ecosystem
Introduction
If you want to split a bill between you and some friends, then right now you have two options; present multiple cards to the server (which is a nuisance to them, requiring the creation and running of multiple new transactions) or have one person foot the entire bill, then each pay them back our share of the total. But the process is rarely smooth on either end. Sometimes a server puts the wrong item on the wrong bill. Other times, a friend decides that the 3/4 of an appetizer they’ve eaten does not constitute any financial contribution for it. Either way, there seems to be space for a better, third option.
Split with Apple Pay is a way to ease the pain points on both ends of the transaction. No disputing charges after payment, no waiting for payback, no need to foot the entire bill, and only one transaction to be processed at the point-of-sale.
Goal: Create a bill-splitting feature that seamlessly integrates into Apple Pay’s current user interface and experience
Timeline: 2 weeks, 84 hours
Role: UX/UI Designer, UX Researcher, Visual Designer
Project Overview
Split with Apple Pay creates a way to split the bill without argument, delayed payback, or inconveniencing the server.
Understanding the Market
Recently, the market of personal finance apps has proliferated in a major way. Many, like Venmo or Splitwise, provide ways to send money between users and to/from their bank accounts. Others, like Google Wallet and Apple Pay, allow users to pay at a POS with their device. Because Split aims to combine these two systems, it’s essential to address the pain points of each. Based on current user reviews, this means being quick and intuitive to use, and avoiding delays and limited compatibility with points-of-sale.
Hearing from the Users
Once I had a good idea of the options available to people, I wanted to know what the real experience was like. I conducted two user interviews, and wanted to ensure that I understood all of the most important pain points users had when splitting bills and using online financial apps and services. My two interviewees both reported using each type of service independently, but expressed pain points that seemed to have a solution in the merging the two kinds of apps, including waiting to be paid back and being anxious about affording to foot an entire bill upfront if necessary.
Determining Broader Patterns
I also wanted to validate these takeaways with a more broadly applicable survey, which I sent out to an additional 15 users. The questions were made to echo what I had asked in interviews, and revealed many of the same sentiments, which solidified what I had suspected; most users were just making do with what was available to them despite seeing the shortcomings of their current systems.
73% of users surveyed reported using a mobile payment app like Apple Pay or Samsung Pay at least once a week. This showed me that the apps are widely used and accessible for a feature like Split, especially since 60% of users reported being active users of Apple Pay.
87% of the users surveyed reported one person footing the entire bill then awaiting payback as their primary means of splitting bills at present.
This method had many criticisms, however, with the three most common being long waits to be repaid, arguing over what amounts are owed, and anxiety about having enough money to cover the entire bill upfront.
My research showed that users were already using Apple Pay regularly, and their main qualms with splitting the bill were waiting to be repaid, arguing over amounts, and anxiety about being able to front the whole bill amount.
Envisioning Split’s Target User
Using the patterns in my research, I was able to create my persona: Aliyah. She represents the collective wants, needs, and pain points of financial app users. I found that the personal stories that my interviewees told were very similar in nature and context, which is what allowed me to paint such a vivid image of who the target user would be. Aliyah is the kind of user who understand the pitfalls of both her current P2P and dedicated payment apps, but would really benefit (especially socially) from their combination.
What should Split do?
After completing my research, I began to think about what the core functionality of the feature should be. I went through several versions, but ultimately compiled the essential list of features and functionality I needed to include within Split. I wanted to develop for an MVP version, so I worked to make the list as simple as possible; you can see it here.
I wanted to make sure the feature integrated well with Apple Wallet's current UI, so I needed to emulate the app's current design language and make use of Apple's Human Interface design principles.
Based on the enthusiasm I found in my user research, I also wanted to consider how the feature could potentially be expanded in the future. The main ways I saw this expansion happening was including delayed or scheduled splits, saving groups of co-payers if they were frequently used, and potential integration with an Apple Card to allow the feature to work even with a physical card.
What Goes Where
I then laid out the different pieces of the feature’s information architecture, based on the most frequent use cases that I had noted in the synthesis of my research. I laid out the process in the user flow below. However, I also decided to add in an information card (similar to those for the Apple Card and other new features) so that users could learn more about the feature within the Apple Wallet app ahead of using it for the first time.
The Path Most Traveled
I then moved on to developed Aliyah’s path through the feature based on this most common use case. While designing it, I wanted to make sure the process was as intuitive and simple as possible. This feature is meant to make an existing process even more convenient, so I knew I had to focus on the easiest and most straightforward way to achieve the desired end result. This also meant mapping out the flow of secondary users, who send their portion of the bill back to the primary user.
Putting Everything in its Place
With all my information properly organized, it was time to begin visual design. I began with lo-fi wireframes so that I could more easily see how elements could coexist on one screen without being too crowded or feeling out-of-place.
Speaking Apple’s Design Language
Next, I dedicated a lot of time to creating matched UI elements to those currently used in Apple’s Wallet app. I decided to work in dark mode to ensure that accessibility was also at front of mind. I had to create some new assets to match the current system, which involved designing new icon logos for Split and designing revised screen layouts for the feature to integrate into the current Apple Wallet user flow smoothly.
Co-Payers Logo
Split with Apple Pay Logo
Integrated Prompt for Split in Apple Wallet
The top priority in designing my UI elements was to align with Apple's current UI, so that users would find the experience familiar and intuitive.
Putting It All Together
Next, I began the bulk of my design process, and applied the new visual language to my lo-fi wireframes. I made sure to recreate all of Apple Wallet’s current elements from scratch so that I knew how to match them and so that the experience would feel properly integrated. I expanded on my hi-fi wireframes at this step to include all the screens I would need in my user flow that I planned to use for testing, and connected them into the below prototypes.
Primary User Flow Prototype
Secondary User Flow Prototype
Getting Feedback
Then it was finally time to put my design in the hands of users! I prepared my prototypes for testing through interviews conducted over Zoom, and also distributed a link to the Primary User’s prototype through Maze for more extensive results from a wider audience of users. The results of that Maze test are below.
Tester profiles from Maze
Usability testing revealed two main weaknesses to improve upon; a more intuitive camera interface for receipt scanning and a better prompt for activating the feature.
Ironing Out Some Bumps
The usability test results and interviewee feedback uncovered several areas in my prototype where improvements could be implemented without a very heavy lift. I realized that they were very important improvements that I had likely overlooked after being so immersed in the design process for consecutive days. I made the following edits post-testing because they were most consistently brought up by testers.
I decided to improve the camera flow by making it automated, where the system would automatically detect and scan the receipt without any input from the user. This streamlines the step considerably and produces less confusion for users about where to tap or what the status of the scan is.
To improve usability on the page where Apple Pay is first activated, I added an overlay that is displayed after 1500ms to indicate to users the proper action needed to proceed in the flow. This overlay is tappable to give users a better sense of what their next step should be, but for new users of Apple Pay in general I believe this would also be a useful addition.
What’s Still Left To Do
I’m happy with where the product ended up, but I believe that it could be improved even further by implementing a few key additions. The successes of this test also made me curious to do further testing on expanded versions of the feature, to see if the same user instinct would apply to them too.
Improve and fortify error-checking at every step of the process. I built out enough error-checking to cover what is operable within the scope of my prototype, but a more robust system would definitely be needed for the actual version of this feature.
Create a guided walkthrough of the feature. While users found all of the elements familiar because they have matching design to Apple Wallet’s existing UI, I believe that the process would be much easier after seeing a sample walkthrough in a few short steps illustrating the functionality of Split to users.
Prototype and test a version for larger parties and receipts. The system might need to be altered for handling very long lists of receipt items of parties of more than 5 people who want to use Split.
Add features like delayed or scheduled payback. Integrating the functionality of apps like Venmo and Splitwise into this feature would expand its usefulness to things like paying monthly bills between roommates or covering for friends while keeping them accountable to paying back their agreed upon share in a timely fashion.
Key Takeaways
I was really energized in this design by the enthusiasm I received during both my user research and my usability testing. This feature seems genuinely useful to a lot of people, and knowing that kept me motivated to make the product as intuitive and useful for them as possible. It was also surprisingly enjoyable to be confined to Apple’s Human Interface design language, and the UI elements already established in iOS and the Apple Wallet app.
Challenges
It was definitely a challenge to keep myself adherent to Apple’s UI elements throughout the entire design, and it required a lot of attention to detail.
Completing this design with a budget of only about 80 hours was definitely challenging, because it necessitated decisiveness at every single decision point and a very strict adherence to my planned schedule.
Insights
There are ways to innovate within apps that already exist that will still excite and delight users. The process does not always require starting from zero.
When it comes to improving upon daily processes for users, intuition and ease of use are always essential priorities. Without them, users will quickly lose enthusiasm about a product.
Final Thoughts
Working within Apple’s design standards felt daunting at first because of all the details I had to recreate and emulate, but it ended up being very satisfying as a designer to see users tell me that my feature integrated seamlessly with an app they already used.
This idea was born by bridging the gap between two very popular kinds of apps (peer-to-peer payment apps and user-to-business payment apps). It seems like innovation can sometimes be found in consolidation and combination, rather than addition of attempting to create an entirely new market.
This design was truly enjoyable to complete, because I felt that users were really enthused and excited by the possibility of this feature being a reality!
