Patterns for building Electronic Medical Record (EMR) and Electronic Health Record (EHR) systems. Prioritizes patient safety, clinical accuracy, and practitioner efficiency.
Every design decision must be evaluated against: "Could this harm a patient?"
Clinical encounters should flow vertically on a single page — no tab switching:
Patient Header (sticky — always visible)
├── Demographics, allergies, active medications
│
Encounter Flow (vertical scroll)
├── 1. Chief Complaint (structured templates + free text)
├── 2. History of Present Illness
├── 3. Physical Examination (system-wise)
├── 4. Vitals (auto-trigger clinical scoring)
├── 5. Diagnosis (ICD-10/SNOMED search)
├── 6. Medications (drug DB + interaction check)
├── 7. Investigations (lab/radiology orders)
├── 8. Plan & Follow-up
└── 9. Sign / Lock / Print
interface ClinicalTemplate {
id: string;
name: string; // e.g., "Chest Pain"
chips: string[]; // clickable symptom chips
requiredFields: string[]; // mandatory data points
redFlags: string[]; // triggers non-dismissable alert
icdSuggestions: string[]; // pre-mapped diagnosis codes
}
Red flags in any template must trigger a visible, non-dismissable alert — NOT a toast notification.
User selects drug
→ Check current medications for interactions
→ Check encounter medications for interactions
→ Check patient allergies
→ Validate dose against weight/age/renal function
→ If CRITICAL interaction: BLOCK prescribing entirely
→ Clinician must document override reason to proceed past a block
→ If MAJOR interaction: display warning, require acknowledgment
→ Log all alerts and override reasons in audit trail
Critical interactions block prescribing by default. The clinician must explicitly override with a documented reason stored in the audit trail. The system never silently allows a critical interaction.
Once a clinical encounter is signed:
Vitals Display: Current values with normal range highlighting (green/yellow/red), trend arrows vs previous, clinical scoring auto-calculated (NEWS2, qSOFA), escalation guidance inline.
Lab Results Display: Normal range highlighting, previous value comparison, critical values with non-dismissable alert, collection/analysis timestamps, pending orders with expected turnaround.
Prescription PDF: One-click generation with patient demographics, allergies, diagnosis, drug details (generic + brand, dose, route, frequency, duration), clinician signature block.
Healthcare UIs have stricter requirements than typical web apps:
any type for clinical data structuresDoctor opens encounter for Patient #4521
→ Sticky header shows: "Rajesh M, 58M, Allergies: Penicillin, Active Meds: Metformin 500mg"
→ Chief Complaint: selects "Chest Pain" template
→ Clicks chips: "substernal", "radiating to left arm", "crushing"
→ Red flag "crushing substernal chest pain" triggers non-dismissable alert
→ Examination: CVS system — "S1 S2 normal, no murmur"
→ Vitals: HR 110, BP 90/60, SpO2 94%
→ NEWS2 auto-calculates: score 8, risk HIGH, escalation alert shown
→ Diagnosis: searches "ACS" → selects ICD-10 I21.9
→ Medications: selects Aspirin 300mg
→ CDSS checks against Metformin: no interaction
→ Signs encounter → locked, addendum-only from this point
Doctor prescribes Warfarin for Patient #4521
→ CDSS detects: Warfarin + Aspirin = CRITICAL interaction
→ UI: red non-dismissable modal blocks prescribing
→ Doctor clicks "Override with reason"
→ Types: "Benefits outweigh risks — monitored INR protocol"
→ Override reason + alert stored in audit trail
→ Prescription proceeds with documented override
Encounter #E-2024-0891 signed by Dr. Shah at 14:30
→ All fields locked — no edit buttons visible
→ "Add Addendum" button available
→ Dr. Shah clicks addendum, adds: "Lab results received — Troponin elevated"
→ New record E-2024-0891-A1 linked to original
→ Timeline shows both: original encounter + addendum with timestamps