Discharge Lounge project
Home Page,
I designed a web page for the "Discharge Lounge" in a healthcare environment with a simple design and soft colors, primarily consisting of light beige, white, and soft gray shades.
Main Elements:
- Header Section:
- Light beige background with navigation tabs: "Home, Patient Admission, Attendance Confirmation, and Contact Us on the left.
- King Fahd Medical City logo on the right.
- Text Content :
- "Discharge Lounge" title centered in a delicate gray font.
- A paragraph describing the purpose of the lounge, focusing on comfort and patient support.
- Lounge Images:
- Four different angles showing soft beige seating, neutral-colored tables, white walls, and large windows.
- Indoor plants adding a serene aesthetic touch.
The overall design aims to create a calm and welcoming atmosphere suitable for patient comfort.
Home Page
I designed a web page showcasing the "Benefits of the Discharge Lounge" with a consistent design and calm colors, featuring a light beige background and simple text boxes.
Main Elements:
- Title :
- "Benefits of the Discharge Lounge" centered at the top in an elegant gray font.
- Design and Colors :
- Three text boxes displayed side by side, each with rounded edges and a soft beige background, creating a pleasant contrast with the main page background.
- Each box covers a specific benefit, presented in a calm style, focusing on patient comfort, relaxation, and access to guidance.
The overall design maintains a serene and organized aesthetic, using neutral colors to convey information clearly and comfortably.
Admit Patient Page
The image shows the patient management interface in the hospital, focusing on the "Patient Admission" form within a web-based healthcare management application. The form includes the following main elements:
- Form Fields :
- Includes information such as Patient ID, medical record number, first name, last name, national ID number, gender, date of birth, phone number, admission date, discharge date, status, and notes. These fields help organize patient records accurately.
- Status Dropdown :
- Allows for selecting the current status of the patient, such as "Pending" or "Discharge On Hold."
- Action Buttons :
- Includes : Submit, Update, and Delete buttons, enabling staff to save new patient data, modify existing information, or delete entries easily.
Benefits :
- Effective Data Management : Simplifies the patient admission process by organizing all essential information in a single structured form.
- Improved Accuracy : Reduces errors by providing dedicated fields for each data point.
- Ease of Navigation and Updating : Allows staff to efficiently submit, modify, or delete patient records without switching between multiple screens.
- Streamlined Communication : Supports quick decision-making and communication within the healthcare team with clear labels and dropdown menus.
- Enhanced Patient Experience : Quick access to information can expedite patient processing and improve healthcare services.
Confirm Attendance Page
The image shows the "Discharge Lounge Confirmation" page from the healthcare management application, allowing staff to search for patients and update their discharge status.
Main Elements:
- Search Bar :
- A dropdown menu to select search criteria (national ID number or medical record number(MRN)) with an input field, facilitating quick identification of patient records.
- Patient Information Table :
- Displays key details such as: Patient ID, medical record number, first name, last name, national ID, gender, date of birth, age, phone number, admission date, discharge date, and status.
- Each row corresponds to a patient record, providing necessary information for processing discharges.
- Status Update Column :
- Includes a "Discharge" button that allows staff to confirm a patient’s discharge with one click, automatically updating the status to " Discharged from DL " and adding the date and time of arrival.
Benefits :
- Quick Patient Search : The search bar enables staff to quickly locate patient records using the medical record number.
- Comprehensive Information : The table layout presents essential patient information at a glance, aiding quick decision-making.
- Efficient Discharge Process : The "Discharge" button simplifies updating the patient’s status, making the discharge process faster.
Overall, the interface is designed for ease of use and supports efficient patient discharge management.
Contact Page
- Contact Information :
- - Phone : Displays the contact phone number.
- Email : Provides an email address for direct communication.
- LinkedIn : A link to Aryaf Al-joudi LinkedIn profile for professional networking.
- Navigation Tabs :
- Located at the top, with options like : Home, Patient Admission, Attendance Confirmation, Contact Us , allowing users to easily switch between sections of the application.
- Footer :
- Displays the designer's name ("Designed by: Aryaf Al-Joudi") and the year (2024), enhancing creator attribution and providing a timestamp for the design.
This contact page is clear yet essential for facilitating communication between users and the application designer, enhancing overall user support and application reliability.
sql Database
Database after adding a patient to try the program under the name Aryaf Al-joudi and before confirming attendance at the lounge
sql Database
The database after adding a patient for testing the program named Aryaf Al-joudi , and after confirming attendance at the Discharge Lounge, shows that the status has changed to (Discharged from DL) and the date and time have been automatically recorded after clicking the "Discharged" button.
LUQYA APP PROJECT
Home Page
Lost and Found Items in the Grand Mosque
I designed and developed Luqya, a mobile application that helps manage lost-and-found items in the Grand Mosque in Makkah. The app provides a digital, user-friendly solution to report, track, and retrieve lost items efficiently, supporting millions of pilgrims with multilingual access, real-time updates, and location-based features.
The design focuses on simplicity, clarity, and accessibility to accommodate users from diverse cultural and language backgrounds.
I designed the home screen to provide quick access to the main features of the Luqya app, using a clean layout and intuitive navigation suitable for first-time users.
Main Elements:
- Welcome Section:
Introduces the purpose of the app and its role in helping pilgrims recover lost belongings.
- Main Actions:
Clear buttons for Report Lost Item, Report Found Item, and View My Reports.
- Simple Layout:
Minimal text and clear icons to ensure ease of use for all age groups.
- Multilingual Support:
Language options to serve international pilgrims.
The overall design ensures a smooth and stress-free experience during use.
Add Report Screen
Description:
This screen allows users to submit a lost or found report by entering relevant item details such as title, description, category, color, location, and time.
Purpose:
To enable users to report missing or found items efficiently, providing structured information that helps in identifying and matching reports.
Components:
- Text field for report title
- Text field for detailed description
- Dropdown menu for selecting the item category
- Color picker for selecting item color
- Dropdown menu for selecting the expected location
- Time field for specifying the loss/found time
- Non-editable contact number field
- Navigation back button
Reports Confirmation Screen
Description:
This screen appears after successfully submitting a report. It confirms the submission, displays the report number, generates a QR code for tracking, and provides all report details in a compact format.
Purpose:
To reassure the user that their report was successfully submitted and to allow them to save or share the report details using the QR code.
Components:
- Success message with check icon
- QR code (to track the report later)
- Summary fields displaying:
- Report title
- Category
- Location
- Contact number
- Time of incident
Instructions Screen
Description:
Provides users with a step-by-step guide on how to use the Luqya app to report and follow up on lost or found items.
Purpose:
To ensure users clearly understand the reporting process and how to retrieve their items using the app and QR code.
Components:
- Step 1: Add Report – Fill in the details of the lost/found item
- Step 2: Attach Image – Upload a clear image of the item
- Step 3: Receive QR Code – A QR code will be generated for tracking
- Step 4: Visit Lost & Found Office – Head to the office inside the Haram
- Step 5: Confirm with QR Code – Show the code to confirm item retrieval
LOST & FOUND MAP SCREEN
Description:
This screen shows the location of the Lost & Found office inside the Haram area using Google Maps, with a warning that tracking is only available within the Haram boundaries.
Purpose:
To help users find the physical location of the Lost & Found office where they can submit or retrieve lost items.
Components:
- Google Maps integration
- Location marker: Lost & Found Office
- Warning banner: "Tracking feature is only available inside the Haram area"
- Location selector (dropdown)
- Office details:
-Text description of the office location
-Button to open the location in Google Maps
Officer Home Screen
Description:
This screen is the main dashboard for Lost & Found officers, providing them with tools to manage report verification and matched cases.
Purpose:
To allow officers to perform core duties efficiently, such as scanning QR codes, reviewing matched reports, and accessing instructions.
Components:
App bar with officer name and role
Background image (Haram)
Main action buttons:
- · Scan QR Code
- · Matched Reports
- · Instructions
Bottom navigation bar: Home, Profile
QR Code Scanner Screen
Description:
This screen allows the officer to scan a QR code provided by the user in order to verify item handover and update the report status accordingly.
Purpose:
To ensure the handover process is traceable, secure, and accurately recorded in the system using a scannable QR code.
Components:
- Camera view with scanner frame
- App bar: Scan Report QR Code·
- Flash toggle icon (optional)
Admin Login Screen
Description:
This screen is the secure entry point for administrators to access the system's backend dashboard by entering email and password credentials.
Purpose:
To ensure that only authorized admin users can access the administrative dashboard and manage system data.
Components:
- Email input field
- Password input field (with masking)
- Login button
Admin Dashboard Screen
Description:
Provides a visual summary of key system metrics such as the number of users, employees, reports, and matched cases.
Purpose:
To give admins a quick overview of platform statistics and status updates for decision-making and performance monitoring.
Components:
- User count card
- Employee count card
- Lost Reports card
- Found Reports card
- Matched Reports card
Reports Overview Screen
Description:
Displays a full list of all reports submitted to the system with their type and current status.
Purpose:
To enable administrators to review, filter, and monitor all lost/found report activity.
Components:
- Filter dropdown (e.g., All, Processing, Delivered)
- Report cards showing type, title, status, and timestamp
Matching Reports Screen
Description:
Shows a list of all automatically matched reports between lost and found submissions.
Purpose:
To assist admins in validating and reviewing potential matches before final action.
Components:
- Search field for name or report ID
- Matched report preview cards