Booking UI reference
This page describes the visual structure of the ioki Booking web app—the persistent frame, the booking form, and the map panel—in enough detail to reconstruct the layout from the description alone. For what each part does, see the Booking section.
Application frame
Every screen shares the same frame: a full-width top bar, a scrollable content column that holds the booking form, and a map panel beside it. There is no sidebar.
┌──────────────────────────────────────────────────────────────────────┐
│ [k] BOOKING [ Provider ▾ ] [ Feedback ] [ 👤 ] │ top bar (blue)
├─────────────────────────────────────────┬────────────────────────────┤
│ Service area ▾ Active rides ↗│ │
│ Search ride │ │
│ ┌─────────────────────────────────────┐│ MAP │
│ │ Passengers ││ (service area, route, │
│ │ Time & Date ││ pickup/dropoff markers) │
│ │ Route ││ │
│ │ Ride Options ││ [Physical] [Virtual] │
│ │ [ Reset ] [ Search ride ] ││ │
│ └─────────────────────────────────────┘│ │
│ (content column scrolls) │ (map fixed) │
└─────────────────────────────────────────┴────────────────────────────┘
On screens 1300px and wider the form takes the left two-thirds and the map the right third. On narrower screens they stack, with the form on top and the map below.
Top bar
A blue bar across the top. From left to right:
- the ioki signet, which links to the ioki app suite;
- the Booking wordmark, in uppercase with wide letter spacing, which links to the start of a new booking;
- a Provider selector, shown whenever the agent has at least one provider;
- a Feedback button that opens a feedback form;
- an account menu with sign out.
In non-production environments an environment-name badge also appears in the top bar; it is hidden in production.
Content column
The booking form fills the main column and scrolls on its own. At the top sits a service-area header: a service-area selector, an Active rides link that opens the product’s ride list in ioki Operator, and the Search ride title. Below it the form runs top to bottom through Passengers, Time & Date, Route, Ride Options, and, where the product enables it, Note to driver, ending with Reset and Search ride buttons. After a search, the offered solutions appear here—each an expandable row with times, duration, transfers, walking time, pickup and dropoff, and fare—along with a Payment method selector when the product requires one, a Remaining time countdown on the held offer, and a Book button.
Map panel
A map beside the form (the right third on wide screens, below the form on narrow ones). It shows the service area, the route between origin and destination, and markers for the pickup and dropoff. A station-visibility control sits at the bottom-left with Physical and Virtual checkboxes, or a single Stations toggle when the product has only one station type. A station’s popup offers Set as origin and Set as destination, and clicking the map sets the origin or destination while a location field is empty.
Screen states
The ride detail swaps between states, each a centered icon, a title, and a short message: searching for rides, waiting for driver confirmation, booked (showing the verification code), picked up, dropped off, and cancelled. Full-page messages cover empty and error conditions—no providers, no products, product not found, product configured incorrectly, insufficient permissions (which names the Phone Booking Agent role), and ride not found.
Visual design
ioki Booking uses the ioki brand palette on a light page, with a blue top bar and blue panels for the booked and in-progress states. Actions use a small set of button styles: a primary (blue) button for the main action, a secondary button, a red button for destructive actions such as cancelling, plus outline and small variants. Segmented toggles present either/or choices such as Ad hoc / Prebook and Nearby / Exact. Icons are single-color line symbols.
Map markers
| Marker | Color | Used for |
|---|---|---|
| Physical station | #1D4ED8 (blue) | fixed, physical stations |
| Virtual station | #FF6F00 (orange) | virtual stations |
Origin and destination are shown as pin markers whose tip sits on the exact coordinate.
Layout
- Two-column breakpoint: 1300px (form and map side by side above it, stacked below).
- Column split on wide screens: form two-thirds, map one-third.