Skip to main content
UI Coach Logo
Back to challenges
Hard

Restaurant Visit From Menu to Payment

Design a restaurant app that connects live menu availability, table booking, and an accurate in-venue bill.

Mobile

The brief

Understand the problem

Background

A restaurant-owned app can reduce handoffs, but menu stock, reservation status, table orders, service charges, and split payments all change during a visit.

User context

Daniel books dinner for four. One guest has a nut allergy, another arrives late, and the group wants to split the final bill by item rather than equally.

Product problem

The product must carry context across booking, ordering, and payment without implying that allergy notes replace staff confirmation.

Objective

Design the connected booking, live menu, table order, and split payment experience for one restaurant.

What to design

Define the experience

Required experience

  • Availability and booking
  • Live menu with dietary detail
  • Table order status
  • Item-level bill split and payment

Screens and states

  • Restaurant home and availability
  • Menu item detail
  • Active table order
  • Bill split
  • Payment status

Core user flow

Follow the critical path

  1. 01

    Daniel books a table and records access needs

  2. 02

    The group reviews available dishes

  3. 03

    They place an order linked to the table

  4. 04

    Each guest claims items and pays a share

Product rules

Requirements and constraints

Requirements

  • Show current menu availability
  • Keep allergy guidance visible and require staff confirmation
  • Allow late guests to join the table
  • Reconcile discounts, tax, and service charges
  • Prevent the table from closing until every payment resolves

Constraints

  • Menu stock can change after selection
  • The restaurant point-of-sale system is the final order record
  • Guests may use different payment methods

Reality check

States worth considering

A dish sells out
The kitchen rejects a modification
Two guests claim one item
One payment fails
A tip is added after the split

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Table 14 bill

  • Charred eggplant, $16
  • Grilled snapper, $29
  • Rice, 2 at $4
  • Service charge, $5.30
  • Guest payments: 2 of 4 complete

Finish line

What to deliver

  • Five mobile screens or states
  • An item-level split interaction with unresolved payment handling

If you want more

Optional extensions

Add waitlist conversion
Design a takeout order in the same account

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
Font pairing
Playfair DisplayOpen Sans

Playfair Display & Open Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations