UI/UX Design Requirements — Items Blocking Implementation¶
Status: Active planning document Date: 2026-04-17 Session: 41 Principle: No UI implementation without design. Design → spec → implement.
Priority 1 — Blocks Wave 1-2 (Intake Restructuring + Patient UI)¶
These must be designed first. Everything else depends on the intake experience.
1.1 Progress Rail Redesign¶
Current state: 8 binary flags (procedure_identified, intake_complete, etc.) shown as ✓/○ steps.
New design needed:
Current: Target:
✓ Procedure Identified ✓ About You (Layer 1)
✓ Records Collected ◉ Health Profile (Layer 2, 70%)
○ Intake Complete ○ Travel Readiness (Layer 3)
○ Matched ◑ Planning (Layer 4+5, 20%)
○ Provider Selected ──────────────
○ Consent Given ○ Finding Matches
○ Forwarded ○ Compare & Choose
○ Closed ○ Next Steps
Design questions to resolve: - Completion ring per step (reuse EHR completeness ring pattern?) - Partially filled state (◑) visual treatment — how does 20% look different from 70%? - Non-linear completion — Layer 4 partially filled while Layer 2 is active. How to show this? - Collapsed vs. expanded states on mobile - Animation when a layer completes - Color coding by completion band
Complexity: Medium Depends on: Layer state model (Wave 1.1) Blocks: Wave 2.5
1.2 Layer Summary Cards (In-Chat)¶
Current state: No equivalent. Chat has rich cards (match_results, file_request, consent_form) but no layer completion cards.
New design needed:
┌──────────────────────────────────────────────┐
│ ✓ Health Profile Complete │
│ │
│ • Bilateral knee osteoarthritis (ICD M17.11) │
│ • Prediabetes (HbA1c 6.3%) │
│ • No blocking risk factors │
│ • 3 of 5 mandatory documents uploaded │
│ │
│ Anything I got wrong? You can correct me │
│ anytime. │
└──────────────────────────────────────────────┘
Design questions to resolve: - Visual hierarchy — how does this card differ from match_results or file_request cards? - Completed layer card vs. in-progress layer card — same design or different? - "Anything I got wrong?" interaction — tappable? Or just text? - How do multiple cards stack when 2 layers complete on same turn? - Mobile width treatment - Color/icon per layer (medical = stethoscope? travel = plane? financial = currency?)
Complexity: Low-Medium Depends on: Nothing (can design independently) Blocks: Wave 2.6
1.3 Summary Panel Redesign¶
Current state: 3 cards (Patient Info, AI Observations, Provider Brief) in the right panel Summary tab.
New design needed:
ABOUT YOU
Case type: Elective
Primary concern: Mobility limitation
Emotional readiness: Moderate anxiety
HEALTH PROFILE
Diagnosis: Bilateral knee osteoarthritis
Comorbidities: Prediabetes (HbA1c 6.3%)
Risk level: Low
Documents: 3 of 5 uploaded
TRAVEL READINESS
Transport tier: T1 — Standard
Fitness: Cleared for travel
Medical escort: Not required
PLANNING
Passport: Valid until 2028
Preferred dates: June-July 2026
Budget: $6,000-$10,000 (out-of-pocket)
Design questions to resolve: - Collapsible sections or always expanded? - How does this relate to the existing Patient Info / AI Observations / Provider Brief cards? - Replace entirely or add a 4th "Layer Summary" card? - Live update behavior (data appears as layers progress — animation? flash?) - Empty state for layers not yet started - Editable fields? (Patient corrects a value directly in summary?)
Complexity: Medium Depends on: Layer state model (Wave 1.1) Blocks: Wave 2.7
1.4 PFS / HSS / FMS Score Display¶
Current state: Match results show a single weighted score (0-1) with provider cards.
New design needed:
Three scores visible in different contexts:
In match results (patient view):
┌────────────────────────────────────────────┐
│ Acibadem Maslak, Istanbul │
│ │
│ Hospital Match 86% ←── HSS │
│ Your Readiness 78% ←── PFS │
│ Overall Fit 72% ←── FMS (derived) │
│ │
│ ⚠ Passport timeline tight │
│ ✓ Clinical fit: Excellent │
│ ✓ Within budget │
└────────────────────────────────────────────┘
In coordinator case queue:
Design questions to resolve: - Do patients see PFS/HSS/FMS labels? Or friendlier names ("Hospital Match", "Your Readiness", "Overall Fit")? - Score visualization — number? Bar? Ring? Color gradient? - PFS band indicator (Ready / Conditionally Ready / Needs Attention / Not Ready) — badge? Color? Icon? - How do PFS gaps surface? Inline text? Expandable section? - Coordinator view of scores — compact (case queue) vs. detailed (case detail)?
Complexity: Medium Depends on: PFS/HSS/FMS scoring (Wave 1.8-1.10) Blocks: Wave 2.8
Priority 2 — Blocks Wave 3-4 (Multi-tenancy + Coordination)¶
These need design before Wave 3 frontend starts (~Week 9).
2.1 Cost Estimate Display (Patient-Facing)¶
Design needed: Full cost breakdown card with categories, ranges, budget comparison.
COST ESTIMATE — TKR · Acibadem Maslak
Medical $7,200 - $8,500
Travel $1,200 - $1,800
Recovery (optional) $1,500 - $2,000
Curaway Coordination $XXX
Contingency (10%) $1,000 - $1,300
─────────────────
ESTIMATED TOTAL $10,900 - $13,600
Your budget: $6,000-$10,000
[Within range ✓ / Slightly over ⚠ / Over budget ✗]
Design questions: Expandable line items? Comparison across providers? Currency toggle? Complexity: Medium Blocks: Wave 3.7
2.2 Coordinator Dashboard¶
Design needed: Full new application for Curaway ops staff. Major design effort.
Screens: - Case queue (sortable by urgency, filterable by phase/city/transport tier) - Case detail — patient overview tab (layer summary + scores) - Case detail — timeline & transport tab (journey legs, [+ Book] actions) - Case detail — communication tab (coordinator ↔ patient chat) - Case detail — documents tab (EHR viewer + request actions) - Vendor directory (searchable, filterable) - Booking creation flow - Escalation panel (triggered by recovery alerts) - Coordinator analytics (personal dashboard)
Complexity: High — this is a new product surface Blocks: Wave 4.5, 5.6
2.3 Patient Transport Panel¶
Design needed: Dedicated section showing all transport bookings.
TRANSPORT OVERVIEW Tier: T3 Medical
─────────────────────────────────────────────────
PRE-OP
✓ Home → Airport Apr 18 Completed
✓ Airport → Hotel Apr 18 Completed
◉ Hotel → Hospital Apr 20 Driver assigned
POST-OP
○ Hospital → Recovery TBD Pending
─────────────────────────────────────────────────
Emergency contact: Coordinator Ayse · +90 555 XXX
Design questions: Where does this live? New tab in right panel? Separate page? Both? Complexity: Medium Blocks: Wave 4 (patient-facing transport)
2.4 Transport Timeline Cards (In-Chat)¶
Design needed: Per-booking cards in the patient journey timeline.
┌──────────────────────────────────────────────┐
│ Airport Pickup — Apr 20, 8:00 AM │
│ ABC Medical Transport · Medical ambulance │
│ Status: Driver assigned │
│ Istanbul Airport → Grand Hyatt Istanbul │
│ Driver details shared 24h before pickup │
└──────────────────────────────────────────────┘
Complexity: Low (follows existing rich card pattern) Blocks: Wave 4
Priority 3 — Blocks Wave 5 (Provider + MSO Portals)¶
These need design before Wave 5 frontend starts (~Week 11).
3.1 Provider Portal¶
Screens: - Case inbox (received cases with redacted patient summaries) - Patient record viewer (redacted EHR — clinical + logistics, no identity/financial) - Quote builder (procedure cost, hospital stay, follow-ups → submit quote) - Quote history - Provider analytics (leads received, response time, conversion rate) - Messaging (provider ↔ coordinator)
Complexity: High Blocks: Wave 5.3, 5.4
3.2 MSO Consultation Flow¶
Screens: - Consultation request inbox - Clinical review workspace (full EHR, documents, existing diagnosis) - Video consultation (Daily.co embedded) - Opinion submission form - Consultation report builder
Complexity: Medium-High Blocks: Wave 5.5
3.3 Admin Portal¶
Screens: - Tenant management (create, configure, deactivate) - User management (RBAC, role assignment) - Feature flag dashboard (Flagsmith UI or custom) - System health (service status, error rates) - Audit log viewer
Complexity: Medium Blocks: Wave 5.7
Priority 4 — Blocks Wave 6 (Mobile)¶
4.1 Mobile Chat Interface¶
React Native adaptation of web chat. Same functionality, native feel. Complexity: Medium (adaptation, not net-new design) Blocks: Wave 6.3
4.2 Mobile Transport Panel¶
Native transport view with push notification integration. Complexity: Low Blocks: Wave 6.6
Summary¶
| Priority | Items | Total complexity | Design needed by |
|---|---|---|---|
| P1 | Progress rail, summary cards, summary panel, score display | Medium | Week 3 (before Wave 2) |
| P2 | Cost estimate, coordinator dashboard, transport panel, timeline cards | High | Week 9 (before Wave 4) |
| P3 | Provider portal, MSO flow, admin portal | High | Week 11 (before Wave 5) |
| P4 | Mobile chat, mobile transport | Medium | Week 14 (before Wave 6) |
Total design items: 12 Critical path: P1 items must be designed in the next 2-3 weeks to avoid blocking Wave 2.