Patient Portal & Mobile App Screen Requirements
Home / Portals & Mobile Apps / Patient Portal & Mobile App / Screen Requirements

Patient Portal & Mobile App Screen Requirements

Screen Inventory

Screen ID Screen Name Primary Actor(s) Workflow(s) Access Level
SCR-PATIENTPORTAL-001 Portal Dashboard / Home Patient, Parent/Guardian (Proxy) WF-PPT-002, WF-PPT-003, WF-PPT-004, WF-PPT-005, WF-PPT-006, WF-PPT-007, WF-PPT-008 Authenticated portal users (patient or proxy)
SCR-PATIENTPORTAL-002 Appointment Scheduling Patient, Parent/Guardian (Proxy) WF-PPT-002 Authenticated portal users with booking rights
SCR-PATIENTPORTAL-003 Health Records Viewer Patient, Parent/Guardian (Proxy) WF-PPT-003 Authenticated portal users with view_own_records / proxy rights
SCR-PATIENTPORTAL-004 Secure Messaging Patient, Parent/Guardian (Proxy), Provider WF-PPT-004 Authenticated portal users and providers
SCR-PATIENTPORTAL-005 Prescription Management Patient, Parent/Guardian (Proxy) WF-PPT-005 Authenticated portal users with request_refills
SCR-PATIENTPORTAL-006 Billing & Payments Patient, Parent/Guardian (Proxy) WF-PPT-006 Authenticated portal users with pay_bills
SCR-PATIENTPORTAL-007 Telehealth Visit Patient, Provider WF-PPT-007 Authenticated portal users with telehealth-enabled appointments
SCR-PATIENTPORTAL-008 Digital Forms & Consent Patient, Parent/Guardian (Proxy) WF-PPT-001, WF-PPT-008 Authenticated portal users with submit_forms / manage_consents
SCR-PATIENTPORTAL-009 Profile & Settings Patient, Parent/Guardian (Proxy) WF-PPT-001 (preferences), WF-PPT-008 (demographics updates) Authenticated portal users
SCR-PATIENTPORTAL-010 Registration / Onboarding Patient, Registration Clerk (assisted) WF-PPT-001 Public (pre-auth) + assisted mode for staff
flowchart LR %% Entry points A["Public Landing / Login<br>SCR-PATIENTPORTAL-010"] --> B{"Authenticated?"} B -->|"Yes"| C["Portal Dashboard / Home<br>SCR-PATIENTPORTAL-001"] B -->|"No - New User"| D["Registration / Onboarding<br>SCR-PATIENTPORTAL-010"] D --> C %% Main navigation from Dashboard C --> E["Appointment Scheduling<br>SCR-PATIENTPORTAL-002"] C --> F["Health Records Viewer<br>SCR-PATIENTPORTAL-003"] C --> G["Secure Messaging<br>SCR-PATIENTPORTAL-004"] C --> H["Prescription Management<br>SCR-PATIENTPORTAL-005"] C --> I["Billing & Payments<br>SCR-PATIENTPORTAL-006"] C --> J["Telehealth Visit<br>SCR-PATIENTPORTAL-007"] C --> K["Digital Forms & Consent<br>SCR-PATIENTPORTAL-008"] C --> L["Profile & Settings<br>SCR-PATIENTPORTAL-009"] %% Cross-links E --> K E --> J F --> K G --> F H --> G I --> G K --> F L --> C %% Notifications deep links M["Push / Email / SMS Notification"] -->|"Result Ready"| F M -->|"New Message"| G M -->|"Bill Available"| I M -->|"Telehealth Starting"| J M -->|"Form Required"| K

Screen Specifications

SCR-PATIENTPORTAL-001: Portal Dashboard / Home

Purpose

Single entry point after login showing a personalized overview: health summary, upcoming appointments, recent results, unread messages, outstanding balance, and quick actions. Must support bilingual English/Arabic with RTL layout when Arabic is selected.

Field Specifications

Field Type Required Validation Default Notes
Language Toggle (EN/AR) Button group Yes Value ∈ {en, ar} From portal_preferences.language or browser Switches UI language and direction (LTR/RTL)
Patient / Dependent Selector Dropdown / pill list Yes (if multiple) Must be valid linked patient Primary patient For proxies; changes patient context across dashboard widgets
Health Summary Panel Composite display N/A Read-only — Shows active problems, allergies, medications count, last visit
Upcoming Appointments List List N/A Read-only — Next 3 appointments with type, provider, location/telehealth
Recent Results Panel List N/A Read-only — Last 5 lab/radiology results released to portal
Unread Messages Count Badge N/A Read-only 0 From portal_messages where recipient = account and unread
Outstanding Balance Currency display N/A Read-only 0.00 From billing; shows total due for selected patient
Quick Action: Book Appointment Button No — — Navigates to SCR-PATIENTPORTAL-002
Quick Action: View Records Button No — — Navigates to SCR-PATIENTPORTAL-003
Quick Action: Message Provider Button No — — Navigates to SCR-PATIENTPORTAL-004 (compose)
Quick Action: Pay Bill Button No — — Navigates to SCR-PATIENTPORTAL-006
Notification Bell Icon button No — — Opens recent portal_notifications list
Security Banner Info text N/A — Shown on first login Brief PDPL notice + link to privacy policy

