The project brief
Social outings with friends always come with a tricky web of social interactions surrounding how to split the bill. I was tasked as part of a recruitment design exercise with creating a full app experience under the Dropbox name targeting peer bill splitting.


What I did
UX research, UX design, UI design, visual design

When I did it
January 2020, in 4 days

Who I did it with
Solo project
Who are bill-splitters, exactly?
I used contextual inquiry to observe how students split the bill on a night out. There were two key pain points to address. First was lack of transparency. Users never felt confident they were giving or receiving the right amount. Second was experience fragmentation People needed to jump between 3 or more apps to calculate, communicate, and pay.

Observing an interviewee as he explains how he uses Venmo to split food bills.

Mapping out the journey through our app 
I plotted out the flow through the app around creating as few touchpoints as necessary to split a bill. Highlighting convenience on the first impression was necessary if we imagined Split was a real product. This led to a special focus on a great onboarding and creation experience, making sure new users saw greater value in the app than splitting a bill the old way.

Initial approach to the flowmap with pen and paper. 

Final task map. A screen was created for each step in the flow.

Setting your account up
Recognizing that this app would be held to similar standards as other Dropbox platforms, Split borrows heavily from the design library of Dropbox and Dropbox Paper. Key navigation structures and interaction patterns were preserved.

Final onboarding screens.

Manage your bills easily
The home screen contains a compact list view of all user bills. Each item conveys a bill title, payment progress, and the friends included. The overview was carefully designed to accurately capture the details the same way both when the user is hosting a bill and when they're paying one.

Exploration of the details on each tile.

The same design captures the correct intent, even in two different contexts.

Make a sharable bill quickly.
Hosts use an in-app camera to scan in items from printed restaurant bills, digitizing a central record for everyone. Then, they choose existing contacts to split with. A competitive audit inspired the design for this view, as I sought to build on the standard from apps where social invitation was also a central feature.

Inspiration for the Connect Contacts screen was taken from Robinhood.

The host can then assign items to guests accountable for paying for them. Separating assignment from the initial contact selection allows the app to accommodate more complex kinds of splitting that are likely use cases, such as multiple guests sharing one item.
Pay what you owe seamlessly.
Learning through research that users were accustomed to texting about bill logistics made SMS a familiar way to send people an invite to pay through Dropbox Split. After downloading through a personal link, users' homepages are already populated with the bill that they're on the hook for.

Download funnel for invited users, executed through text.

The first-time open tooltip is contextually relevant to the use case as a payer.

Outcomes
People have a deeply ingrained mental model of what it means to split a bill, so working on this app was an exercise in solving real pain points while still taking cues from what's familiar to users. Making Split feel like a Dropbox app also increased my familiarity creating new products while respecting existing design languages.

The app I designed is well-prepared to handle food bills, but similar parallels exist in other places like with splitting the fare for a cab. If I had additional time, I’d make my solution more general to accommodate those needs.
Have a project for me? Let's chat.

More work

Back to Top