Bill Splitting Feature
The feature that allows users to track bills and expenses with others within the TD app.
Background
In Canada, there isn’t a Venmo or Cash App like our American counterparts to easily pay others back. Canadians use other apps, such as Splitwise or PaySplit, to keep track of expenses, and then go into their banking app to send an E-Transfer.
Redundancy: the user has to manually input their expenses in a third-party app, whereas for TD users, they’d already have everything in their TD MySpend app. With manual entering of expenses, some may be missed or can be incorrectly inputted.
Inconvenient: it’d be more convenient to have everything under one roof rather than having a separate app to track expenses, where a user’s banking app would already have it all tracked.
As these third-party apps aren’t connected to banking apps, there’s no way of initiating the payment. The user would still have to go back to the banking app to send the payment.
TD has more than 27.5 million users worldwide and is the second biggest bank in Canada. The bank is constantly working on new projects and releasing new features amongst their products and apps. Two main apps that I’m a consistent user of are the TD Canada app for all things banking/finance-related, and the TD MySpend app that allows users to keep track and budget their income and expenses.
Problem
Objective
The problems that I was trying to solve captured:
Avoiding incorrect amounts being transferred from external apps
Missing entering expenses from the banking app to the external app
Forgetting to “settle up” and E-Transferring people the money
Why not combine both in a more robust, traditional banking app?
Research
Goals
To see how users are tracking and splitting their expenses with others
Features that would be valued in an app
To reduce pain points experienced in expense-splitting apps
Methods
Primary research: user interviews with people who conduct regular banking activities
Secondary research: competitive analysis on various tangible methods, apps, and online methods that users mentioned they used to track
I conducted a competitor analysis amongst several different competitors that are expense-splitting apps and banking apps. This could serve as inspiration when designing the app and allow me to see what the other services are lacking.
User Interviews
User interviews were conducted to assess the banking activities of users and to really narrow into an expense-splitting function within the traditional banking apps.
Current Banking App Pros
User-friendly, good UI
Homepage provides quick glance into each account
Request money feature
Can find the things easily
Face login makes everything easily accessible
Easy to e-Transfer people
Call customer service through the app, they have all banking info already so you don’t have to provide it again
Current Banking App Cons
Cannot access TFSA, RRSP accounts when it should be all in one place
Have to add somebody as a contact to send them money
Have to go add different account balances to see how much money I have in total
Some banks charge per e-Transfer
Hard to track expenses if you use multiple banks
TD app has certain functions that can only be accessed through a web browser
Pain Points
When people don’t send you money back after being asked
Have to follow-up with people to get money back
Adding totals from receipts
Whole process to add receipts and splitting amongst the group and following up and adding them as contacts to e-Transfer
Hard to keep track of all expenses in an external app
Having to manually add in Splitwise is tedious
Expense-Splitting App
Splitwise
Excel
TD app
Contacting others that owe you
Text
Messaging apps
Discuss in person
Initiation request in TD app
Splitwise Pros
Easy to see who paid for what and how it’s being split
Can itemize every expense and offers a variety of ways to split an expense
There are different options to split (e.g., percentage)
Easy to organize multiple expenses to make it less confusing and to reduce e-Transfers
Splitwise Cons
Started adding ads after a certain number of entries
Need to pay for additional expenses over the daily limit
Paid features
People involved in the expense need to have the app
1 user is exclusively with
Scotiabank
4 users are with
TD
1 user is with
RBC
3 users use non-traditional banking:
Wealthsimple
2 users use
CIBC
1 user uses non-traditional banking:
Simplii
Majority of users bank with more than one bank for their different financial needs.
I only interviewed users within the GTA, so TD was a very popular bank amongst the responses, Wealthsimple is an online investment firm that is becoming popular amongst the younger demographic.
User consensus seems to be that the TD app makes banking easy and has resources to make the banking process easier.
Splitwise, which is an expense-splitting app amongst the users interviewed, also seems to be a popular and easy-to-use app.
The most notable pain points is having to remind people to pay you back, and having to manually add expenses to the app.
The user interviews are in favour of the solution I was proposing, which is to have an expense-splitting features in the TD app to input it in another app when the expenses are already in the TD app.
Define
User Persona
I compiled the research information from the primary and secondary research to create two user personas that would reflect the app that I am working towards. The first persona, Simran, is a Toronto-based recruiter that uses several banks to perform her banking needs. The second persona, Cam, splits expenses frequently as he resides with his partner.
Ideation
Feature Set
After defining my target audience and understanding who I’m designing for, I created a Feature Set to visualize and organize the features that will be included in the app. I prioritized the product features based on user’s needs and project timelines.
User Flows
After creating a Feature Set for the app, user flows were created to visualize how a user would go through the app’s functions and the intentions of the potential interface that I intend to design.
This user flow follows the user choosing an expense to split with another user and sending them a reminder or settling up on the spot.
Design
Low-Fidelity Wireframes
Lo-fi wireframes provide me the ability of receiving quick user feedback and iteration before I go into the high-fidelity wireframes.
The wireframes show the main task flow of a user tagging an expense from their transaction list to be split with another user, and how it displays on the expense dashboard once entered.
Mid-Fidelity Wireframe
For multiple functions, I created two different options and showed it during group critiques, mentor calls to get feedback on which option would be a better design for users. I would also test this with users to see what their feedback is.
Two options for splitting an expense
These are two options that I considered when it came to a user choosing an expense to split.
Option 1 (left) allows the user to click on the transaction which will have a bolded border to indicate that it has been chosen. A button will appear at the bottom of the screen to ‘Split Expense’.
Option 2 (right) allows the user to swipe left on a transaction to easily choose the transaction to split in one motion, similar to archiving an email in Gmail.
Result: Based on feedback and what I thought was the most straight-forward action for the user, I opted for option 1. Option 2 was not as intuitive for users and there is no trigger for a user to swipe on a transaction in order to select it.
Two options for tagging an expense
These are two options that I considered when it came to tagging a transaction that has been chosen to be split.
Option 1 (left) tags a transaction with a coloured bar on the left of the transaction line.
Option 2 (right) tags a transaction with a coloured dot next to the transaction.
Result: I ended up opting for the coloured bar as it looks more elevated and clean. I also received feedback from multiple people with the same thoughts, however, it was mentioned that it is too thin and to thicken the bar so that it is more noticeable to users.
Prototype & Test
High-Fidelity Prototype
Building on the mid-fi wireframes and by utilizing the existing TD UI kit, I developed the hi-fi prototype for four task flows:
A user tagging an expense to be split with a receipt
The user is on the transactions screen and chooses an expense to be split with another user with a receipt. I integrated the use of AI to be able to scan receipts and split amongst the number of detected people.
A user tagging an expense to be split without a receipt
The user is on the transactions screen and chooses an expense to be split with another user without a receipt present. Without a receipt, the user can enter the split manually.
Setting up a payment reminder to another user
A reminder is set up from my POV (someone owes me).
Settling up a payment reminder from another user
In the POV of the user that has received the payment reminder to settle up the payment (I owe someone).
Usability Testing
With a functioning prototype, I had five participants for user testing of the four flows. This was conducted virtually on Google Meets with the ‘Broadcast’/’Start Sharing’ functions that allowed users to share their phone screens with me. This allowed me to see their facial expressions whilst also observing any micro-interactions. A challenge in this was trying to monitor both facial expressions and the mobile interactions at the same time without missing an observation whilst taking notes.
I received some great insight and questions from the participants that I’ll be taking into consideration when making adjustments to my wireframes for the high-fidelity wireframes.
On average, the participants:
Took around 10 minutes on average to complete the four flows
Encountered on average one error. Errors include:
The ability to edit the number of people to split with when scanning a receipt
The ability to remove a tagged expense
The ease of clicking on the expense to tag
Gave a general user satisfaction score of 9
The users were generally satisfied with the feature, with an average rating of 8.
Iteration
I made the following iterations based on the usability testing:
Allowing the full transaction bar to be clickable, rather than the single circle
Redesigning the settling up feature slightly
Allowing the ability to edit the number of people when splitting the bill through receipt-scanning
Ability to remove a tagged expense
The next steps will be continuous iteration and testing of the app to continue improvement amongst the app.
Reflection
As I use the app regularly, I was able to think in the logic of TD processes and how adding an expense feature would play out. Although I’m not familiar with any technological hurdles and financial regulations that TD may have, this feature and my thought process was to hope to have this integrated in the future.
The main challenges I encountered during this process was thinking of the flows and logic. There were many iterations between the mentor calls, group critiques and usability tests. Many people had great suggestions and areas for me to think deeper into; however, it started getting slightly convoluted when conflicting suggestions started arising. That’s when I had to re-evaluate and use my own intuition to determine what I thought was best.
Interesting suggestions were more technological capabilities within traditional banking apps, such as using AI to scan receipts and automatically split bills, using QR codes to pay people, tapping phones together to pay (Apple has that capability to send pictures). Hopefully these are feasible with the ever-growing technology use and abilities!
I ensured my design solutions aligned with user needs and goals as I revisited my initial user interviews and really revolved my designs around that. I walked through my own designs many a times to create the most logical flow I could. I created flows that addressed both AI-assisted and manual inputs, setting up reminders from the user’s perspective and settling up payments from the owee’s perspective. I tried to cover as much ground as I could (which may also be viewed as getting kind of messy as I was trying to fulfill everyone’s wants).
Key takeaways I gained from this is to think more deeply into exit points for users and accessibility. I oftentimes forget exit points until it’s pointed out. I’m still balancing out accessibility versus simplicity as sometimes I feel like extra verbiage or icons can be counterintuitive.