Overview
Today translates our data structure into a human-readable interface. The prime directive for this healthcare application is clarity and calm. We aim to reduce anxiety for patients and ensure quick data scanning for doctors.
1. The Color Palette: Soothing & Trustworthy
We avoid harsh bright colors or depressive dark themes. The palette is designed to look clean and professional.
Primary Palette (Brand Core)
| Role | Color Code | Description |
|---|---|---|
| Primary Brand | #3B82F6 (Slate Blue) | Calm, professional, stable. Used for headers/buttons. |
| Secondary | #10B981 (Emerald Green) | Health, healing, positive outcomes. Used for success states. |
| Background | #F3F4F6 (Cool Gray) | Softer than pure white to reduce eye strain. |
| Surface | #FFFFFF (Pure White) | Used for cards and containers. |
Typography & States
| Role | Color Code | Usage |
|---|---|---|
| Primary Text | #1F2937 (Soft Black) | High contrast, readable but gentle. |
| Secondary Text | #6B7280 (Medium Gray) | Metadata, dates, labels. |
| Error / Alert | #EF4444 (Soft Red) | Clear indication of issues without being alarming. |
2. Screen Flow Diagram
We have two distinct user flows (Patient vs Doctor) sharing a common entry point.
3. Screen Structure (The Blueprint)
General Rule: Standard top nav with App Logo (Left) and Profile Dropdown (Right).
Common Screen: Login / Sign Up
- Goal Secure entry.
- Fields Email (Input), Password (Obscured).
- Actions "Secure Sign In" (Primary), "Sign in with Google" (Secondary).
Role: Patient Screens
Screen P1: Dashboard (Home)
- Welcome Header: "Hello, {displayName}."
- Action Card: Title "Add New Lab Results", Button "Upload PDF Report".
- Recent History: Grid/List of max 5 recent reports with status icons.
Screen P2: Report Details
- Header: Back Button + "Report from {testDate}".
- Original File: "Download Original PDF" button.
- Results Card: Two-column layout (Test Name vs Result Value) displaying parsed AI data.
Role: Doctor Screens
Screen D1: Dashboard (Patient List)
- Search: "Search patients by name..."
- List: Patient Cards with Avatar, Name, and DOB.
- Action: Click card navigates to Chart View.
Screen D2: Patient Chart View
- Header: Patient Profile (Name, Email, DOB).
- Tabs: [ Lab Results ] | [ Appointments ].
- Content: List of labs (opens details) OR Appointment calendar.
4. User Feedback Messaging
Feedback must be immediate to maintain trust.
Toast Notifications (Passive)
(Triggered after file upload)
(Triggered after scheduling)
(Triggered on network failure)
Inline Alerts (Active)
(Located above Sign In button)
(Located below file picker)
Summary of Day 3
We have defined the visual language (Slate Blues and Emerald Greens) and the structural blueprint. We have mapped out how users move through the app and how the system communicates status back to them.
Next Step (Day 4): Application flow design. We will define the exact technical triggers and API calls that occur on every button click.