HTML Wireframe Mockup (Dashboard)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 1100px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <!-- Header -->
  <div style="background: #0b6fa4; color: white; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;">
    <div>
      <h3 style="margin: 0;">Patient Portal Dashboard</h3>
      <small>Sheikh Khalifa Medical City</small>
    </div>
    <div style="display: flex; gap: 12px; align-items: center;">
      <select aria-label="Select patient" style="padding: 4px 8px; border-radius: 4px;">
        <option>Ahmed Al-Maktoum</option>
        <option>Omar Al-Maktoum (Child)</option>
      </select>
      <button type="button" style="padding: 4px 10px; border-radius: 4px; border: none; background: #fff; color: #0b6fa4;">EN</button>
      <button type="button" style="padding: 4px 10px; border-radius: 4px; border: none; background: transparent; color: #fff;">العربية</button>
      <button type="button" aria-label="Notifications" style="background: transparent; border: none; color: #fff; font-size: 18px;">🔔</button>
    </div>
  </div>

  <!-- Body -->
  <div style="padding: 20px; background: #f7f9fb;">
    <!-- Quick actions -->
    <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;">
      <button style="flex: 1; min-width: 150px; padding: 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #0b6fa4; color: #fff;">Book Appointment</button>
      <button style="flex: 1; min-width: 150px; padding: 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4;">View Health Records</button>
      <button style="flex: 1; min-width: 150px; padding: 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4;">Message Provider</button>
      <button style="flex: 1; min-width: 150px; padding: 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4;">Pay Bill</button>
    </div>

    <!-- Main grid -->
    <div style="display: grid; grid-template-columns: 2fr 1.5fr; gap: 16px;">
      <!-- Left column -->
      <div>
        <div style="background: #fff; border-radius: 4px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid #ddd;">
          <h4 style="margin-top: 0;">Health Summary</h4>
          <div style="display: flex; justify-content: space-between;">
            <div>
              <strong>Allergies:</strong> Penicillin<br/>
              <strong>Problems:</strong> Hypertension, Type 2 Diabetes
            </div>
            <div>
              <strong>Last Visit:</strong> 12 Jan 2026<br/>
              <strong>Next Visit:</strong> 20 Feb 2026
            </div>
          </div>
        </div>

        <div style="background: #fff; border-radius: 4px; padding: 12px 16px; border: 1px solid #ddd;">
          <h4 style="margin-top: 0;">Recent Results</h4>
          <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
            <thead>
              <tr>
                <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Date</th>
                <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Test</th>
                <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Result</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td style="padding: 4px;">05 Feb 2026</td>
                <td style="padding: 4px;">HbA1c</td>
                <td style="padding: 4px;">7.2 % (High)</td>
              </tr>
              <tr>
                <td style="padding: 4px;">01 Feb 2026</td>
                <td style="padding: 4px;">Chest X-Ray</td>
                <td style="padding: 4px;">Report available</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Right column -->
      <div>
        <div style="background: #fff; border-radius: 4px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid #ddd;">
          <h4 style="margin-top: 0;">Upcoming Appointments</h4>
          <ul style="list-style: none; padding-left: 0; margin: 0;">
            <li style="padding: 6px 0; border-bottom: 1px solid #eee;">
              20 Feb 2026, 10:00 — Dr. Fatima Al-Nahyan (Telehealth)
            </li>
            <li style="padding: 6px 0;">
              15 Mar 2026, 09:00 — Cardiology Clinic, Dubai
            </li>
          </ul>
        </div>

        <div style="background: #fff; border-radius: 4px; padding: 12px 16px; border: 1px solid #ddd;">
          <h4 style="margin-top: 0;">Billing Summary</h4>
          <p style="margin: 0 0 8px 0;"><strong>Outstanding Balance:</strong> AED 350.00</p>
          <button style="padding: 8px 12px; border-radius: 4px; border: none; background: #0b6fa4; color: #fff;">Pay Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

Validation Messages

Condition Message Type
Failed to load dashboard data "We could not load your dashboard. Please refresh or try again later." Error
No upcoming appointments "You have no upcoming appointments. Book a new appointment." Info
No recent results "No new results have been released to your portal." Info
Proxy has no linked dependents "No dependent records are linked to this account. Contact registration to add a dependent." Warning

Actions / Buttons

  • Book Appointment: Navigate to SCR-PATIENTPORTAL-002 with current patient context.
  • View Health Records: Navigate to SCR-PATIENTPORTAL-003.
  • Message Provider: Navigate to SCR-PATIENTPORTAL-004 (compose view).
  • Pay Bill: Navigate to SCR-PATIENTPORTAL-006 with billing context.
  • Notification Bell: Open overlay listing recent portal_notifications; clicking an item deep-links to relevant screen.
  • Language Toggle: Persist selection in portal_preferences.language; reload UI strings and switch direction to RTL for Arabic.

Accessibility (WCAG 2.1 AA)

  • All interactive elements reachable via keyboard (Tab/Shift+Tab); visible focus outline.
  • ARIA landmarks: <header>, <nav>, <main> equivalents for screen readers.
  • Notification badge announced via aria-live="polite" when unread count changes.
  • Language toggle uses lang attribute and dir="rtl" for Arabic.
  • Colour contrast for text/buttons meets 4.5:1 minimum.

Responsive / Mobile

  • On screens < 768px:
  • Layout collapses to single column; quick actions become stacked buttons.
  • Tables (recent results) become card-style rows with key-value pairs.
  • Patient selector and language toggle move into a top app bar / hamburger menu.
  • Native mobile apps mirror structure but use platform navigation (tab bar: Home, Appointments, Records, Messages, More).

