Overview
Role: UX/UI Designer
Duration: 4 weeks
Tools: Figma, Maze, Miro
The Inspiration
Venmo is a mobile payment service app that allows users to connect to their bank accounts and send/request payments from other users.
As a frequent user of Venmo, I always felt like it was missing a bill splitting feature. I was growing tired of constantly having to manually calculate the total amount after fronting a bill for my friends. Because of this constant problem, I thought to myself... there was no way I could be the only one who was facing this. There are 3rd party apps that exist for this, the average user prefers everything to be done all in one app so the only solution was to build a feature for Venmo.
Features
-
Design a feature that would allow users to use their cameras to conveniently scan a receipt, have the print automatically translated to text
-
Feature can calculate itemized expenses while also factoring in taxes and additional charges
-
Create a group option to add/remove users as need
-
Add options to split equally, by a percentage, or as itemized items between certain users of a group
How do we know who to design for?
USER INTERVIEWS
It started with a problem so it should not end with another problem. To effectively address the lack of the feature, I wanted to ensure what our user's needs, frustrations, and motivations were by conducting research and getting different perspectives.
Needs
-
Splitting expenses equally was easiest
-
Scanning a receipt to process items would be convenient
-
Automated reminders sent to other users to pay debt
Frustrations
-
Having to manually calculate each person's share is time consuming
-
Asking other users to pay their debt was "awkward"
-
Not everyone used the same mobile payment app service.
Motivations
-
Likes ability to send electronic payments
-
1 person usually volunteers to pick up the initial payment to split at a later date
-
1 person usually has to do the math calculations
The need for a feature that intentionally splits expenses yielded 2 opposite personas:
The Easy Going - the user who wants to make it as easy as possible for others around them, including the server at a restaurant, a roommate, or a friend group. They do not stress over a few dollars and would rather split a bill equally for convenience and less mathematical equations.
​
The Penny Pincher - the user can be seen as more frugal with their money. They do not see the reason of paying more if they were intentionally being more money conscious with their part of an order or bill.
​
The Users
PRIMARY PERSONA
SECONDARY PERSONA
To further expand on our primary persona, I created an Empathy map to brainstorm all of the possible scenarios that may run into a typical user's head. The need for this feature required putting myself into their shoes and consider the possible social and personal anxieties as money can often be a sensitive topic for others. Users tend to have conflict within themselves whether they should order what they want versus who would be paying for the bill and if it would be selfless or selfish.
What's already out there?
As the picture became clearer of our user's needs, motivations, and frustrations, I set out to seek what other competitive apps have built into theirs that proved to be successful or not successful. Did other users know they exist? If so/not, why?
COMPETITIVE ANALYSIS
Takeaways:
-
Only a couple of competitors allowed a receipt scanning ability. One of them even made it a premium paid feature.
-
Most apps allowed exporting of contacts to allow the ability to create groups easier.
-
All of the apps allowed splitting an expense equally as their main feature.
-
Only a few calculated taxes and tip in their total debt per user.
-
Only a couple of apps allowed itemized splitting.
Bringing the feature to life
USABILITY TESTING
Using Figma, I created a prototype of a user task flow which allowed participants to choose 2 paths. Depending on their need, they have a choice between either:
​​
-
splitting a total amount equally
-
using their camera to scan a receipt and split by items.
​
Splitting a total equally is straightforward and is a quick transaction that is very similar to Venmo's interface.
​
Splitting items between people allowed for more customization. Users have the option to choose multiple people to split a particular item and even to the percentage of how much someone has taken part from it. The tax and tip would also be built into match how much each person spent
After conducting usability testing, I was able to watch test users go through it and encountered a few design flaws that needed clarity as it hindered or delayed their ability to move on to the next step. Overall, the feedback from users who were familiar with Venmo, really enjoyed the feature and felt that it would make their lives easier if it was a real feature.
Successes
​​
-
All users really liked being able to have this feature with an app they already use
-
3 users expressed the scan receipt feature was innovative
-
All users were able to get to the confirmation screen at the end
Painpoints
​
-
2 users felt like it wasn't intuitive to click on each item to split
-
2 users felt like they would like confirmation that the receipt was being scanned
-
3 users felt like it wasn't evident how to split an expense equally
Improvements
​
-
Drop down arrows to emphasize expanding details
-
Add option to split an item by percentage shared
-
Add option for reoccurring reminders for debt owed
-
Incorporate a collaborative option to figure out who had what item
BEFORE
AFTER
Hover state was added to highlight user selection
The first problem encountered was that some of the users expressed a need for a visual cue to let them know they were selecting people to create a group. To fix this, I iterated a selection box that would show when hovered to cue users before they make a selection.
​
BEFORE
AFTER
Total amount was moved to a new line to center importance
Next, a first thought for some of my participants was that it wasn't clear where they would input the total amount of an expense. They were clicking around a few times before they saw the input field. I created a separate field for the total amount to emphasize the next step for the user.
BEFORE
AFTER
Drop down arrows added to indicate user action
The most frustrations came when it was time to select users per item. My original design intent was to minimize wording and allow users to expand items for a more detailed look. However, users expressed that it wasn't as apparent until they clicked around. One user commented that she doesn't always read directions initially and just relies on other cues to figure out what's next. To fix this, I added a drop down arrow by each item to provide a visual cue that doesn't require thought.
BEFORE
AFTER
Slider to allow users to precisely split an item by perecentage
Lastly, everything has been based on even splits from the total to the item. How about users like The Penny Pincher who want to ensure they are only paying for their precise share? I added an option to break up an item even further by the percentage of how much a person shared the item with a slider. The amounts would then change as the user drags the slider.
Final Takeaways
Building a feature that would actually solve my own personal problems was a lot of fun. I wanted the feature to meet the core functionalities that would make life more convenient for others, but I would love to explore adding more options to make it even more comprehensive than it is now. There was a struggle in my mind as I was going through the motions of designing it. Since it was a feature being added to a pre-existing app, I felt there were design constraints. Splitting expenses was not the core feature and so I felt like I could not create a vast menu with as many features. Instead, everything had to be intentional and straight forward. In doing so, I wasn't able to add little things like categories, reoccurring reminders, simplified debt option, filters, and etc.