Skip to main content
UI Coach Logo
Back to challenges
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 web

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.

Color palette
#A9A4CE
#05623B
#1F1109
#79829C
#6CBCB4
Font pairing
VolkhovExo

Volkhov & Exo

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

Icons
Illustrations