Split the Bill

Hand drawn slider state with two payers

A Proposed Design Pattern

Last night, a group of my friends got together to watch the Pats game. It came time to order a pizza. As the new owner of an iPad, my friend opted to order the pizza using an online ordering service. As a user experience geek (even on the weekends) I rolled my eyes as it took 40 minutes to place the order. I didn’t say anything since I can appreciate the novelty of being able to order without having to pick up the phone.

Beyond novelty and potential incentive through deals, what can these services offer the user? Certainly there can’t be any utility in making the order process take longer than just a phone call. It’s nice that you can have an account and not have to type in your credit card or address every time you order, but is that worth the effort of having to step through an order process wizard?

What is it that makes ordering food for delivery different from ordering a book on Amazon?

  • There are likely to be several end users
  • It’s a service and not just a product

How do several end-users pay for a single service? Sure, you could distribute cash, but out of a room full of people what percent of them carry cash. Furthermore, what percent carry small bills?

Here we have a common problem, with a tool that can offer a unique potential for a solution. Let us split the bill and tip during the ordering process.

Mint's interface for splitting a value

Ugh, can’t you just picture the size of the credit card entry form and the complexity of splitting the bill evenly? What would such a design pattern even look like? The first thing that came to mind was the way Mint handles this. It’s ugly, complicated, and you have to keep track of each iteration within the split.

Ok. I’ll just jump right into my sketch of what I think this interaction should be like.

Hand drawn slider with associated costHand drawn slider state with two payers

The thinking here is that the user sees a slider of the entire amount due. The assumption is that the primary user has an account / is logged in. Every time the user clicks ‘Split +’ the slider bar splits the total evenly, and adds a user to the table. Clicking on “New” or “New Card” will bring up a modal dialogue for credit card information without the user having to leave the page.

The user can use the slider to move the amount for each card in either direction. In the case of more than two cardholders, there will be two points on the slider that the user can move. As an alternate, the user can click on the value either along the slider or next to the credit card list and manually enter a value. All other values will update on exit of text box.

One Comment

  1. (@mikealt) (@mikealt)
    August 21, 2012

    @13bills just saw your web app featured in the @smashingmag newsletter. I posting something super similar a while back: http://t.co/WGmZFDDX

Leave a Reply