SCR-PATIENTPORTAL-002: Appointment Scheduling

Purpose

Allow patients and proxies to search for providers, view available slots, select appointment type (including telehealth), and book/reschedule/cancel appointments via integration with Scheduling (WF-PPT-002).

Field Specifications

Field Type Required Validation Default Notes
Patient / Dependent Context Read-only banner Yes Must be valid linked patient Current context Shows patient name, Emirates ID, DOB
Provider Search Text input (autocomplete) No Min 2 chars to search Empty Searches by provider name, clinic, facility
Specialty Filter Dropdown No Value ∈ configured specialties Empty (all) Multi-language labels
Location Filter Dropdown No Value ∈ facilities/locations Empty (all) For multi-facility groups
Appointment Type Radio group Yes ∈ In-person Telehealth availability depends on provider
Date Picker Calendar Yes Date ≥ today; within scheduling horizon Today Shows available days based on slot data
Time Slot List Button list Yes (to book) Slot must be free at selection time — Shows time, provider, location; disabled if no slots
Reason for Visit Textarea / dropdown Recommended Max 250 chars Empty Optional but encouraged for triage
Insurance / Self-pay Indicator Dropdown No ∈ From EHR For referral/authorization checks
Pre-visit Questionnaire Link Link/button Conditional Shown if required — Navigates to SCR-PATIENTPORTAL-008 for forms
Confirm Button Button Yes All required fields valid Disabled until valid Creates appointment via Scheduling API
Reschedule / Cancel Controls Buttons per existing appointment Conditional Facility cancellation rules (e.g., ≥24h) — For managing existing appointments

HTML Wireframe Mockup (Appointment Scheduling)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px;">
  <div style="background: #0b6fa4; color: #fff; padding: 12px 20px;">
    <h3 style="margin: 0;">Book an Appointment</h3>
    <small>For: Ahmed Al-Maktoum (Emirates ID: 784-1990-1234567-1)</small>
  </div>
  <div style="padding: 16px; background: #f7f9fb;">
    <!-- Search filters -->
    <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;">
      <input type="text" placeholder="Search provider or clinic" style="flex: 2; min-width: 180px; padding: 6px; border-radius: 4px; border: 1px solid #ccc;"/>
      <select style="flex: 1; min-width: 140px; padding: 6px; border-radius: 4px; border: 1px solid #ccc;">
        <option>All Specialties</option>
        <option>Cardiology</option>
        <option>Endocrinology</option>
      </select>
      <select style="flex: 1; min-width: 140px; padding: 6px; border-radius: 4px; border: 1px solid #ccc;">
        <option>All Locations</option>
        <option>Dubai Clinic</option>
        <option>Abu Dhabi Main Hospital</option>
      </select>
    </div>

    <!-- Appointment type -->
    <div style="margin-bottom: 12px;">
      <strong>Appointment Type:</strong>
      <label style="margin-left: 8px;"><input type="radio" name="appt_type" checked/> In-person</label>
      <label style="margin-left: 8px;"><input type="radio" name="appt_type"/> Telehealth</label>
    </div>

    <!-- Date and slots -->
    <div style="display: grid; grid-template-columns: 1.2fr 2fr; gap: 16px;">
      <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
        <h4 style="margin-top: 0;">Select Date</h4>
        <div style="height: 220px; border: 1px solid #eee; border-radius: 4px; text-align: center; padding-top: 80px; color: #888;">
          [Calendar Widget]
        </div>
      </div>
      <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
        <h4 style="margin-top: 0;">Available Time Slots</h4>
        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
          <button style="padding: 6px 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #0b6fa4; color: #fff;">09:00</button>
          <button style="padding: 6px 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4;">09:30</button>
          <button style="padding: 6px 10px; border-radius: 4px; border: 1px solid #ccc; background: #eee; color: #999;" disabled>10:00 (Booked)</button>
        </div>
        <div style="margin-top: 10px;">
          <label>Reason for visit</label><br/>
          <textarea rows="2" style="width: 100%; padding: 6px; border-radius: 4px; border: 1px solid #ccc;"></textarea>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div style="margin-top: 16px; display: flex; justify-content: flex-end; gap: 8px;">
      <button style="padding: 8px 12px; border-radius: 4px; border: 1px solid #ccc; background: #fff;">Cancel</button>
      <button style="padding: 8px 16px; border-radius: 4px; border: none; background: #0b6fa4; color: #fff;">Confirm Appointment</button>
    </div>
  </div>
</div>

Validation Messages

Condition Message Type
No provider or specialty selected and no slots found "No appointments are available for the selected criteria. Please adjust your filters or choose another date." Info
Appointment type not selected "Please select an appointment type." Error
Date in the past "You cannot book an appointment in the past. Please select a future date." Error
Slot becomes unavailable before confirmation "The selected time slot is no longer available. Please choose another slot." Error
Cancellation within restricted window "This appointment cannot be cancelled online within 24 hours of the visit. Please call the clinic." Error
Missing required pre-visit forms "This appointment requires pre-visit forms. Please complete them before confirming." Warning

Actions / Buttons

  • Confirm Appointment: Validate fields; call Scheduling API; on success show confirmation with ICS download and send portal_notifications + SMS/email.
  • Cancel Appointment: Return to dashboard or previous screen without booking.
  • Reschedule (on existing appointment): Opens same screen with existing appointment context; after successful reschedule, cancels original appointment via Scheduling API.
  • Cancel Existing Appointment: Calls Scheduling API; updates appointment status and sends notifications.

