Simple Mockup Free Scene.png

Billbox

Simple and fast way to split bills for group expenses

Design Exercise for Dropbox

OVERVIEW

INFO

Split bill is a problem that people often face in life, because of the convenience of checking out using only one card or the payee can only accept a limited number of credit cards. With the advent of the mobile Internet era, people are obviously not satisfied with using calculators to calculate accounts and then split bills. Now many problems on the existing split bill app appear, so I decided to design a new split bill app as the design exercise of Dropbox.

Time. 2020

Tools. Adobe Illustrator, Adobe Photoshop, Adobe XD, Sketch, Principle
Process. User Research, Ideation, Conceptual Testing, Iteration, Usability Testing

Category. UI/UX Design, Design Research, 

Prototyping, Wireframing, Branding

Design Background

PROBLEM SPACE

It's hard to split bills and custom tips among group members.

We all experience this: When we have meals or shop with friends, there is always some confusion when we check out.

Who will pay for it and how to split the bill. You may not agree with the percentage of tip the payer gives, but it's hard to say.

It's troublesome for the payer to calculate each one's bill one by one and receive money from friends one by one. Consequently, a simple and reliable account splitting app is very necessary.

DESIGN OBJECTIVE

The goal is to bring an easy-to-use and unique solution to improve the user experience when splitting bills. I also want to find opportunities to meet personalized needs and help ease the emotional burden of users when splitting bills. To do this, I must apply a user-centered design process.

split bill_画板 1 副本 3.png

Get in touch with the users

Although I have used the split bill app, I gradually gave it up later. At the beginning of the project, I didn't have a clear goal since I personally used only two split bill apps. To have a better understanding of the advantages and drawbacks of the existing split bill apps I interviewed a group of people. The questions include: have you ever used an app to split bills? If have, which one is it and why use it? Tell me about your experience with the split billing app. Are you still using it? Do you feel uncomfortable during your user experience? What are your expectations for the split bill app? 

I want to explore who our users are, people's understanding and expectations of classified billing app, and people's user experience through my user experience and interview results.

During the survey, I divided the user population into two categories: those who often use splitting bill apps and those who barely know about splitting billing apps.

PERSONA

airside-persona_画板 1 副本 3.png
airside-persona_画板 1 副本 4.png

What information do users care about?

Before jumping into designing, I believed that it was important to understand the different information that would present in different use cases. I mapped all the possible information and analyzed the issue in the aspect of the basic information, contexts, and roles:

split bill_画板 1 副本 2.png

Pain Points

FOR PAYER

1) Users still need to manually discover and delete part of their bills.

2) The embarrassment users face when they ask for a split bill.

3) When users ask others to share their bills, it's hard to say, which makes users sound stingy.

FOR GROUP PARTICIPANTS

1) Not everyone on the dining table is willing to download the app.

​2) Group members don't know the amount of the bill and are confused about the payment.

3) It's hard for group members to ask questions about the amount of bills, including tips.

4) The negligence of App Design on details may lead group members to distrust the service.

未命名作品 8.png
未命名作品 8.png

Key Insights and Design Principles

I summarised our research and planning into 3 key user priorities. These laid the foundations for my design.

  • Simple and easy to use:Simple, smooth and logical operation reduces the user's learning cost, and makes every user's user experience extremely comfortable.

  • Trustable:As an app related to money, reliability, and trustworthiness are the most critical bottom line and principles. No one wants to lose money. Thus, rigorous calculation and traceable detail design are the ways to give users a sense of security.

  • Flexibility:Users can also customize the amount when sharing bills, which is an important part of the user experience.

design pri_画板 1.png

Design Goal

How might we help users split bills more efficiently and reliably?

Conceptualization

CONCEPTUAL EVALUATION

Reduce the operation process of payers and increase the trust of participants.

Idea 1: One person make an expense

未命名作品 10.png

Why did I not choose it?

This idea is suitable for the case with a small number of participants. But if there are too many participants, the payer needs to calculate the amount of each person and fill in the app. The process is complex and easy to make mistakes.

Idea 2: Multiple people edit bills

未命名作品 9.png

Why did I not choose it?

This idea effectively reduces the calculation pressure of payers. But it's hard to unify the standard of tip for everyone. If you can't average the amount or choose the amount for everyone alone, the payment process will be unfair.

Idea 3: Work together to edit bills with customized tips

未命名作品 10.png

