🔔 🎁 👤
TP
Test Patient
45 yo Male • DOB 01/01/1980
⚠️ Allergies: 2 Active
📏 BMI: 26.5
🕐 Last: Nov 20
📅 Next: Jan 16
🩸 A1C: 7.8%
🩺 BP: 142/88
💉 Lipid: Overdue
🔬 Colorectal: Due
💉 Flu:
💡 Compact Pill Design: This streamlined version uses inline pills that take minimal horizontal space. Each pill shows icon + short label + value. Hover for full details via tooltip. Pills wrap naturally without horizontal scrolling.
Example 1: 45yo Male with Diabetes & Hypertension

What's Shown (see status bar above):

  • Allergies: 2 active (Penicillin, Sulfa) - RED with pulsing alert
  • BMI: 26.5 (hover shows Ht/Wt)
  • Last/Next Visit: Compact date display
  • A1C: 7.8% - YELLOW warning (above goal)
  • BP: 142/88 - YELLOW warning (above goal)
  • Lipid: Overdue - YELLOW
  • Colorectal: Due - YELLOW
  • Flu: ✓ - GREEN

Why These Items?

  • A1C shown because "Diabetes" in problem list → automatic
  • Average BP shown because "Hypertension" in problem list → automatic
  • Preventive care shown because age 45 → automatic
SM
Sarah Miller
28 yo Female • DOB 03/15/1996
👶 20w 3d EDD: May 15, 2025
Allergies: NKDA
📏 BMI: 22.9
🕐 Last: Oct 5
📅 Next: Dec 20
🤰 Prenatal: Complete
💉 Flu:
🔬 GBS: Due wk 36
Example 2: 28yo Pregnant Female (20 weeks)

What's Shown:

  • Pregnancy Badge: Combined badge showing "20w 3d • EDD: May 15, 2025" - GA slightly muted, EDD bold
  • Allergies: NKDA - GREEN (no concerns)
  • BMI: 22.9 - Normal
  • Visit Dates: Last and next prenatal visits
  • Prenatal Labs: Complete
  • Flu Vaccine: Current - important for pregnancy
  • GBS Screen: Due at week 36 (gestational age aware)

Smart Adaptations:

  • System detects "Pregnancy" → shows combined GA/EDD badge in header
  • Hides age-based screenings not relevant during pregnancy
  • Tracks gestational-age-appropriate tests automatically
Design Benefits

Compact Pill Design Advantages:

  • Minimal footprint: Each pill is ~80-120px wide vs 100-120px boxes
  • No horizontal scroll: Pills wrap naturally to next line
  • Scannable: Icon + label + value in one glance
  • Hover for details: Full context via tooltip
  • Color-coded urgency: Red/Yellow/Green borders and backgrounds
  • Responsive: Works on any screen width