Accessibility

  • Calendar widget supports keyboard navigation (arrow keys, Enter to select date).
  • Time slots are buttons with aria-pressed for selected state.
  • Error messages associated with fields via aria-describedby.
  • Clear text labels for all filters; icons (e.g., telehealth) accompanied by text.

Responsive / Mobile

  • Filters collapse into an accordion at top; calendar may switch to a date list or native date picker on mobile.
  • Time slots displayed as vertical list with large tap targets (≥44px height).
  • Sticky bottom bar on mobile with selected date/time summary and Confirm button.

SCR-PATIENTPORTAL-003: Health Records Viewer

Purpose

Provide patients with structured access to their clinical information (problems, allergies, medications, lab results with charts, radiology reports, immunizations, clinical notes, vitals) and export options (PDF, FHIR) as per UAE PDPL data access rights (WF-PPT-003).

Field Specifications

Field Type Required Validation Default Notes
Patient Banner Composite Yes Read-only — Shows name, Emirates ID, DOB, sex, primary facility
Record Category Tabs Tab list Yes ∈ Summary Controls visible panel
Date Range Filter Date pickers No From ≤ To; within available data Last 6 months Applies to results, notes, vitals
Lab Results Table Table N/A Read-only — Columns: Date, Test, Result, Reference Range, Status
Lab Trend Chart Chart N/A Read-only — For selected numeric LOINC-coded tests
Radiology Reports List List N/A Read-only — Each item: date, modality, body part, "View report"
Medications List List N/A Read-only — Active vs historical; RxNorm codes behind the scenes
Clinical Notes List List N/A Read-only — Subject, date, provider; may be delayed per release rules
Download PDF Button Button No — — Generates bilingual PDF summary
FHIR Export Button Button No — — Triggers FHIR R4 export (e.g., Bundle) for patient
Result Explanation Tooltip Tooltip No — — Plain-language explanation for selected result

HTML Wireframe Mockup (Health Records Viewer)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px;">
  <div style="background: #0b6fa4; color: #fff; padding: 12px 20px;">
    <h3 style="margin: 0;">Health Records</h3>
    <small>Patient: Ahmed Al-Maktoum | Emirates ID: 784-1990-1234567-1</small>
  </div>
  <div style="padding: 16px; background: #f7f9fb;">
    <!-- Tabs -->
    <div style="display: flex; border-bottom: 1px solid #ddd; margin-bottom: 10px;">
      <button style="padding: 8px 12px; border: none; border-bottom: 3px solid #0b6fa4; background: transparent;">Summary</button>
      <button style="padding: 8px 12px; border: none; border-bottom: 3px solid transparent; background: transparent;">Lab Results</button>
      <button style="padding: 8px 12px; border: none; border-bottom: 3px solid transparent; background: transparent;">Radiology</button>
      <button style="padding: 8px 12px; border: none; border-bottom: 3px solid transparent; background: transparent;">Medications</button>
      <!-- etc. -->
      <div style="flex: 1;"></div>
      <button style="padding: 6px 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4; margin-right: 6px;">Download PDF</button>
      <button style="padding: 6px 10px; border-radius: 4px; border: 1px solid #0b6fa4; background: #0b6fa4; color: #fff;">FHIR Export</button>
    </div>

    <!-- Filters -->
    <div style="margin-bottom: 10px;">
      <label>From: <input type="date" style="margin-right: 8px;"/></label>
      <label>To: <input type="date"/></label>
    </div>

    <!-- Example: Lab Results -->
    <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
      <h4 style="margin-top: 0;">Lab Results</h4>
      <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
        <thead>
          <tr>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Date</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Test</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Result</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Reference</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding: 4px;">05 Feb 2026</td>
            <td style="padding: 4px;">HbA1c</td>
            <td style="padding: 4px;">7.2 % <span title="Higher than normal. Indicates suboptimal diabetes control." style="color:#c00;">(High)</span></td>
            <td style="padding: 4px;">4.0 - 6.0 %</td>
            <td style="padding: 4px;">Final</td>
          </tr>
        </tbody>
      </table>
      <div style="margin-top: 12px; height: 180px; border: 1px solid #eee; border-radius: 4px; text-align: center; padding-top: 70px; color: #888;">
        [Trend Chart for HbA1c]
      </div>
    </div>
  </div>
</div>

Validation Messages

Condition Message Type
From date after To date "The 'From' date must be before the 'To' date." Error
No records in selected range "No records found for the selected period." Info
FHIR export failure "We could not prepare your data export. Please try again later or contact support." Error
Restricted note not yet released "This note is not yet available in the portal as per facility policy." Info

Actions / Buttons

  • Category Tabs: Switch visible dataset; maintain filters where applicable.
  • Download PDF: Generate bilingual PDF summary; prompt browser download or open in viewer.
  • FHIR Export: Initiate asynchronous export; show progress and provide download link or send via secure message.
  • Result Row Click: Open detailed view with full interpretation and history.

Accessibility

  • Tabs implemented with ARIA role="tablist", role="tab", role="tabpanel".
  • Charts accompanied by textual summary for screen readers.
  • Tooltips accessible via keyboard (e.g., focusable icons) and not hover-only.
  • Export buttons have descriptive labels (e.g., "Download your health summary as PDF").

