Health 360 — Dual-Interface Healthcare Platform
Designed a healthcare management platform with four distinct interfaces — patient web & mobile, doctor web & mobile — balancing medical data complexity with accessible UX across 23+ screens.
Executive Summary
Project Overview
Health 360 is a healthcare management platform serving two distinct user groups — patients and doctors — each with their own web and mobile interfaces. The core design challenge was creating four connected experiences that feel cohesive while serving fundamentally different needs: patients need clarity and accessibility; doctors need density and clinical precision.
The Challenge
Designing for healthcare introduces unique constraints:
- Dual information hierarchy: The same medical data (lab results, vitals, history) must be presented differently — simplified for patients, detailed for clinicians
- Four interfaces, one system: Patient web, patient mobile, doctor web, doctor mobile — each optimized for its context but sharing consistent data and design language
- Medical data complexity: Health metrics, trends, and diagnostic information must be accurate and understandable without overwhelming non-medical users
- Privacy-first design: HIPAA compliance means security considerations affect every interaction — data access, sharing, and communication flows
- Cross-platform parity: Features must work reliably across web and mobile without losing functionality or creating inconsistent experiences
Key Design Decisions & Tradeoffs
1. Separate dashboards per user type (vs. role-based single app)
Decision: Design distinct dashboard layouts for patients and doctors with different information hierarchies.
Tradeoff: More design and development effort (4 interfaces instead of 1 adaptive layout).
Why: Patient and doctor mental models are fundamentally different — patients think in appointments and medications; doctors think in patient queues and clinical data. A single adaptive layout would compromise both experiences.
2. Progressive disclosure for medical data
Decision: Show patients high-level health summaries with drill-down to details; show doctors comprehensive data upfront.
Tradeoff: Patients may need extra taps to reach full details.
Why: Medical data can cause anxiety when presented without context. Patients see trends and key indicators first, with full records accessible on demand. Doctors need immediate access to clinical details for decision-making.
3. Unified appointment system across interfaces
Decision: One booking and scheduling engine shared between patient and doctor interfaces.
Tradeoff: Required careful state management — a booking from the patient side must instantly reflect on the doctor’s calendar.
Why: Prevents double-bookings and ensures real-time availability is always accurate across all four interfaces.
4. Mobile-optimized health monitoring (vs. web-first)
Decision: Prioritize health tracking features (vitals, medication reminders, alerts) on mobile interfaces.
Tradeoff: Mobile apps have more health-tracking depth than web; web focuses on records and management.
Why: Health monitoring is inherently on-the-go — patients check vitals and take medications throughout the day, not at a desktop.
Solution Overview
Patient Interfaces (Web + Mobile)
- Dashboard: Health summary with upcoming appointments, active medications, and recent lab results
- Appointment booking: Search doctors, view availability, book with automated reminders
- Health monitoring: Visual charts for vitals tracking, trend analysis, and automated alerts for abnormal readings
- Medical records: Secure access to lab results, imaging reports, prescriptions, and complete medical history
- Communication: Direct messaging with healthcare providers and telemedicine consultation access
Doctor Interfaces (Web + Mobile)
- Dashboard: Patient queue, today’s schedule, pending tasks, and critical alerts
- Patient management: Comprehensive patient profiles with medical history, ongoing treatments, and notes
- Appointment calendar: Schedule management with availability settings and patient context
- Consultation tools: In-app video consultations with access to patient records during the session
- Analytics: Practice metrics, treatment outcomes, and patient engagement insights
System Thinking
States & Edge Cases
- Empty states: New patients with no medical history; doctors with no patients yet
- Loading: Skeleton screens for health data and medical records while fetching
- Error handling: Graceful fallbacks when health monitoring devices disconnect or data sync fails
- Permission behavior: Patients see only their own data; doctors access patient records based on active care relationships
- Offline support: Mobile apps handle intermittent connectivity for medication reminders and basic health logging
Shared Patterns Across Interfaces
- Appointment flow: Consistent booking, confirmation, and reminder patterns across patient and doctor views
- Notification system: Priority-based alerts (critical health alerts > appointment reminders > general updates)
- Data visualization: Consistent chart and trend styles adapted for patient clarity vs. doctor precision
Design Screens
Web Dashboard
Mobile App
Tools: Figma
Platform: Web & Mobile (iOS/Android) • Team Size: 5 Members