Design exercise Prompt:
Design a standalone bill splitting app for iOS or Android. Your final design should address the following:
• Ability to split the bill and tip multiple people
• Ability to specify the tip amount or percentage (ex. 10%, 15%, 20%)
• Outside of the above, feel free to be creative with what features, if any you decide to include
I approached the design challenge in five parts:
1. Context: Problem/Goal & Assumptions
2. Understanding Users: Guerrilla User Research & Competitive Analysis
3. Planning the Experience: Sketches, Feature Set, User Flow, Edge Cases
4. Design: Wireframes, Interactions
5. Conclusion: Last thoughts, Improvements
Splitting expenses with friends is complicated. When you’re at a restaurant, you have to decide if you’re going to split the costs evenly or itemize everyone’s meal and drinks. Plus you have to decide how much each person should pay for the tip. Splitting larger bills like rent, utilities, and everyday household items gets complicated when you have to keep a running total of who owes who what. And with both large and small bills, you may have to go through the trouble of reminding someone to pay you back.
The goal is to design a mobile bill splitting iOS app that helps users successfully split a bill with multiple people. I want to make the overall process of splitting a bill simple.
I was really excited about this design exercise. I came up with many concepts, a lengthy feature set, and a large user flow. But due to the time constraints, I realized I couldn’t go as grand as I originally planned. I had to come up with a realistic timeline to ensure that I can send a finished set of deliverables.
1. Most people use mobile payment services like Venmo and Chase Quick Pay to split costs with others. I need to conduct a quick search of familiar patterns used in mobile payment apps.
2. The app makes money by selling data about their users spending habits to businesses. Consumer data is crucial for businesses to better understand customers and the market and use those learners to help refine their business strategies.
3. The business goal is user retention. The designs should be rewarding for users to come back and use the app again by reducing cognitive load (e.g. using existing design patterns, simple instructions, clear copy, etc.)
Making note of my assumptions helped me get started on figuring out what questions I needed to ask users. I assumed that most people used apps like Venmo to split the costs, but I needed to ask users to find out. I talked to three people, two were people who shared an apartment with their friends and one was someone who frequently eats out with friends. I asked questions like, “How do you pay back a friend who covered a meal for you?” and “Walk me through on your process of splitting bills with your roommates.” I wanted to understand their behaviors, needs, and goals so I could fully empathize with them.
Like my previous assumption, all three people I asked used Venmo to split the costs of their bills. Although Venmo may have a lot of good things going for it, I knew that there had to be more popular products out there on the market that people used.
I took a deep dive into the market and see what competitors are currently doing to solve the problem. I looked for the top three apps that people used to split bills. The main goal when conducting the analysis was to identify strengths and good practices I could adopt as well as weakness and usability issues to avoid.
Description: Splitwise keeps a running total of who owes who what. You can use a PayPal account for money transfers.
A few notes about the good and bad things that stood out:
1. Inconsistent top bar titles and bottom navigation labels. Two of the top bars listed have Splitwise as the title. It doesn’t provide the user any context of what each screen is. In addition, the bottom navigation labels aren’t consistent with the top bar titles. This makes it difficult for the user to discover the content they are interested in.
2. Button with a clear CTA. The CTA helps guide the user on what to do in order to use the friends feature.
3. Feature description. The clear feature description helps users understand the value of the groups feature.
4. Hard to reach with the thumb. The position of the save button ( an element needed to continue the process) is hard to each when a user is holding only one hand.
5. Automatic calculations. It splits a bill automatically but also gives user the option to adjust the amount each person pays. The same options apply to tips. This saves the user’s time and prevents possible frustration of having to split a bill manually. The downside to this is that the main functionality of this is hidden.
6. No payment information available. One of the biggest selling points of the app is that users can send and receive money through a Paypal transfer. However, there is no clear location or instruction on how to do so.
Description: Tab allows users to snap a picture of the receipt and tap your items to claim and share with others.
A few notes about the things that stood out:
1. No navigation context. The icons used aren’t easily recognizable and there are no labels to provide additional context. This requires users to have to remember unfamiliar information, increasing their cognitive load.
2. Not enough space allowed to enter text. I don’t understand why users are limited to use four characters for their nickname when there is plenty of space to allow for more text. This can also cause problems with distinguishing users when splitting a bill a large group of people.
3. Lack of signifier/hidden affordance. There’s nothing signifying that there’s more information available if the user swipes left. This makes it difficult for users to discover information they need to complete a task.
4. Can’t adjust individual payments. The bill, including the tip, is split evenly between users with no way of adjusting an individual amount a user pays. This can be problematic because not all users may want to split the bill 50/50.
5. Lack of clear purpose. If a user plans on paying someone in cash, there’s no need to use the app. There’s no context on the purpose of the cash option nor how to use it.
6. Lack of clear CTA. After a user syncs their Venmo account, there’s no CTA of what to do next to find a recipient and send/request money.
Description: Venmo allows users to remind their friends who owe what and lets users send/request money. Users can use a credit card or bank account for money transfers.
A few notes about the good and bad things that stood out:
1. No navigation context. The top bar nor doesn’t give users any information about what they’re viewing. There are also no labels for the navigation icons. Users will have have to make assumptions which might not be accurate and cause frustration when trying to navigate. In addition, having to remember what each icon means increases their cognitive load.
2. Hard to reach with the thumb. The navigation (an important element needed to use the rest of the app) is placed on the top of the screen making it difficult for users to reach when only using one hand.
3. Clear separation of information. The navigation drawer clearly segments information into categories making it easier to find what they want.
4. Clear purpose and CTA. The top bar makes it clear that the purpose of the screen is to pay or request money from others. The microcopy in the text fields helps to inform the user about what kind of information they should include. The “Request/Pay” button clearly signifies the purpose of the button, letting users know what will come afterward.
Planning the experience
I got a lot of ideas after finishing up the competitive analysis and so I sketched them out. I wrote down ideas I had for a feature set as well as made rough sketches of a variety of layout possibilities.
When doing the competitive analysis, I took note of the strengths each app had. I wanted to adopt those within my app to create a product than the competition.
When creating a feature set, I thought about the features that would be needed for users to successfully split a bill and as well as the overall feature set this app could have. I broke down the feature set into four main navigation sections.
Bills — Users can split a bill
Groups — List of group expenses
Incomplete — Request/pay others as well as remind others to pay what they owe
Account — Edit personal information
This is how the feature set created comes into use:
Click here for PDF version.
Due to the time constraint, I decided to focus on creating designs that addressed splitting the bill to meet the deliverable requirement.
Entering Bill Information
The point of entry of this page is the “Bills” icon within the bottom navigation.
There’s a banner placed at the top of the screen to provide users guidance on how to interact with the page.
Users can tap each field to input an amount. When the user enters an amount in the first two fields, the bill total will automatically update itself to inform the user about the total cost of the bill.
Users can search through a list of their friends and add them to the bill.
Selecting a Bill Split Type
Users have the option to split the bill with their friends evenly, by amount, and by percentage.
If the user decides to split the bill by amount or percentage, they can manually input the amount each friend will pay.
Each friend that is part of the bill will have the amount of money they owe next to their name.
The amount owed will update itself if the user decides to adjust the split type.
After the user has decided to finalize the split costs, an animation will occur, notifying the user that their bill has been successfully been sent to their friends.
The friends on the receiving end of the bill will be notified via push notification and can check the payment requests in the “Incomplete” tab.
Next steps would be to get this prototype in the hands of more people to get their feedback. I want to test how long it takes for users to split a bill as well as get their feedback on if they think the process is simple since that was my original goal.
Next iterations will need to address some edge cases:
Invalid amount requests. What happens if a user requests a friend to pay them an amount that's larger than the original bill total? Does the user trying to make the request get alerted with an error message if they try to save their changes?
Information missing from fields. Since the continue button won’t appear until the user enters the bill amount, bill description, and adds a friend, what happens if the user doesn’t do one of those things? How will the user know that they missed filling out a field?
User not having friends. What happens if the user doesn’t have any friends on the app? Will they be able to invite people? If so, how will they?
What I Would Do If I Had More Time
I’d like to find a way to incorporate the ability to take a picture of a receipt and split the bill. I think that it would be beneficial for people to have a record of the bill and divvy the costs quickly with friends. The concept I designed is useful, but I can see it becoming tedious if a user has to split a bill by exact amounts with many people.
I was surprised to see how few bill splitting apps were out there. I assume that splitting bills are a common issue for most people that go out to restaurants or have roommates. I think apps like Venmo are great, but they are definitely missing the opportunity of providing an even greater user experience by not being able to handle multiple varying payments with people.
This exercise got me thinking about the services that I use every day and what can be done to bring them to the next level to provide people with an awesome experience. This was a really interesting exercise and I’m looking forward to developing it more in the future.