Responsive / Mobile

  • Tabs become horizontally scrollable or a dropdown selector.
  • Tables convert to stacked cards; each row becomes a card with key fields.
  • Charts may be simplified or hidden behind a "View trend" link to reduce clutter.

SCR-PATIENTPORTAL-004: Secure Messaging

Purpose

Enable secure, asynchronous communication between patients/proxies and providers, with threaded conversations, attachments, and urgent flags (WF-PPT-004).

Field Specifications

Field Type Required Validation Default Notes
Inbox Folder Selector Tabs / dropdown Yes ∈ Inbox Filters message list
Message Thread List List N/A Read-only — Shows subject, provider/department, last message snippet, unread badge
Provider / Department Selector (Compose) Dropdown / autocomplete Yes (new message) Must be valid provider/department Empty Options limited to care team and allowed departments
Subject Text input Yes 3–120 chars Empty Required for new message
Message Body Textarea Yes 1–4000 chars Empty Plain text only; no HTML
Attachment Upload File input No Max size per file (e.g., 5 MB); allowed types: jpg, png, pdf None Virus scan on server side
Urgent Flag Checkbox No — Unchecked When checked, show warning that portal is not for emergencies
Send Button Button Yes All required fields valid Disabled until valid Creates portal_messages record
Mark as Read Action N/A — — Updates read_datetime
Reply Box Textarea Yes (reply) 1–4000 chars Empty Uses same validation as new message

Validation Messages

Condition Message Type
No provider/department selected "Please select a provider or department." Error
Subject too short "Subject must be at least 3 characters." Error
Message body empty "Message cannot be empty." Error
Attachment too large "Each attachment must be smaller than 5 MB." Error
Unsupported file type "This file type is not supported. Please upload images or PDF documents." Error
Urgent flag checked "For emergencies, call 998/999 or go to the nearest emergency department. Messages may take up to 24 hours for a response." Warning

Actions / Buttons

  • New Message: Opens compose panel; on send, routes to provider inbox via INT-PPT-007.
  • Reply: Appends to existing thread; notifies recipient.
  • Archive: Moves thread to Archived folder (soft delete).
  • Mark as Read: Clears unread badge; updates read_datetime.

Accessibility

  • Threads list uses proper headings and ARIA roles for conversations.
  • Attachments have descriptive names and file type indicated in text.
  • Warning for urgent flag is announced via aria-live="assertive".

Responsive / Mobile

  • Two-pane layout (thread list + conversation) collapses into single pane with back navigation.
  • Compose area uses full-screen modal on mobile for better typing experience.

SCR-PATIENTPORTAL-005: Prescription Management

Purpose

Allow patients to view current and historical medications, request refills, track refill status, and select preferred pharmacy (WF-PPT-005).

Field Specifications

Field Type Required Validation Default Notes
Medication List Table / cards N/A Read-only — Shows active meds first, then historical
Refill Button Button per medication Conditional Only for refill-eligible meds — Opens refill request dialog
Pharmacy Selector Dropdown / search Yes (for refill) Must be valid pharmacy Last used Includes facility and external pharmacies
Refill Quantity Numeric input Yes > 0; ≤ max allowed 1 Number of refills or packs as per policy
Additional Notes Textarea No Max 500 chars Empty For patient comments to provider
Refill Status Badge N/A ∈ — From PIS / provider decisions

Validation Messages

Condition Message Type
Medication not refill-eligible "This medication cannot be refilled online. Please contact your provider." Info
Pharmacy not selected "Please select a pharmacy for this refill request." Error
Refill quantity invalid "Please enter a valid refill quantity." Error

Actions / Buttons

  • Request Refill: Creates refill request; sends to provider via CPOE/physician portal.
  • Cancel Refill Request: If still pending; updates status and notifies provider.
  • Change Pharmacy: Updates preferred pharmacy in portal_preferences if user chooses.

Accessibility

  • Medication names announced with dose and frequency for screen readers.
  • Status badges include text labels; colour not sole indicator.

Responsive / Mobile

  • Medications displayed as cards with prominent Refill button.
  • Pharmacy selection uses full-screen searchable list on mobile.

SCR-PATIENTPORTAL-006: Billing & Payments

Purpose

Provide patients with access to account summary, statements, itemized charges, payment history, and online payment / payment plan options (WF-PPT-006).

Field Specifications

Field Type Required Validation Default Notes
Account Summary Panel N/A Read-only — Shows total outstanding, last payment date
Statement List Table N/A Read-only — Columns: Date, Invoice #, Amount, Status, View
Itemized Charges Table N/A Read-only — Service date, description, CPT, charge, insurance, patient share
Payment Amount Numeric input Yes (when paying) > 0; ≤ outstanding balance Full balance Allows partial payments if enabled
Payment Method Radio group Yes ∈ Card Depends on payment gateway
Card Details Inputs Yes (if Card) Luhn check, expiry in future, CVV length — Collected via PCI-compliant iframe/tokenization
Payment Plan Setup Form Conditional Facility rules — For eligible balances only
Dispute Reason Textarea Yes (when disputing) 10–1000 chars Empty Creates billing inquiry

