Background

The implementation of the International Patient Summary (IPS) in the pilgrimage health management scenario aims to assist Saudi Arabian health workers in conducting examinations of pilgrims. The goal is that Saudi Arabian health workers can access accurate health history from medical record data while the pilgrims are in Indonesia. Each pilgrim leaving for Saudi Arabia will be given an IPS QR Code containing medical data from SISKOHATKES (Integrated Hajj Computerization System for Health), which will be attached to the pilgrim card. The IPS QR Code will be scanned by Saudi Arabian health workers when there are pilgrims who need treatment in Saudi Arabia, either in a conscious or emergency state. Saudi Arabian health workers will use the IPS Portal Viewer to scan the IPS QR Code belonging to Indonesian pilgrims. The scanned QR Code will display read-only data from Indonesian pilgrims that includes medical data in accordance with the IPS dataset.

Goals

Designed a responsive web interface for the International Patient Summary portal to display pilgrims' medical resume data.

Design Solution

The design aims to provide Saudi Arabian health workers with a user-friendly and secure way to access Indonesian pilgrims' medical data by scanning a QR code. The portal prioritizes ease of use, data security, and clear presentation of essential medical information.

Design Descriptions

1. Landing/Welcome Screen:
   • Purpose: Introduces the IPS Portal Viewer and guides users on how to initiate the QR code scanning process.
   • Elements:
     • Logo: Kemenkes (Indonesian Ministry of Health) logo to establish credibility.
     • Illustration: A visual representation of the QR code scanning process, showing a phone scanning a QR code attached to a card, reinforcing the use case.
     • Title: "International Patient Summary Portal Viewer" clearly identifies the application.
     • Description: A brief explanation of the portal's function – digitally signed IPS data accessible through verification.
     • Call to Action: "Scan IPS QR Code" button to start the scanning process, and "Learn How to Scan" button provides additional instructions.
   • Design Notes: Uses a clean and modern design with a green color scheme (common in Indonesian healthcare apps). The illustration is key to quickly conveying the application's purpose.

1. QR Code Scanning Screen:
   • Purpose: Enables Saudi Arabian health workers to scan the QR code provided by the Indonesian pilgrim to retrieve their IPS data.
   • Elements:
     • QR Code Scanner: A viewfinder area where the QR code should be positioned for scanning.
     • Instructions: Simple text prompts guiding the user to align the QR code. (Text in the image: "Detecting QR Code").
     • Progress Indicator: A visual cue (e.g., animation or message) to indicate that the system is actively detecting and processing the QR code.
   • Design Notes: This screen needs to be highly responsive and efficient to ensure quick scanning, particularly in potentially urgent medical situations. Focus on fast QR code detection.

1. Patient Passcode Screen:
   • Purpose: Adds an extra layer of security by requiring a passcode to access the patient's sensitive medical information.
   • Elements:
     • Title: "Enter Patient Passcode" clearly indicates the purpose of the screen.
     • Input Field: A field for entering the patient-specific passcode.
     • Terms and Conditions: Checkbox to agree to terms and conditions.
     • Buttons: "Cancel" and "OK" buttons for navigation.
   • Design Notes: Emphasizes the importance of data privacy and security. The design is simple and straightforward to minimize errors.

1. Patient Data Screen:
   • Purpose: Displays the pilgrim's medical summary in a clear, structured, and read-only format.
   • Elements:
     • Header: "International Patient Summary Data" with back navigation.
     • Summary Date: "Patient Summary as of [Date]" to indicate the currency of the data.
     • Sections:
       • Patient Data: Name, identifier number, date of birth, sex.
       • Allergies and Intolerances.
       • Immunizations and Vaccinations.
       • Medical Problems.
       • Medications.
     • Expandable Sections: Each section can be expanded or collapsed to show/hide details.
   • Design Notes: Data is organized into logical sections for quick scanning. The design is clean and uncluttered to improve readability. Clear typography and visual hierarchy are important.

Key Considerations

• Responsiveness: The web interface should be responsive to adapt to different screen sizes and devices (tablets, smartphones, desktops) used by Saudi Arabian health workers.
• Accessibility: The design should adhere to accessibility guidelines to ensure it is usable by individuals with disabilities.
• Security: Data security is paramount. The use of passcodes and digitally signed QR codes is crucial to protect patient information.
• Localization: All text should be localized to Arabic for native speakers' understanding.