
Hospital Information System (HIS)
Problem
Paper records are time-consuming to manage, prone to loss or theft, and offer less secure access control. They often lead to duplicate work, and inefficiencies, and are susceptible to human error, such as incorrect data entry or misinterpretation of handwritten notes.

Project Overview
My role
As a full-time designer, I’m responsible for IPD, Surgery (OR & Anes), Check-Up, and Billing. My role involves creating UI components, designing user flows, and collaborating with users in meetings to finalize the designs.
Goals
To reducing paperwork and manual data entry, these measures enhance efficiency, save time, and cut operational costs. They also ensure accurate patient records, minimize errors in billing and documentation, and provide comprehensive access to patient history, while maintaining secure, role-based access to sensitive information.
What function does the user need?

Registration
-
Verify Patient
-
check the payment details.

OPD Nurse & Doctor
-
Certificate and Forms
-
Vital sign
-
Admission Request
-
Consult & Transfer
-
Order
-
​OR request
-
​Lab and Radiology Result
-
Appointment
-
Discharge

IPD Nurse & Doctor
-
Admission center
-
Certificate and Forms
-
Vitalsign
-
Admission note
-
Progress note
-
​Electronic Medical Records (EMR)
-
​Consult & Transfer
-
​Bed management
-
Order
-
Work list
-
​Return medication
-
OR request
-
Lab and Radiology Result
-
Appointment
-
Discharge

Radiology
-
Patient list
-
Upload Result
Lab
-
Patient list
-
Upload Result
Physical therapy
-
Patient list
-
Upload Result
OR&Anes
-
Patient list
-
Appointment
-
Anesthesia, Surgeon, Nurse work page

Billing
-
Prepare bills
-
complete bills
Pharmacy
-
Verify medicine
-
Prepare medicine
-
Dispenes medicine
Why the uses need those feature ?

Efficiency and
Time Savings

Data Analytics
and Reporting

Security
and Privacy

Financial
Management

Accuracy and
Error Reduction

Shared access to patient information across departments
Who uses Hospital Information System ?

Registration

Nurse

Doctor

Lab

X-ray

Physical therapy

Billing

Pharmacist

IT Staff

Patient

Registration
People-centered
Role : The Registration department is essential for managing the initial patient intake process, ensuring accurate documentation, verifying insurance coverage, and scheduling appointments.
Key Duties
Open visit
Verify Identity
Insurance Verification
Update Information

Nurse
Outpatient Department (OPD)
Role
Provide care for patients visiting for routine check-ups, minor procedures, and follow-up visits.
Key Duties
-
Conduct initial assessments
-
administer vaccinations and minor treatments
-
provide patient education and referrals.
-
Appointment management
Operating Room (OR)
Role
Assist with surgical procedures and ensure the operating room is sterile and prepared. They also provide post-operative care.
Key Duties
-
Preparing and sterilizing surgical instruments
-
assisting surgeons
-
monitoring patients during surgery
-
managing post-operative recovery.
Admission center (ADT)
Inpatient Department (IPD)
Role
Nurses are responsible for admitting patientsinto the ward, transferr -ing patients to different departments or units, coordinating with different doctors, and discharging patients from the hospital.
Role
Continuously assess and monitor patients' vital signs, symptoms, and overall condition. Provide medications, intravenous fluids, and other treatments as prescribed by physicians.
Key Duties
-
Register patients.
-
Manage room and bed assignments for patients.
-
Coordinate patient transfers.
-
Plan and execute discharge procedures.
Key Duties
-
Rapid assessment, triage, administering emergency medications
-
wound care
-
coordinating with other emergency services.

Doctor
Role : The role of a doctor encompasses the broad responsibilities and functions related to providing medical care to patients. This includes diagnosing and treating illnesses, managing chronic conditions, and promoting overall health and well-being.
Diagnosis &
Assessment
Educate patients about their conditions
Key Duties
Document
& Record-
Keeping
Treatment Plans
Order (e.g., blood tests, medicine).