HTML Wireframe Mockup (Billing & Payments)

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px;">
  <div style="background: #0b6fa4; color: #fff; padding: 12px 20px;">
    <h3 style="margin: 0;">Billing & Payments</h3>
  </div>
  <div style="padding: 16px; background: #f7f9fb;">
    <div style="display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px;">
      <div style="flex: 1; min-width: 220px; background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
        <h4 style="margin-top: 0;">Account Summary</h4>
        <p><strong>Outstanding Balance:</strong> AED 350.00</p>
        <p><strong>Last Payment:</strong> AED 200.00 on 10 Jan 2026</p>
      </div>
      <div style="flex: 1; min-width: 220px; background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
        <h4 style="margin-top: 0;">Make a Payment</h4>
        <label>Amount (AED)</label><br/>
        <input type="number" value="350.00" style="width: 100%; padding: 6px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #ccc;"/>
        <div style="margin-bottom: 8px;">
          <label><input type="radio" name="pay_method" checked/> Card</label>
          <label style="margin-left: 8px;"><input type="radio" name="pay_method"/> Apple Pay</label>
        </div>
        <div style="border: 1px solid #ccc; border-radius: 4px; padding: 6px; background: #fff; font-size: 12px;">
          [Secure card entry powered by payment gateway]
        </div>
        <button style="margin-top: 8px; padding: 8px 12px; border-radius: 4px; border: none; background: #0b6fa4; color: #fff;">Pay Now</button>
      </div>
    </div>

    <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
      <h4 style="margin-top: 0;">Statements</h4>
      <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
        <thead>
          <tr>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Date</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Invoice #</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Amount (AED)</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Status</th>
            <th style="text-align: left; border-bottom: 1px solid #eee; padding: 4px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="padding: 4px;">01 Feb 2026</td>
            <td style="padding: 4px;">INV-2026-00123</td>
            <td style="padding: 4px;">350.00</td>
            <td style="padding: 4px;">Unpaid</td>
            <td style="padding: 4px;">
              <button style="padding: 4px 8px; border-radius: 4px; border: 1px solid #0b6fa4; background: #fff; color: #0b6fa4;">View</button>
              <button style="padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; background: #fff;">Dispute</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Validation Messages

Condition Message Type
Payment amount ≤ 0 "Please enter a valid payment amount." Error
Payment amount > outstanding "You cannot pay more than your outstanding balance." Error
Payment gateway error "Your payment could not be processed. No charges have been made. Please try again or use a different card." Error
Dispute reason too short "Please provide more details about your dispute (at least 10 characters)." Error

Actions / Buttons

  • Pay Now: Initiates payment via PCI-compliant gateway; on success, updates billing system and shows receipt.
  • View Statement: Opens PDF or detailed view of itemized charges.
  • Dispute: Opens dispute form; on submit, creates inquiry and sends notification to billing team.

Accessibility

  • Payment fields labelled clearly; instructions for screen readers about secure iframe.
  • Error messages announced via aria-live="assertive" to avoid confusion during payment.
  • Monetary amounts formatted with currency and thousands separators.

Responsive / Mobile

  • Account summary and payment form stacked vertically.
  • Statements table becomes list of cards with key details and actions.

SCR-PATIENTPORTAL-007: Telehealth Visit

Purpose

Provide a virtual consultation interface including video, chat, device check, waiting room, visit summary, and satisfaction survey (WF-PPT-007).

Field Specifications

Field Type Required Validation Default Notes
Virtual Waiting Room Status Text / icon N/A Read-only — Shows "Waiting for provider", estimated start time
Device Check Status List with icons N/A Read-only — Camera, microphone, network tests
Join Visit Button Button Yes Enabled only within allowed time window Disabled until window Opens WebRTC session
Video Interface Video component N/A — — Main area; supports mute, camera off, full screen
Chat Sidebar Text area + message list No 1–1000 chars per message — For text communication and sharing links
Recording Consent Checkbox Conditional Required if session recorded Unchecked Must be accepted before recording starts
End Visit Button Button Yes — — Ends session for patient
Visit Summary Panel Text N/A Read-only — After visit: diagnoses, instructions, follow-ups
Satisfaction Survey Rating + textarea No Rating 1–5; comments ≤ 1000 chars Empty Stored in portal_feedback

Validation Messages

Condition Message Type
Device check fails "We could not detect your camera/microphone. Please check your device settings and try again." Error
Join outside allowed window "You can join this telehealth visit 10 minutes before the scheduled time." Info
Recording consent not given "You must consent to recording before the visit can be recorded." Error

Actions / Buttons

  • Start Device Check: Runs pre-call tests; shows pass/fail for each component.
  • Join Visit: Connects to telehealth session; logs telehealth_sessions entry.
  • End Visit: Disconnects; shows visit summary and survey.
  • Submit Survey: Saves feedback; optional.

Accessibility

  • Keyboard shortcuts for mute/unmute and start/stop video.
  • Chat messages announced to screen readers with sender and timestamp.
  • Clear indication when recording is active (text + icon).

Responsive / Mobile

  • Video in portrait mode with overlay controls; chat accessible via tab or swipe.
  • Device check simplified; uses native OS prompts where possible.

Purpose

Allow patients to complete pre-registration forms, medical history, and electronic consents with e-signature and status tracking (WF-PPT-001, WF-PPT-008).

Field Specifications

