Skip to main content

Claude/ChatGPT Prompt to Design a Lab Results & Health Metrics Dashboard

Design a patient-facing lab results and health metrics dashboard: blood work trends, vital signs, reference ranges, doctor notes and insights.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Design a lab results and health metrics dashboard for MyHealthView, a patient health portal for a multi-location clinic network.

**Health data context:**
- Data sources: EHR integration (Epic/Cerner), wearable devices, manual patient entry
- Key metrics tracked: CBC, metabolic panel, lipids, A1C, thyroid, blood pressure, weight, blood glucose
- User demographics: adults 30-70, mix of tech-savvy and tech-hesitant, some elderly patients with caregivers
- Health literacy level: 6th-grade reading level with option for detailed clinical view
- Framework: React Native (mobile) + Next.js (web)

**Design the following views:**

1. **Health Overview Dashboard:**
   - Health score summary (if applicable) with trend arrow
   - Quick status cards: recent lab results, upcoming tests, metrics needing attention
   - Timeline view: all health events chronologically (labs, visits, medications, vitals)
   - "Needs attention" section: out-of-range results highlighted with severity
   - Last provider visit summary and next appointment

2. **Lab Results Viewer:**
   - Results grouped by panel (Complete Blood Count, Metabolic Panel, Lipid Panel, etc.)
   - Each result: test name, value, unit, reference range, status (normal/low/high/critical)
   - Visual indicator: green dot = normal, yellow = borderline, red = out of range
   - Historical trend chart per test (line graph with reference range band shaded)
   - Tap/click any result for plain-language explanation: "What does this mean?"
   - Compare results across dates: side-by-side table view
   - Doctor's annotations and comments attached to specific results
   - PDF download of full lab report (formatted for print or sharing)

3. **Vital Signs Tracker:**
   - Blood pressure, heart rate, weight, blood glucose, temperature, SpO2
   - Manual entry form + device sync integration (Apple Health, Google Fit, Fitbit)
   - Interactive charts: pinch-to-zoom on mobile, hover for exact values on desktop
   - Goal lines and target ranges (set by provider or patient)
   - Pattern detection alerts: "Your blood pressure has been trending up over 3 weeks"
   - Morning/evening/post-meal tagging for context-dependent metrics (glucose)

4. **Health Insights & Education:**
   - Auto-generated insights based on lab trends (written at 6th-grade reading level with option for detailed clinical view level)
   - Contextual health articles linked to out-of-range results
   - Medication impact visualization: "Since starting <medication>, your <metric> has improved by X%"
   - Lifestyle correlations: activity, sleep, and diet impact on health metrics (if data available)
   - Risk calculators: cardiovascular risk, diabetes risk based on available data

5. **Sharing & Coordination:**
   - Share results with another provider (secure link with expiration)
   - Family member access: caregiver view with permission management
   - Emergency card: critical info summary (allergies, medications, conditions, emergency contact)
   - Export for insurance or specialist referral

6. **React Native (mobile) + Next.js (web) Implementation:**
   - Chart library: Recharts (web) + Victory Native (mobile) with accessible color palettes (colorblind-safe)
   - Data visualization: reference range bands, trend lines, annotation markers
   - Responsive: dashboard grid on desktop, card-stack on mobile
   - Accessibility: all charts have tabular data alternative, screen reader descriptions
   - Performance: lazy-load historical data, cache recent results
   - Offline access to most recent results

Medical data must inspire confidence: precise numbers, clear ranges, and never leave the patient guessing whether a result is good or bad.

What this prompt does

This prompt asks Claude or ChatGPT to design a patient-facing lab results and health metrics dashboard. You define [product_name] and [platform_type], then describe the [data_sources], the [health_metrics] tracked, the [user_demographics], the [literacy_level], the [framework], and the [chart_library]. The model designs a health overview, a lab results viewer, a vital signs tracker, an insights and education section, a sharing and coordination layer, and the framework implementation.

The structure works because medical data is unforgiving — a confusing chart can scare a patient or hide a real problem. By forcing the model to honor [literacy_level] (for example a 6th-grade reading level with an optional clinical view) and to design reference-range bands and plain-language explanations, it produces output that tells the patient clearly whether a result is good or bad. The [chart_library] variable shapes the accessible, colorblind-safe visualizations.

When to use it

  • You're building a patient portal and need lab results displayed without confusing or alarming users.
  • You want reference-range bands, trend charts, and status indicators (normal, borderline, out of range) specified.
  • You need plain-language "what does this mean?" explanations tuned to a target reading level.
  • You're integrating wearable or EHR data and want a vital signs tracker with device sync laid out.
  • You need accessible, colorblind-safe charts with tabular alternatives for screen readers.
  • You want a sharing layer for caregivers, other providers, or an emergency info card.

Example output

The model returns a structured design document covering each view in order. The lab results viewer is specified down to grouping by panel, per-test status dots, shaded reference-range trend charts, and tap-to-explain plain-language text. The vital signs tracker covers manual entry plus device sync and pattern-detection alerts. The closing [framework] section translates everything into chart-library choices, accessibility requirements, lazy-loading, and offline access. You get a detailed, accessibility-first spec rather than finished code.

Pro tips

  • Set [literacy_level] deliberately; it controls the reading level of every auto-generated insight and explanation.
  • List [health_metrics] precisely so the lab viewer groups results into the right panels (CBC, lipids, A1C, and so on).
  • Match [data_sources] to reality — EHR plus wearable plus manual entry each implies different sync and trust indicators.
  • Pin [chart_library] to one you'll actually use so the colorblind-safe palette and tabular-alternative notes apply.
  • Ask the model to expand the insights section if you want medication-impact and lifestyle-correlation visuals detailed.
  • Stress that no result display should leave the patient guessing — re-prompt any section that omits clear good/bad status.

Frequently Asked Questions

Will the dashboard explain lab results in plain language?
Yes. The design includes tap-to-explain plain-language descriptions and auto-generated insights written at the reading level you set in `[literacy_level]`, so patients understand what each result means without medical jargon.
Can it handle data from wearables and an EHR together?
Yes. You describe your `[data_sources]`, and the vital signs tracker is designed for manual entry plus device sync from sources like Apple Health, Google Fit, or Fitbit, alongside EHR-integrated lab data.
Are the charts accessible for colorblind or screen-reader users?
The prompt explicitly requires colorblind-safe palettes, tabular data alternatives for every chart, and screen reader descriptions. It designs for accessibility from the start rather than treating it as an afterthought.
Does it design for both mobile and web?
Yes, when your `[framework]` spans both. The layout adapts to a dashboard grid on desktop and a card-stack on mobile, with charts that support hover on desktop and pinch-to-zoom on mobile.
Can I change the literacy level for a clinical audience?
Yes. Raise `[literacy_level]` or request the detailed clinical view, and the insights and explanations shift toward precise medical terminology suited to clinicians or health-literate patients.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Healthcare UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support