Mobile · Pass 1

Schedule → Appointment → Check-in

Clickable HTML mockups of the provider mobile experience, for the Nigeria demo variant. Design only - no app code. Walk the flow below, or open the schedule and tap a Booked card.

Appearance

Theme and variant are remembered across the screens (stored locally). The Nigeria and US variants share the same teal palette today, matching the app - variant swap is wired for future reskins.

Walk the flow

1 Schedule (home)Day agenda, week strip, queue banner, status chips 2 Appointment detailBola Adeyemi · Follow-up · actions & check-in sheet 3 Check-in confirmationArrived + queue token, back to an updated schedule
Start at the schedule

Pass 2 · Patient chart

1 Patient chartHeader + segmented Visits · Billing · Medical 2 Visit detailRecord blocks (vitals, notes, Rx, follow-up) + Add records sheet

Reached in the flow from Appointment detail → “Open patient chart”. Uses Bola Adeyemi, the patient checked in during Pass 1.

Pass 3 · Telemedicine consult

1 Waiting roomPatient online · self-preview · Join call 2 In-callPiP video · timer · mic/camera/chat/end · chat sheet

Entered from the patient chart’s consult banner or Appointment → “Start consult”. Simulated video (no WebRTC), persisted-style chat with a canned patient reply - matching the web app.

Pass 4 · Billing money flow

1 New bill → invoiceVisit → line items (add/edit) → totals → payment 2 ReceiptReceipt No · invoice · mode · balance · print/share 3 Billing history (ledger)Running balance · credit / debit

Entered from the chart’s Billing segment (New bill FAB, Refund, View billing history). Items search surfaces planned procedures first; advance, refunds (CN-) and PAID/DUE match the web app.

Pass 5 · New appointment booking

1 New appointmentPatient (search / new) · doctor · type · date/time · procedures 2 Booked → scheduleSuccess toast on the agenda

Entered from the schedule’s centre “+”. Appointment / Reminder / Block tabs; patient search sheet with inline new-patient quick-add; required name + doctor + date + time.

Pass 6 · Patients list + search

1 PatientsToday / Recent / All (A-Z) · search · add patient

The bottom-tab “Patients”. Today splits Due/Met with a waiting badge; search matches name/number/phone/email (folds in the web’s global top-bar search); rows open the chart.

Pass 7 · More, Communications & messaging

1 More hubCommunications, Reports, Settings, Account… 2 Communications (reports)SMS / Email delivery + credit usage 3 Follow-up chat (gated)From appointment/chart · needs an active appointment or subscription

Bottom nav is 4 icons (Schedule · Patients · ⊕ · More). Communications is reports only (no inbox), under More. Chat isn’t a tab - it’s gated follow-up messaging reached from an active appointment. The video-call chat (Pass 3) is separate.

Pass 8 · More sub-pages

1 Reports7 categories · date range · chart/table · send Excel 2 InventoryDrugs / Supplies / Equipments · stock filter · item sheets 3 ExpensesFilters · list + total · add expense 4 SettingsSection hub · Practice / Comms / Pricing / Auto ID · tier placeholders 5 AccountProfile · subscriptions / store · account settings

Reached from the bottom-tab More. Each row that was a “later pass” stub is now a real screen. Settings and Account are single-file hubs: tap a section to push into it, Back returns to the index.

Pass 9 · Polish & states

1 Swipe & pull-to-refreshOn the schedule: swipe a card left for Check in / Cancel; pull down to refresh 2 Loading stateSkeleton placeholders while the agenda loads 3 Empty stateA day with no appointments + Book action 4 Error stateCouldn’t load + Retry (schedule). Patients has one too 5 Patients · error + refreshError/Retry, pull-to-refresh and loading on the list

Interaction polish on the two busiest lists. Swipe a schedule card left (drag with the mouse on desktop) to reveal Check in / Cancel; pull down from the top to refresh. Loading, empty and error states are reachable via the links above (or ?state=loading|empty|error).

Pass 10 · Treatment Communications

1 Plans listClinic-wide reminder & article plans; create a new one 2 Plan detail + editorWeeks/days timeline; Add Reminder (255) & Add Article (rich text) 3 Apply to a patientChart → Medical → Schedule Communication

The web app’s Treatment Communications, on mobile. Author reusable plans (reminders + education articles over weeks), then apply one to a patient from the chart. Reached from More → Treatment communications. Rich text uses a lightweight mock toolbar.

Viewing on desktop shows a phone frame; on a phone each screen fills the viewport. All colours come from the copied theme tokens - nothing hardcoded.