Passenger App UI reference

This page describes the visual structure of the ioki Passenger App—the rider-facing mobile app—in enough detail to reconstruct its screens from the description alone. iOS and Android share the same product experience, screens, and flow; where the platform chrome differs it is called out in iOS and Android differences. For what riders do on each screen, see the Passenger App section (for example Book a ride and Track your ride).

Platform and branding

Native apps for iOS and Android. The Passenger App is white-label: each product ships as its own branded app with its own name, icon, and brand colors configured per deployment (the default ioki brand color is the ioki blue #3246C8). Both platforms support a light and a dark theme. The interface is map-first—there is no bottom tab bar on either platform; the menu is reached from a menu button.

App frame (home / map)

After sign-in the rider lands on the map. Booking happens in a panel over the map that changes through the flow; a menu button opens the account/menu area.

┌───────────────────────────┐
│ [☰]                        │   menu button (top)
│                            │
│           MAP              │
│            ▽               │   center pin (place a start/destination)
│                     [◎]    │   locate-me button
│                            │
│ ┌───────────────────────┐  │
│ │  Where to?            │  │   booking panel / bottom sheet
│ │  ○ Start              │  │   (content changes per step)
│ │  ● Destination        │  │
│ │  [   Continue   ]     │  │
│ └───────────────────────┘  │
└───────────────────────────┘

Persistent elements on the home screen:

Map. The rider’s position, the service area, pickup/drop-off markers, and (during a ride) the vehicle. Start and destination use two distinct marker colors.
Menu button. Opens the menu (see Menu and screens).
Locate button. Centers the map on the rider, or on the service area(s).
Center pin. A fixed pin at the map center used to place a location by moving the map.
Booking panel. A panel/sheet over the bottom of the map that carries the current step of the booking and ride flow.

Signed out. Splash → Log in (phone number + SMS code) → account setup (profile details, app permissions, and—depending on the product—payment setup, terms, and a minimum-age confirmation) → Home.
Signed in. The Home map with the booking flow as a sequence of panels, a menu for account, rides, payment, and tickets, and individual detail screens opened from there.

Booking and ride flow

The booking flow runs as a sequence of steps in the panel over the map. It is the same on both platforms (see Book a ride).

Service selection—when the product offers more than one service/area, choose one; the map shows the service areas. Skipped when there is only one.
When to travel—Now (ad hoc) or Later (prebooking for a chosen departure or arrival time), via a date/time picker.
Start—set the pickup by address search, by moving the map onto the center pin, by current location, or a saved favorite (Home / Work). Products with fixed stops show the nearest station.
Destination—set the drop-off the same way; the app validates it is inside the service area.
Passengers and options—adjust passenger count and types, accessibility/space options (e.g. wheelchair, pushchair, luggage), and a note for the driver.
Offers—a list of offered rides; each offer card shows departure/arrival times, any walking time, the price or fare estimate, and—for intermodal journeys—the public transport connections.
Confirm and book—a journey summary with the selected payment method and, where enabled, an optional tip; a confirm button books the ride.

OFFER CARD
┌─────────────────────────────────┐
│ 09:12 → 09:31        Shuttle     │
│ 19 min · 2 min walk              │
│ €4.50                    [ Select ]│
└─────────────────────────────────┘

Ride tracking then advances through states in the same panel, with the vehicle live on the map (see Track your ride):

Driver assigned. Driver and vehicle details, booking code, ETA to pickup, and call / share / cancel actions.
Vehicle arriving at pickup. Pickup highlighted, with any walking directions to the meeting point.
On board. Live tracking to the destination with ETA.
Arriving at destination, then Completed. A trip summary and a rating prompt. (stars plus an optional comment).

RIDE TRACKING
┌───────────────────────────┐
│           MAP (vehicle ▲)  │
│                            │
│ ┌───────────────────────┐  │
│ │ ● Driver on the way    │  │   status stepper
│ │ ETA 4 min · ABC 123    │  │
│ │ Jane · ★ 4.9           │  │
│ │ [ Call ] [ Share ] [✕] │  │
│ └───────────────────────┘  │
└───────────────────────────┘

The menu gives access to the account and everything outside the live booking flow. It leads with the current product/service (with a switcher when there are several), then the items below, and ends with legal links, the app version, and log out.

Account. Name, email, phone number, date of birth, and notification/privacy settings; each is editable on its own screen.
Booked rides. Upcoming and past rides, split into tabs (for example active, finished, and open payments); each ride card links to its details and offers actions such as book again. Ride series (recurring rides) have their own detail screen.
Ride details. Route, times, driver and vehicle, fare breakdown, payment method (with a change option), cancel, rating, and any associated ticket.
Cancel ride. A reason picker with any fee shown, plus confirm/back.
Payment. Payment methods (card via the payment provider, SEPA, or PayPal), a credits balance with redeem-code and buy-credits actions, personal discounts, and passes. Selection actions open a sheet or a provider form.
My tickets and the ticket shop. Buy public transport tickets (route, date, passenger type) and view active/expired tickets, each with a scannable QR/barcode. See Public transport tickets.
Purchases. A history of credits and tickets bought, with receipts.
Invite a friend. The rider’s referral code with copy/share, invitations remaining, and a field to redeem someone else’s code.
Support. Email, hotline, website, SMS, and FAQ options. See Manage your account and get support.
Legal. Imprint, privacy policy, and terms, shown in an in-app web view. The imprint link appears only when an imprint URL is set at the client-app or provider level; the privacy policy and terms always appear.

Supporting screens reached from the flow above include address search (search field, autocomplete, favorites, map preview, and station list), station details, and—for autonomous vehicles—a short safety onboarding and a slide-to-unlock doors control at pickup/drop-off.

Components

A shared set of building blocks (rendered with each platform’s native styling):

Buttons. A filled rounded primary button, a text button, a floating action button, and a countdown button (auto-advances after a timer).
Inputs. Labelled text fields with validation, a multi-line note field, and a digit-cell code entry for the SMS verification.
Selection. Switches/toggles, radio groups, a passenger counter/stepper, and dropdowns.
Lists and cards. List rows (icon, title, subtitle, trailing value or toggle), section captions, and tappable cards (offers, rides).
Sheets and dialogs. Bottom sheets and modal panels for selection (service, payment, options), plus alert dialogs.
Chrome. A per-screen top bar/title with a back control (and an optional progress indicator).
Feedback. An announcement/notification banner (info / warning / error), a slide-to-unlock control for autonomous vehicle doors, a numbered step indicator, a QR/barcode ticket view, and loading/activity indicators.

Visual design

Shared across platforms:

Brand colors are white-label—a primary and a secondary set per product (default ioki blue #3246C8). The start marker uses the secondary color and the destination marker uses the primary; the selected service area is a translucent overlay of the brand color.
Light and dark themes, with white / dark-gray surfaces and automatically adjusted text.
Status colors for on-time vs delayed, and info / warning / error banners; a distinct error/destructive red.
Autonomous unlock states use green (available), amber (in progress), and red (unavailable).

iOS and Android differences

Aspect	iOS	Android
Booking surface	A draggable panel over a single map screen; steps swap in place	A panel/bottom-sheet over the map; some steps are full screens
Menu	Opens as a full-screen menu from the menu button	Slides out as a left-hand navigation drawer
Selection UIs	Inline panels and modals	Bottom sheets (service, payment, options)
Top chrome	Large-title navigation bars on menu screens	A top app bar with title and back on each screen
Typeface	SF Pro Rounded	Roboto (system)
Metrics	Points; ~10pt spacing grid; ~13pt corner radius; 40pt buttons	Density pixels; 8/16/24dp spacing; ~16dp sheet/card radius
Error color	System red	`#EE0047`

Both platforms use the same white-label brand colors, the same light/dark theming, and the same map-first layout with no bottom tab bar.