We expanded on the idea of the mobile bill calculator and made two separate designs for it. The two designs have different layouts and use different user interactions to achieve the same goal.
Masala Art design: drag people to food
Below are the two receipts for Setting A and Setting B of Scenario 2 from the test scripts.
Front page:
When entering a Payr supported restaurant, the restaurant network automatically configures the homepage of your iPhone to the Payr frontpage shown below. There is a paycode located on the bottom of every receipt. Enter the paycode to acess the order information from your table.
Split item screen:
After entering the paycode, you are taken to the next screen, shown below, with each customer represented by an icon, and a list of items everyone ordered on the bottome as a slide.
The split evenly button produces a pop-up window that allows everyone to split the unpaid items.
Tip and coupons screen:
This screen allows you to select amount of tip to add to the bill and to apply coupons to the meal.
Payment screen:
This screen allows every customer to select their preferred payment method. In order for the waiter to properly attribute the correct charges to each customer paying by credit card, customers paying by credit will be prompted to enter their names.
A pop-up window appears for each cash paying customer as an option to allow them to pay without exact change and recieve change based on how much they owe.
Confirmation screen:
This screen displays the payment method for each customer and the ammount each will be charged and then sends the information to the restaurant.
Not Your Average Joe's design : drag food to people
Introduction screen (below left):
The restaurant reconfigures the hompage of your internet browser to the Payr introduction page shown below.
Initial Bill Splitting Screen (above right and below left + right):
Food items on the bill appear as a list on the left and users appear as icons on the right. Double clicking the icons allows you to assign a name to the icon, as we found that people struggled with dealing with generic icon names. Single clicking a menu item highlights it and allows you to assign that item to a user or to multiple users by clicking once on the user. The three screens shown here represent different iterations of the design (user and menu item sides changed) and different stages of user interaction (names shown assigned to users below and unmodified icons shown above).
Tax and Tip Page (above right):
After menu items have been properly assigned, tax and tip are generated. Tax is displayed for each user based on their subtotal and percentage tip is able to be specified which will further update each user's total.
(assigning food to users is shown above left)
Payment Selection (above left):
After selecting tip and calculating total charges, the user advances to a screen allowing them to specify payment methods if they so desire. This allows the waiter to match names on cards handed to him to proper charges.
In a real situation, there are also a lot of people to people interaction as the users are using Payr. To simulate a more realistic situation, we made fuzzy stick figures and, during user testing, role played as the friends the users are eating out with.
Below are the iphone frame and the keyboard accompanying our prototypes.
