Skip to main content
UI Coach Logo
Intermediate

Restaurant Group Order and Bill Split

Design a shared restaurant order that coordinates individual choices, dietary notes, deadlines, totals, and payment failures.

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

Group ordering becomes difficult when participants edit at different times, one person submits for everyone, shared dishes do not divide evenly, and restaurant fees appear only at checkout.

User context

Leila is organizing dinner for eight colleagues. Three people will pay separately, two share a starter, and one colleague needs to ask the restaurant about sesame cross-contact.

Product problem

The group needs independent control over choices and payment while the organizer needs a complete order that can be submitted once and changed safely.

Objective

Create invitation, participant basket, order review, and split-payment states for a timed restaurant order.

What to design

Define the experience

Required experience

  • Join the correct group and set a display name
  • Add items with options and dietary notes
  • Review personal and shared charges before lock time
  • Resolve payment and item availability changes

Screens and states

  • Group order lobby
  • Menu and participant basket
  • Combined order review
  • Bill split and payment status

Core user flow

Follow the critical path

  1. 01

    Leila creates the order and sets a 19:15 lock time

  2. 02

    Each colleague adds items while the sesame question remains visibly unconfirmed

  3. 03

    The group assigns a shared starter across four diners

  4. 04

    One payment fails, so that diner switches cards before final submission

Product rules

Requirements and constraints

Requirements

  • Keep each participant's ownership and edit status clear
  • Separate allergy questions from ordinary preferences
  • Show tax, service fee, tip, discount, and shared-item allocation before payment
  • Lock and reopen the order with explicit notifications
  • Prevent one failed payment from obscuring the rest of the group state

Constraints

  • The interface cannot label a dish safe without restaurant confirmation
  • Menu price and availability can change before submission
  • Payment details remain private to each participant

Reality check

States worth considering

A guest never joins
An item sells out after the order locks
A shared discount does not divide evenly
One participant leaves before paying
The restaurant responds that cross-contact cannot be prevented

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.

Group total

  • Food: $214.50
  • Shared starter: $24 across 4 people
  • Service fee: $18.76
  • Tip: $32.18
  • Promotion: minus $20
  • Eight participant payment states

Finish line

What to deliver

  • Four responsive screens showing collaboration and payment recovery
  • A split calculation component for shared items, fees, discounts, and rounding

If you want more

Optional extensions

Add an organizer-covered balance fallback
Design a post-order refund split

Optional direction

Visual resources

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

Font pairing
HindInconsolata

Hind & Inconsolata

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

Icons
Illustrations

Keep practicing

Intermediate
Food and dining

Interruption-Friendly Cooking Mode

Design a hands-busy recipe mode that preserves progress across interruptions, parallel timers, substitutions, and device changes.

Mobile1 to 2 hours
Interaction DesignMobile Design
Intermediate
Food and dining

School Meal Account Payment

Design a family payment experience for meal balances, low-fund alerts, siblings, automatic reload, receipts, and payment support.

Responsive web2 to 4 hours
FormsTrust and Safety
Intermediate
Food and dining

Time-Sensitive Grocery Substitution Approval

Design a shopper-to-customer approval flow for unavailable groceries with price, quantity, dietary, and response-window context.

Mobile1 to 2 hours
Mobile DesignInteraction Design
Intermediate
Food and dining

Choose a Restaurant Table

Design a reservation flow that lets diners understand a restaurant floor plan and request a suitable available table.

Mobile2 to 4 hours
Interaction DesignAccessibility
Intermediate
Food and dining

Find a Restaurant by Its Best Dish

Design a dish-level review experience that helps diners compare taste, portion, dietary fit, price, and recency.

Mobile2 to 4 hours
Search and FilteringInformation Hierarchy
Intermediate
Food and dining

Order Ahead for Table Service

Design a mobile ordering flow that lets diners schedule food to be ready when they arrive at a restaurant.

Mobile2 to 4 hours
Interaction DesignForms