Skip to main content
UI Coach Logo
Intermediate

Choose a Restaurant Table

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

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

A reservation time does not guarantee that a table fits a diner's needs. Noise, stairs, outdoor exposure, group size, and wheelchair access can matter as much as the menu.

User context

Leah is booking dinner for six, including one guest who uses a wheelchair and another who prefers a quieter area. She wants to make a useful request without calling the restaurant.

Product problem

A floor plan can imply certainty even though restaurants may move tables or hold them for operations. The design must set expectations while making location and accessibility understandable.

Objective

Create a booking flow for selecting an available table or expressing table preferences when exact assignment is not guaranteed.

What to design

Define the experience

Required experience

  • Date, time, and party selection
  • Readable table map with relevant attributes
  • Reservation review and confirmation

Screens and states

  • Availability search
  • Floor plan selection
  • Booking confirmation

Core user flow

Follow the critical path

  1. 01

    Leah searches for six seats

  2. 02

    She filters for step-free access and low noise

  3. 03

    She reviews two available areas

  4. 04

    She submits a table request and receives the restaurant's confirmation policy

Product rules

Requirements and constraints

Requirements

  • Distinguish available, unavailable, and request-only tables
  • Explain table capacity and accessibility
  • Allow preference selection without forcing map use
  • Show deposit and cancellation terms before confirmation

Constraints

  • Exact tables may change before arrival
  • The plan must remain legible on mobile
  • Availability can change during checkout

Reality check

States worth considering

Chosen table is taken before confirmation
No accessible table is available
Party size changes
A deposit payment fails

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 options

  • Garden 12, six seats, quiet, step-free
  • Main Room 7, six seats, moderate noise
  • Window 3, four seats, request only

Finish line

What to deliver

  • Three to five responsive screens
  • A documented state for a table becoming unavailable

If you want more

Optional extensions

Add a waitlist
Design restaurant staff approval of special requests

Optional direction

Visual resources

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

Font pairing
VolkhovExo

Volkhov & Exo

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

Icons
Illustrations

Keep practicing

Advanced
Food and dining

Choose Your Restaurant Table

Design a reservation flow that lets diners request a specific available table or seating zone.

Mobile2 to 4 hours
AccessibilityInteraction Design
Advanced
Food and dining

Restaurant Visit From Menu to Payment

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

Mobile4 hours plus
Service DesignError Handling
Intermediate
Food and dining

Restaurant Group Order and Bill Split

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

Mobile2 to 4 hours
Mobile DesignInteraction Design
Intermediate
Food and dining

Build a Catering Menu for an Event

Design a catering request flow that balances guest needs, dietary safety, service style, and budget.

Responsive web2 to 4 hours
FormsInformation Hierarchy
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

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