ROLE	UX, UI DESIGNER
TOOLS	SKETCH, INVISION, HTML/CSS PROTOTYPING, ABSTRACT
TEAM	MYSELF, PROJECT MANAGER, ENGINEERING TEAM, EXECUTIVE TEAM
TARGET PLATFORMS	MOBILE (IOS,AOS), WEB

---

PROBLEM STATEMENT

Ordering food at a restaurant with a group of colleagues, friends or family can be complicated. Challenging and frustrating. This can in many cases spoil an otherwise enjoyable dining experience frustrating. It can be frustrating for guests to manually calculate what everyone owes and agree upon a group tip.

Challenging - It can be chalJengmg for large groups to have to wait till the end of tho meat to pay the entire bill.

Complicated - It can be complicated to calcu late the tax and bp on what each person m a dining party can owe.

SOLUTION

Payment at the table addresses these issues by enabling groups of colleagues, friends or family to split a biill and pay for the items they ordered. This allows them the freedom to:

1. Pay when they want. No longer do you have to wait for the wart sta f to bnng you the final bill and wait for your credit card to be charged.

2. Only pay for the items you ordered. No longer do you have to pay for-someone's expensive ordet Only pay for the items you ordered and the tax on those items.

3. No more manual calculations • No more ti me consuming and frustrating calculations on the back of napkins on each other's bill.

4. Use of multiple payment methods • No longer are you ued to usmg a credit card to pay for your meal. Now available With Appte Pay and Google Pay.

5. Assumptions - All guests use their mobitc phone to split the bill using Apple Pay I Googto Pay J Credit card as payment method.

USE CASES

1. Single guest picks up the bill for a table.

2. Multiple guests spl􀅲 the bill for a table.

3. Guests make a payment and order Is closed.

---

WEB APP ARCHITECTURE

The following diagram outlines the mobile architecture

1. Get Bill
   When the user scans the QR code on the tabte tent or the bill using the mobile app, the OR contains the following key information:
   Merchant ID
   Store ID
   Table Number
   This information directed to the app server for processing.
   The request is then directed to OMNIVORE for that particular location ID. The POS Is contacted and the order information for that table is collected. It is then returned to the device for display to the guest.

2. Check Offers and Rewards
   The offers engine will be checked to see if there are any applicable offer available for the items they have selected or that particular store. If offers are available, the discount will be made displayed on the bill. The Rewards engine will be checked to see if the user has any available rewards they can redeem.

3. Apply Offers and Reward Discount to Bill
   Apply any offers or rewards as discounts to the blll on the POS.

4. Got Payment Token
   When the guest selects to pay using Google Pay (Android) or Apple Pay (iPhone) on the mobile app, the action triggers a Payment Data Request that is sent from the mobile app to Google and Apple. A token is sent in the response by Google and Apple. This is then used in the next make payment call.

5. Make Payment
   Once the token has been returned by Google Pay or Apple Pay, it is then sent to the cloud as a payment request. This is then subsequently directed from the app server to the payment processor for capture and settlement with the merchant. Once the payment has been successfulty processed, the payment information is sent to OMNIVORE then directed to the POS. The response is sent back to the mobile device for the next step in the process. The merchant can then see all payments made through their POS, this amount will then be seen as a settlement amount into the Payment Processor Merchant account.

6. Close Table
   Once the response has been received that the payment has been successfully processed, the table can then be closed. The request to close is sent to the POS via OMNIVORE. The success response is then sent back to the device.

7. Add Loyalty Points
   Loyalty points will be calculated based on dollar amount spent and frequency or visits and added to their accoont.

8. Send Push Notification
   Once the payment has been successfully processed and the table order closed, a success confirmation screen is presented to the guest. At this point a push notification is sent via our Push Notification service containing the following information:
   Amount paid
   Payment method used
   Loyalty Points Earned
   Reward earned (if applicable)
   Thanking them for their visit

9. Get Payment and Loyalty History
   The guest can review their payment and loyalty history at any time:
   Order number
   Table Number
   Date and time the order was closed
   Wait staff name
   Loyalty points earned
   Order items
   Discounts (Offers and Rewards)
   Tip
   Tax
   Total
   Payment method

---

SOLUTION

Through learning about the problems we needed to solve and the users we were trying to reach we build a design approached that would streamline the user expererience when paying at the restaurant.
Our main goal was to enable the user to see their bill and be able to pay on the spot through the browser by scanning the QR code on the table, knowing this we stripped down the UI to the most basic yet important elements for a user paying a bill.
User information
Total
Tip
Bill history
Payment methods
Receipt

Having identified the first pan of the User Experience we then moved into one of the biggest needs and core of the feature "Split BIii" between the guests. The solution I designed for this scenario is a real-time based feature that allows several user on your table to be added on the same bill, each user is able to see in real-time who has been updates on the payment process submitted by each of the user until the is closed in the POS.

---

WIREFRAMING

Initial concept

---

USER EXPERIENCE AND USER INTERFACE

Single user experience.

Split, multiple users experience.

Itemized, multiple users experience.

---

WEB APP UI COMPONENTS

---

MERCHANTS USING PAYMENT AT TABLE