Field Type Required Validation Default Notes
Pending Forms List List N/A Read-only — Shows form name, due date, status
Form Viewer Dynamic form Yes (per form) Field-level rules — Renders based on form template JSON
Pre-populated Fields Inputs Yes (if required) Standard validation (e.g., Emirates ID format) From EHR Patient demographics, insurance, etc.
Signature Pad Canvas / input Yes (for consents) Must capture signature or typed name + OTP Empty E-signature compliant with facility policy
Consent Acceptance Checkbox Checkbox Yes (for consents) Must be checked Unchecked "I have read and agree..."
Submit Button Button Yes All required fields valid Disabled until valid Saves to patient_submitted_forms and target modules
Completed Forms List List N/A Read-only — Shows submitted forms with timestamps
Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px;">
  <div style="background: #0b6fa4; color: #fff; padding: 12px 20px;">
    <h3 style="margin: 0;">Forms & Consents</h3>
  </div>
  <div style="padding: 16px; background: #f7f9fb;">
    <div style="display: grid; grid-template-columns: 1.2fr 2fr; gap: 16px;">
      <!-- Left: lists -->
      <div>
        <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd; margin-bottom: 10px;">
          <h4 style="margin-top: 0;">Pending Forms</h4>
          <ul style="list-style: none; padding-left: 0; margin: 0;">
            <li style="padding: 6px 0; border-bottom: 1px solid #eee;">
              Pre-registration Form — Due: 18 Feb 2026
            </li>
            <li style="padding: 6px 0;">
              Telehealth Consent — Due: Before next telehealth visit
            </li>
          </ul>
        </div>
        <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
          <h4 style="margin-top: 0;">Completed Forms</h4>
          <ul style="list-style: none; padding-left: 0; margin: 0;">
            <li style="padding: 6px 0; border-bottom: 1px solid #eee;">
              General Consent — Submitted: 10 Jan 2026
            </li>
          </ul>
        </div>
      </div>

      <!-- Right: form viewer -->
      <div style="background: #fff; border-radius: 4px; padding: 10px; border: 1px solid #ddd;">
        <h4 style="margin-top: 0;">Telehealth Consent</h4>
        <p style="font-size: 13px; max-height: 120px; overflow-y: auto; border: 1px solid #eee; padding: 6px;">
          [Consent text in English / Arabic...]
        </p>
        <div style="margin-top: 8px;">
          <label><input type="checkbox"/> I have read and agree to the Telehealth Consent.</label>
        </div>
        <div style="margin-top: 8px;">
          <label>Signature</label>
          <div style="border: 1px solid #ccc; border-radius: 4px; height: 80px; background: #fafafa; text-align: center; padding-top: 30px; color: #888;">
            [Signature Pad]
          </div>
        </div>
        <button style="margin-top: 10px; padding: 8px 12px; border-radius: 4px; border: none; background: #0b6fa4; color: #fff;">Submit</button>
      </div>
    </div>
  </div>
</div>

Validation Messages

Condition Message Type
Required field empty "This field is required." Error
Emirates ID invalid "Please enter a valid Emirates ID in the format 784-YYYY-NNNNNNN-C." Error
Consent checkbox not ticked "You must confirm that you have read and agree to the consent." Error
Signature missing "Please provide your signature to continue." Error

Actions / Buttons

  • Select Form: Loads form template and existing data; sets form_type and target_module.
  • Submit: Validates; saves JSON payload to patient_submitted_forms; triggers downstream updates (demographics, consents).
  • View Completed Form: Opens read-only view or PDF.

Accessibility

  • Dynamic fields generated with labels and proper input types.
  • Consent text scroll area labelled for screen readers.
  • Signature pad has alternative typed name option for users who cannot draw.

Responsive / Mobile

  • Lists and form viewer stacked vertically.
  • Signature pad expands to full width; supports touch input.

SCR-PATIENTPORTAL-009: Profile & Settings

Purpose

Allow patients to manage demographics view, contact details, notification preferences, language, password, MFA, and proxy/dependent management (WF-PPT-001, WF-PPT-008).

Field Specifications

Field Type Required Validation Default Notes
Demographics View Read-only fields N/A — From EHR Name, Emirates ID, DOB, sex
Mobile Number Text input Yes UAE format +971 5X XXX XXXX From EHR/portal Used for OTP and notifications
Email Address Text input Yes Valid email format From portal account Used for login and notifications
Notification Email Checkbox No — From portal_preferences Email notifications on/off
Notification SMS Checkbox No — From portal_preferences SMS notifications on/off
Notification Push Checkbox No — From portal_preferences Mobile push notifications on/off
Language Selector Dropdown Yes ∈ supported languages From portal_preferences At least English and Arabic
Display Theme Dropdown No ∈ Light Optional
Password Change Fields Inputs Conditional Current password required; new password strength rules — For local accounts (not UAE Pass)
MFA Setup Controls No — — Methods: SMS OTP, Authenticator app, biometric (mobile)
Proxy Management List List N/A — — Shows dependents and access levels
Add Dependent / Proxy Request Form Conditional Facility policy; may require in-person verification — Creates proxy_access_grants request

Validation Messages

Condition Message Type
Mobile number invalid "Please enter a valid UAE mobile number (e.g., +971 5X XXX XXXX)." Error
Email invalid "Please enter a valid email address." Error
Password too weak "Password must be at least 8 characters and include letters and numbers." Error
MFA verification failed "We could not verify this MFA method. Please try again." Error

Actions / Buttons

  • Save Contact Details: Updates portal account and, where allowed, EHR demographics.
  • Save Preferences: Updates portal_preferences (notifications, language, theme).
  • Change Password: Validates and updates password hash.
  • Configure MFA: Starts MFA enrollment flow; sends OTP or QR code.
  • Manage Proxy: Add/remove dependents; adjust access level (view-only vs full).

Accessibility

  • Clear grouping of sections with headings (Contact, Security, Preferences, Proxy).
  • Password fields with show/hide toggle and descriptive instructions.
  • Language selector updates lang and dir attributes.

