Vehicle App UI reference

This page describes the visual structure of the ioki Vehicle App—the driver-facing mobile app for iOS and Android—in enough detail to reconstruct its screens from the description alone. It covers the app frame, every screen and dialog, the navigation model, and the design language. For what drivers do on each screen, see the Vehicle App section.

Platform and orientation

A native mobile app for iOS and Android, built around a full-screen map. On phones it is used in portrait and side panels slide in over the map; on tablets it is used in landscape and the destinations panel sits permanently beside the map. It supports a light and a dark theme.

App frame (home screen)

After sign-in the driver spends almost all of their time on the home screen: a map filling the screen with floating controls and cards on top, a destinations panel, and a slide-in main menu.

Phone (portrait)—panels are hidden until opened:

┌───────────────────────────┐        ┌───────────────────────────┐
│ [☰]        ⚠ announcement  │        │ Destinations          [✕] │
│                            │        │───────────────────────────│
│                            │        │ CURRENT                    │
│            MAP             │        │  ▸ 12 Market St            │
│                            │        │    Pick up · 2 pax         │
│                     [⌖]    │  ──▶   │    ══ slide to pick up ══  │
│                     [⤢]    │        │───────────────────────────│
│                            │        │ NEXT RIDES                 │
│ ┌───────────────────────┐  │        │  ▸ 40 Rose Ave  09:12      │
│ │ 4 min · 1.2 km        │  │        │  ▸ Depot        09:40      │
│ │ 12 Market St   [P2 D1]│  │        │                            │
│ └───────────────────────┘  │        │                            │
└───────────────────────────┘        └───────────────────────────┘
   home with active ride card            destinations panel (opened)

Tablet (landscape)—map and destinations panel side by side:

┌───────────────────────────────────────┬───────────────────────┐
│ [☰]                    ⚠ announcement  │ Destinations          │
│                                        │───────────────────────│
│                                        │ CURRENT                │
│                 MAP              [⌖]   │  ▸ 12 Market St        │
│                                  [⤢]   │    Pick up · 2 pax     │
│                                        │    ══ slide to … ══    │
│  ┌───────────────────────┐             │───────────────────────│
│  │ 4 min · 1.2 km        │             │ NEXT RIDES             │
│  │ 12 Market St   [P2 D1]│             │  ▸ 40 Rose Ave 09:12   │
│  └───────────────────────┘             │  ▸ Depot       09:40   │
└───────────────────────────────────────┴───────────────────────┘

Persistent elements on the home screen:

Map. Turn-by-turn navigation, the service area outline, the driven and upcoming route, the vehicle position, and the next-turn maneuver instruction.
Menu button. Top-left; opens the main menu.
Map controls. Recenter (re-center on the vehicle) and route overview (zoom to fit the whole route).
Active ride card. A floating card at the bottom showing the next destination: time and distance to it, its name/address, and task counts (pick-ups and drop-offs). Tapping it opens the destinations panel.
Announcement banner. A dismissible alert across the top for driver announcements, with a severity color (info / warning / danger) and an optional link.
Destinations panel. The current destination with its actionable tasks, followed by the upcoming rides. Slides in from the left on phones; fixed beside the map on tablets.
Main menu. Slides in from the right; see Main menu.

Overlays that appear on top of the home screen when needed: a vehicle-connection prompt when no vehicle is connected, a map-loading spinner, and the dialogs listed under Dialogs and overlays.

The app has two areas depending on sign-in state:

Signed out. Splash → Sign in, plus an Update app screen and in-app web views.
Signed in. The Home screen, with everything else presented as full-screen modal screens on top of it (Notification center, Settings, Tips, Previous destinations, Update ride, and web views), plus event-driven dialogs.

The driver moves between screens from the main menu and by tapping items on the home screen; modal screens have a title bar with a close (✕) button to return home.

Screens—signed out

Splash screen

The first screen on launch: a dark background with the ioki Vehicle logo animating in and the word VEHICLE beneath it. It initialises the app, checks the app version, and restores the session, then moves on to sign-in or home. On a connection problem it shows an error with a retry action.

A logo/title header, a tabbed form, and a footer with terms and privacy links (the header and footer collapse when the keyboard opens). Two tabs:

Account. Product ID, Username, and PIN (6-digit) fields, and a Log in button.
One time code. A one-time-code field and a button to request/enter the code.

Update app

A centered notice—”Your app is outdated.” / “Please update your app now.”—with an Open App Store button. Shown when the client is too old to continue.

Screens—signed in

Home

The map-centered workspace described in App frame.

Destinations panel

A title bar (“Destinations”), the current destination header, and a list:

Current destination. Its tasks as slide-to-confirm actions: slide to pick up, slide to drop off, shift start/end (with an odometer step), and meta tasks (pause, reposition). The booking time sits in the destination header. Each task shows passenger name(s), pick-up/drop-off location, a row of badges for the requested ride options (only those visible to the driver) and consumed resources (wheelchairs, walkers, storage), and a task options menu (cancel, call passenger).
Next rides. Upcoming destinations as compact cards: address, time, passenger count, and a task summary. Tapping an active task opens Update ride.

Empty state: “No current booking”.

Slides in from the right over a dimmed backdrop; up to ~330px wide on a dark background.

