@id0/ Interface Collection

Art-event place booking

Lumen Field

Inspect available places on a 3D map or in an equivalent list, add up to four, review the total, and send a booking request.

Technology
  • Next.js
  • React
  • TypeScript
  • Base UI
  • Three.js

Design problem

The spatial view helps a visitor compare places, but the booking must remain complete with a keyboard, reduced motion enabled, or without WebGL. Selection and price also need to survive inventory conflicts and temporary failures.

Main user flow

  1. Understand the event

    Read the programme, venue, dates, and practical details before starting a booking.

  2. Inspect available places

    Open the 3D map or the equivalent list and review a place before using the explicit select action.

  3. Review the selection

    Add or remove places while the summary keeps quantities and total price synchronized.

  4. Submit and recover

    Correct field errors and send the request. If a place becomes unavailable or the service fails temporarily, the selection remains available for the next attempt.

Key decisions

  • One selection across map and list

    Map, list, and order summary use the same place inventory and selection. Switching views does not change the order.

  • Keep actions outside the 3D view

    The 3D map shows spatial relationships, while place details, selection, price, and submission remain available as page controls.

Critical states

  • Inspect before select

    Pointer, touch, and keyboard users can inspect place details without accidentally changing the order.

  • Equivalent fallback

    Reduced motion, unavailable WebGL, and screen-reader use retain the same inventory, details, selection, and price.