Why I choose this option?

Everyone can operate their own part of the entry and tip, the payer can see everyone's results and get the final price. Even members who don't download the app can add personalized amounts via payers and get receipts via email.

Visualizing the End-to-End

Then I was wondering "What information is really needed here?" "How can users recognize a certain ride?"

I developed a user journey with a typical use case and listed all the key information in each step to help me gain a better understanding:

split bill_画板 1 副本 4.png
split bill_画板 1 副本 5.png

LO-FI

Usability tests show the concept is clear. But users were confused about creating and viewing details. Some iterations included:

Status bar of home page

In the usability testing users are confused about the digital amount of the home page. If only one group's receivables or payables are listed, the other group's bills will be ignored. So I changed the number in the status bar of the home page to the sum of all groups, and arranged the receivables and payables separately so that users can know their financial status.

improve_画板 1 副本 2.png

Group

For groups, the original design was to display only the group name and number of people. Other information needs to click the forward button to view the details. This will cause the user's attention waste, so the new design adds the cash flow amount, time, team member preview, and transaction status information.

improve_画板 1.png

Match users and items

During the usability testing, users found that if multiple people select the same item and drag the header image to the front of the item, it will cause the item name to move backward so that the item name cannot be changed. To solve this, the avatar was dragged to the front of the amount. There is enough space to add multiple users.

未标题-1.png

Splitting completion

In the initial assumption, the function of this app stops telling each user their payable amount, and the user needs to jump to other app or cash payments. But in fact, we can take another step forward and add a jump button, which is convenient for users to make choices and jump operations.

improve_画板 1.png

Wireframe

improve_画板 1 副本.png

User Flow Chart

未命名文件 (2).png

Final Design

COLOR AND FONT

split bill high fidility_画板 1 副本 9.png

Home page

Users can check amounts of payable and receivable at the home page. Meanwhile, they can check all the pending transactions. In addition, users can view the payable and receivable separately by filtering. 

Mockup1010.png
Mockup.png

Friend Profile

Users can enter the homepage of their friends by clicking their profile picture. On users’ friend’s home page, users can view all the transaction history between their friends and themselves. In addition, users can set up autopay to their friends, and a reminder for their friends to pay them. Also, a chart about transactions can be seen. 

Smart computing multiple transactions. When Mary owes Jack $5, Jack owes Mary $10. Then the app will work out that Jack only needs to pay back $5.

Group

On the group page, users can check all the previous group expenses listing from the latest to the oldest. It is easy to view the number of money users pay or receive in each group. Also, the type of expenses is also listed. In addition, the transaction status of each group (on the process or complete).

Mockup4.png
Mockup999.png
Mockup5.png

Add an expense

- Group making

How to initiate a group expense?

The first step is to add group members. There are three different ways to make a group:

1) add a new friend through emails, phone numbers or names;

2) add a group member from users’ friend list;

3) add a group member from users’ contact list.

The second step is to double-check your expense group, at this step, users can edit group members.

The third step is to choose the expense type.

Add an expense

- Bill scanning

Scanning and get everything!

The payer just scans the bill with a mobile camera, the name and address of the merchant, time, details of the bill will appear on the interface. And every group member appears at the bottom of the interface.

Mockup7.png
IMG_5900.HEIC
Mockup3.png

Add an expense - bill splitting

Dragging to split bills!

How to split the bill together? Users only need to drag their profile picture to the item which means the user needs to pay for the item. This completes the pairing of people and items. The payer can operate for all the group members while others can only edit their own part. 

Add an expense - add tips

Everyone can customize tips!

After group members match their items, they can add 15%, 20%, 25%, or customized tips. Then each group member knows how much they need to pay. Group members can jump to Venmo or PayPal by clicking buttons. Group members can also choose to pay cash in person or pay later. 

When the payer gets the total amount after the members add the tips, the payment will be made to the merchant.

Mockup8.png

Next Step:

If given more time, I'd like to think more about:

Log in with Dropbox account

In the future design, I should consider the issue of login. As part of Dropbox product line, this app should be logged in by Dropbox account

Online payment system

Users need to jump to other app payments, which is not a user-friendly experience. So in the future, we can consider integrating the payment system into the Billbox app, and users can pay directly in the app

Pay different bills at one time

When different groups need to pay bills together, the problem arises. Combining different group bills together, figure out the amount we need to pay each payer.