Physical therapy
Role : Physical therapy plays a vital role in the rehabilitation and management of patients with physical impairments, disabilities, or injuries. It focuses on enhancing movement, relieving pain, and improving overall physical function
Assessment &Evaluation
Treatment
Key Duties
Document
& Record-
Keeping
Treatment Plans

Lab
Role : The lab plays a crucial role in diagnosing diseases and conditions through various types of tests and analyses of biological samples, such as blood, urine, and tissue.

X-ray
Role : The X-ray department provides imaging services to visualize the internal structures of the body, aiding in the diagnosis and evaluation of various medical conditions.
send result to doctor
Key Duties
Sample Collection
upload the result
Test Performance
Received lab
order
Key Duties
Performing X-rays
upload the result
Patient Preparation
send result to doctor
Received X-ray order

Billing
Role : The billing department in a hospital is crucial for managing the financial aspects of patient care, ensuring that services are accurately charged, and facilitating the revenue cycle

Pharmacist
Role : The role of a pharmacist is integral to ensuring safe, effective, and efficient medication management for patients
Close visit
Key Duties
Prepare Bill
Verify payment eligibility
Bill payment
Key Duties
Prescription Verification
Dispense
medications
to patient
Received medicine order
Prepare medications
Swim lane diagrams

Design system
Atomic Design Methodology



Work Example for Operation
Each user role has its own system, so I would like to guide you through the detailed process of how I crafted the UI in my work.

Problems
Currently, operation documentation is recorded separately across different websites and on paper for pre-operation, intra-operation, and post-operation stages. This fragmented approach risks losing paper records and makes it difficult to review surgery history when needed. when users needed to create or perform an action by clicking a button, a popup would appear, often with duplicated data. This made the interface cluttered, making it difficult to view and enter information accurately.
Goal
- Keep all documents in one place, can reduce the risk of lost paperwork and make it more intuitive to access a patient's complete surgical history.
- To improve the user experience, we’re using a single, streamlined page to create a cleaner, more intuitive interface.
​

Workflow Enchancement
Previous system
Digital Transformation
Schedule Calendar


Some information is missing upon observation from the filter above, including details like the doctor and anesthesia type. Currently, the calendar card only displays the patient name and surgery name.
Expand the time row to allow more space for displaying additional information, such as the doctor's name, anesthesia details, and other relevant data
Schedule List


the user has to click twice to check in a patient initially.
To enhance efficiency and ease of use, we’ll move the check-in tab to the patient list, allowing users to check in patients with a single click.
Add Operation




the schedule menu and the 'add new surgery' menu were separated. However, we noticed overlapping information between the two tabs, and once a surgery was scheduled, it would appear in the schedule menu as-well.
To streamline the process, we decided to combine the two tabs. This change makes it easier for users to find dates, times, and vacant operating rooms, reducing the need to switch between tabs and helping to save time when scheduling surgeries.
Monitoring :


In the intra-operation and post-operation processes, two roles use a single paper to record and view the patient's vital signs graph. However, we found that the header of the paper requires users to fill in duplicate data, such as the patient’s name, operation team, and surgery name. Additionally, when one sheet isn't enough for a single surgery, users must repeat this information on every page.
To reduce duplicate work, we’ve decided to implement a vital sign graph that provides an unlimited page, allowing users to simply scroll horizontally in the system. This also enhances user experience by making the graph continuous, enabling real-time observation of the patient’s status in a more intuitive and accessible way.
To conculde
By observing the tasks in the previous system and paper workflow, we can reduce time by incorporating key steps into the task process, integrating information from both tools. This allows us to categorize tasks more effectively, enhance user intuition, and improve overall efficiency in their work.
Other Work Example




💡
Key leaning
This project was particularly challenging due to the diverse personas with complex behaviors and the specialized medical terminology involved. The most important lesson I learned was the need to deeply understand each role's tasks, key responsibilities, and how their workflows depend on one another. By analyzing their documents and transforming them into a web-based system, I gained valuable user experience skills. Additionally, I improved my UI design abilities by applying the atomic design system to ensure consistency across the platform.