┌───────────────────────────┐
│ Jane Doe                   │
│           [🔔] [🕘] [🏆] [⚙] │   Notification center · Previous
│                            │   destinations · Tips · Settings
│  ┌──────────┐ ┌──────────┐ │
│  │ Vehicle  │ │Deactivate│ │
│  │ AB CD 123│ │ service  │ │
│  └──────────┘ └──────────┘ │
│  ┌──────────┐ ┌──────────┐ │
│  │Report an │ │ Log out  │ │
│  │  error   │ │          │ │
│  └──────────┘ └──────────┘ │
│                            │
│  v3.11.1 · Privacy   FAQ   │
│  ┌───────────────────────┐ │
│  │      Emergency        │ │
│  └───────────────────────┘ │
└───────────────────────────┘

Top icons. Notification center, Previous destinations, Tips (when supported), and Settings.
Tiles. Connect/disconnect vehicle (with the connected license plate), Activate /. Deactivate service (when supported), Report an error, and Log out.
Footer. App version, Privacy Policy, and FAQ links.
Emergency. A full-width red button (when supported) that opens the Emergency Call dialog (see Dialogs and overlays).

Notification center

Title bar “Notification center” with a scrollable list of received messages; each item shows a type label, timestamp, a preview, and a read/unread indicator. Tapping one opens the full message, with sender information when available.

Settings

Title bar “Settings” over a scrollable list of grouped options:

Visual Options. Dark Mode, Enable Dynamic Map, Position Animation (Experimental), Show. Upcoming Route.
Sound. Notify on upcoming maneuver.
Distance Units. Use Miles.
Support. Driver manual (opens a web view).

Tips

Title bar “Tips” with two tabs—Today you have earned and Monthly overview—each showing an amount. Empty state: “No tips received yet.”

Previous destinations

Title bar “Previous destinations” with a list of completed destinations (view-only): station/address, pick-up and drop-off, time, distance, and passenger count. Empty state: “No previous bookings”.

Update ride

Title bar “Update Ride” over a form for the selected task:

a task/destination header;
a Passengers list, each row editable/removable, with an Add Passenger button when supported;
a payment method footer with a Change Payment Method button when in-ride payment is supported;
a Confirm button (showing the amount when applicable).

Web view

A generic in-app browser (title bar + web content) used for the driver manual, FAQ, privacy policy, and announcement details.

Dialogs and overlays

Event-driven dialogs appear centered over a dimmed backdrop; some carry a countdown or a slide-to-confirm control.

New Booking. An incoming ride request. Either an auto-accept countdown ring or manual. Accept / Reject buttons with passenger details.
Start riding. “Next destination at {time}” with a countdown ring telling the driver when to set off, and a Close button.
Please Check (passengers). The passenger list for the pick-up, a count line, and an. All fine slider that unlocks confirmation.
Pick Up / Drop Off. An early-completion confirmation (“Do you really want to pick up / drop off the passenger?”) with Yes / No.
Collect Fare. “Please collect the fare from the passenger.” with a Collected button.
Change Payment Method. A radio list (Cash, POS Card, Service Credits) with Confirm / Close.
Call Passenger. Confirms placing a dispatched call to the passenger.
Cancel Ride. Confirms cancellation, with an optional reason statement and a warning when it is early relative to the communicated pick-up time.
Odometer. A numeric field to record the odometer reading at shift start/end, with range validation.
Connect Vehicle / Disconnect Vehicle. A license-plate field to connect; a confirmation to disconnect that warns about open tasks.
Ride information (shift summary). End-of-shift totals: shift start/end, ride count, distance, per-ride details, and vehicle registration and provider.
Emergency Call. A large tap-to-call control with a 10-second auto-call countdown and a. Cancel button; shows processing, success, and error states.
Announcement banner and a cancelled-task notice also appear inline over the home screen.

Components

The app uses a small in-house component set:

Buttons. Round (primary / alert, with a loading state), text (primary / secondary / alert), and icon buttons.
Dialog. A titled card with content, up to two footer buttons, an optional close button, and an optional slide-to-confirm control.
Slider. The “slide to …” control used to confirm tasks and dialogs.
Title bar. Screen/dialog header with a title and optional close button.
Alert banner and snackbar. Top-of-screen alerts and a bottom transient notice.
Radio button and toggle switch. Selection and on/off settings.
Progress. An inline spinner and circular countdown / tap-to-confirm rings.
Inputs. Themed text and numeric fields with label and error text.
Badge / counts. Small count indicators (e.g. pick-up/drop-off counts).

Visual design

The app supports a light and a dark theme; the driving surface is map-first, so most chrome is white (light) or near-black (dark) with a single accent color.

Color

Role	Light	Dark
Primary	`#3246C8`	`#4F78FF`
Background (base)	`#FFFFFF`	`#191A1B`
Background (raised)	`#FFFFFF`	`#313233`
Text	`#000000`	`#FFFFFF`
Error	`#FF0000`	`#FF0000`

Status and accent colors: success/green #00D55D, warning/orange #FF9600, danger/red #FF0000. Announcement severity uses danger (red), warning (orange), and info (primary).

Type, spacing, and shape

Typeface: the platform system font—SF Pro on iOS, Roboto on Android—with light (300), regular (400), medium (500), and bold (700) weights.
Common sizes: body 16px, small body 14px, captions/labels 12px, section headings 20–24px, large headings 36px.
Spacing: a 4px scale—2, 4, 8, 16, 24, 36, 48px.
Corner radius: ~4px on cards and inputs, ~8px on dialogs; round buttons are fully rounded (~24px tall pills).
Elevation: buttons sit low (level 1), dialogs a little higher (level 2), and the active ride card highest (level 3).