Responsive / Mobile

  • Sections collapsed into accordions.
  • Proxy management list uses cards with primary actions.

SCR-PATIENTPORTAL-010: Registration / Onboarding

Purpose

Support new user registration and activation via Emirates ID and/or UAE Pass, including identity verification, account creation, consent acceptance, and MFA setup (WF-PPT-001).

Field Specifications

Field Type Required Validation Default Notes
Emirates ID Text input / scan Yes (if not using UAE Pass) Format 784-YYYY-NNNNNNN-C Empty May support OCR from ID card
Date of Birth Date picker Yes Must match EHR record for Emirates ID Empty Used for identity match
Mobile Number Text input Yes UAE format Empty For OTP
OTP Code Text input Yes (when sent) 4–8 digits Empty For mobile verification
UAE Pass Login Button Button No — — Redirects to UAE Pass OAuth flow
Email Address Text input Yes Valid email Empty Portal username
Password Password input Yes Strength rules Empty For local login (if not UAE Pass only)
Confirm Password Password input Yes Must match Password Empty —
Language Preference Dropdown Yes ∈ supported languages Browser language Sets initial UI language
Notification Preferences Checkboxes No — Email on, SMS on Initial defaults
Terms of Use Acceptance Checkbox Yes Must be checked Unchecked Includes PDPL consent text
Create Account Button Button Yes All required fields valid Disabled until valid Creates portal_accounts record

Validation Messages

Condition Message Type
Emirates ID invalid "Please enter a valid Emirates ID in the format 784-YYYY-NNNNNNN-C." Error
Identity mismatch "We could not match your details with our records. Please check your information or contact registration." Error
OTP incorrect / expired "The verification code is incorrect or has expired. Please request a new code." Error
Email already in use "An account with this email already exists. Please sign in or reset your password." Error
Passwords do not match "Passwords do not match." Error
Terms not accepted "You must accept the Terms of Use and Data Privacy Notice to create an account." Error

Actions / Buttons

  • Verify Emirates ID: Calls EHR/registration service to match patient record.
  • Send OTP: Sends SMS OTP to provided mobile; starts timer.
  • Verify OTP: Confirms mobile ownership; allows proceeding.
  • UAE Pass Login: Uses OAuth/OpenID Connect; on success, links UAE Pass ID to patient record and portal account.
  • Create Account: Creates portal_accounts, portal_preferences, initial portal_notifications (welcome).

Accessibility

  • Step-by-step wizard with clear progress indicators.
  • Error messages inline and summarized at top of step.
  • Terms of Use accessible in both English and Arabic; large text option.

Responsive / Mobile

  • Designed mobile-first; each step fits on a single screen.
  • Emirates ID scan option on mobile using camera (where supported).

Common UI Patterns

Patient Banner

  • Appears on all authenticated screens except Registration.
  • Fields: Patient name (EN/AR), Emirates ID, DOB, age, sex, primary facility, active alerts (e.g., allergies).
  • Behaviour:
  • For proxies, includes dependent selector.
  • Clicking name opens quick profile view (read-only).
  • Accessibility: Implemented as <header> with clear heading and ARIA labels.

Search Components

  • Used in Appointment Scheduling, Provider selection, Pharmacy selection, Health Records filters.
  • Patterns:
  • Debounced search (300–500 ms).
  • Minimum characters before search (2–3).
  • Clear button to reset.
  • Accessibility:
  • aria-label describing search scope (e.g., "Search providers").
  • Results list announced to screen readers.

Alert / Notification Patterns

  • Inline validation messages:
  • Red text, icon, associated with field via aria-describedby.
  • Global alerts:
  • Banner at top of content area for session-wide messages (e.g., maintenance).
  • Notification center:
  • Accessible via bell icon; shows recent portal_notifications with type (Result, Message, Billing, Telehealth, Forms).
  • PDPL-related notices:
  • Clear, concise explanations when exporting data or sharing records.

Loading States

  • Skeleton loaders for lists and tables.
  • Spinners for actions expected to take >1s (e.g., FHIR export, payment processing).
  • Textual hints: "Loading your health records..." with aria-live="polite".

Bilingual (Arabic/English) UI Considerations

  • All text content stored as translatable strings; no hard-coded English in UI.
  • When Arabic selected:
  • dir="rtl" applied to <html> or main container.
  • Layout mirrored (e.g., navigation on right, patient banner alignment reversed).
  • Numbers remain Arabic numerals unless facility chooses otherwise.
  • Mixed-language content (e.g., medication names, ICD-10-AM codes) displayed consistently in both modes.
  • Validation messages and help text available in both languages.

General Accessibility & Mobile Notes

  • WCAG 2.1 AA:
  • Colour contrast ≥ 4.5:1.
  • Keyboard operability for all functions.
  • No information conveyed by colour alone.
  • Focus visible and not obscured.
  • Mobile:
  • Touch targets ≥ 44x44 px.
  • Avoid horizontal scrolling; use vertical stacking.
  • Use native controls where appropriate (date pickers, select lists) in mobile apps.

This specification provides the screen-level detail required for design and development of the Patient Portal & Mobile App module in alignment with UAE regulatory and usability expectations.

← Previous Patient Portal & Mobile App Data Specifications Next → Patient Portal & Mobile App Integration Specifications
content/portals/patient-portal/04-screen-requirements.md Generated 2026-02-20 22:54