How might we help hospital nurses reduce the amount of time they spend taking vitals signs of non-severe COVID patients while still ensuring the patients still receive the proper care?
In early 2020 as the number of COVID-19 cases surged, Thailand’s hospitals were overwhelmed and it’s resources and capacities stretched thin.
A doctor at one of the local hospitals reached out on facebook to UX Thailand, a user experience community that Natt my CEO help founded, asking for assistance.
Dr. Preaw mentioned that with the the soaring number of new cases and spiking life-threatening COVID cases her hospital is really struggling to keep up. Trying to find any way to alleviate the shortage of healthcare workers, Dr. Preaw wanted to unlock more time for her nurses, who were spending many hours taking on and off protective suits and getting vital sign measurements of non-severe COVID patients who are currently on track to full recovery.
These were the specific details:
Patients scan a QR code to begin
After receiving some preliminary training from the nurses, the patients who are willing and able to help take their own vital signs scan a QR code to open the VitalSign web app.
Logging in with their Hospital Number
After logging in customers are greeted with a dashboard that shows their checkup schedule (currently the hospital requires 6 checkups a day).
When the time comes the patient takes their own measurements and records it.
Four types of measurements are needed
The patients starts first with measuring their temperature, then oxygen level, blood pressure, and then finally their pulse.
The patients also answer some questions about their overall condition
For example, they select what symptoms they are currently having (i.e fever, coughing, etc.) as well as can choose to type any additional information they wanted to share with the nurses.
Review before submitting
After completing the 8 steps the patients reviews their information before submitting. They are greeted with a little screen thanking them for their kind cooperation.
Through the admin web portal the nurses can keep track of their patients condition as well as plan what medicine to bring in.
Allowing them more time to help the doctors with the surging emergency COVID cases.
Patients scan a QR code to begin
After receiving some preliminary training from the nurses, the patients who are willing and able to help take their own vital signs scan a QR code to open the VitalSign web app.
Logging in with their Hospital Number
After logging in customers are greeted with a time table that shows their checkup schedule (currently the hospital requires 6 checkups a day).
When the time comes the patient takes their own measurements and records it.
Four types of measurements are needed
The patients starts first with measuring their temperature, then oxygen level, blood pressure, and then finally their pulse.
The patients also answer some questions about their overall condition
They select what symptoms they are currently having (i.e fever, coughing, etc.) as well as can type any additional information they wanted to share with the nurses.
Review before submitting
After completing the 8 steps the patients reviews their information before submitting. They are greeted with a little screen thanking them for their kind cooperation.
Through the admin web portal the nurses can keep track of their patients condition as well as plan what medicine to bring in.
Allowing them more time to help the doctors with the surging emergency COVID cases.
The Process
Early on Natt, Apirak, and the Dev team agreed that Vital Sign would be an open-source system so any other hospitals in Thailand may use as well as build upon it. Because of this it made the most sense that we create a progressive web app since we needed a solution that was easy to maintain and fast to deploy.
Keeping this in mind, we designed the experience so that recovering patients who have been cleared to go to the non-severe cohort ward scan a QR code to first open the web app, log in with their hospital number, select the time interval, input their vital signs and symptoms, and finally submit.
Since the Dev team were already familiar with Google's Material Design we found a Design System library on Figma to use as our base. Because of this we skipped wireframing most screens and started with the UI. Shown below was the first version of the vital sign input flow. We were a bit concerned with the screens for measuring each vital sign (Number 1-5) because they all looked very similar only differing in wording and placeholder text to communicate what measurement was to be taken. Our assumption was that users could easily get confused and enter in the wrong vitals, which could alarm the nurses.
For the second iteration we added the log in, patient confirmation, and check up time schedule screens as well as made some minor changes to the input vital screens.
Below are some highlights of the major differences between version 1 and version 2.
Login and Confirmation Screen
After scanning the QR code to log in the user needs to input the last 4 digit of their hospital number followed by their birth date. The next screen shows their name and birthday to confirm to proceed (if it is not them they can click the button on the left to change).
Selecting Time
If the user had taken their vitals for an earlier time but for some reason didn't input on the Vital Sign app they can choose to upload the data for prior time intervals. In the right screen users can select to record up to one day prior.
Redesigning the input screen
In Version 2 we made the fields and buttons larger for better readability. We also added a icon to help visually signify to patients what measurements they were inputing for. In addition, we also tailored the field specific for that measurement. In this example, the temperature field shows “0.00C”. However, with those large elements, the “Next” button risked being hidden by the numerical keyboard so we moved the button to the top right.
Tooltip for Oxygen and Blood Pressure
We also added a tooltip to help guide the users on how to measure and read their vitals based on the assumption that the many numbers shown on the reading screen could be confusing to people unfamiliar with the devices.
Login and Confirmation Screen
After scanning the QR code to log in the user needs to input the last 4 digit of their hospital number followed by their birth date. The next screen shows their name and birthday to confirm to proceed (if it is not them they can click the button on the left to change).
Selecting Time
If the user had taken their vitals for an earlier time but for some reason didn't input on the Vital Sign app they can choose to upload the data for prior time intervals. In the right screen users can select to record up to one day prior.
Redesigning the input screen
In Version 2 we made the fields and buttons larger for better readability. We also added a icon to help visually signify to patients what measurements they were inputing for. In addition, we also tailored the field specific for that measurement. In this example, the temperature field shows “0.00C”. However, with those large elements, the “Next” button risked being hidden by the numerical keyboard so we moved the button to the top right.
Tooltip for Oxygen and Blood Pressure
We also added a tooltip to help guide the users on how to measure and read their vitals based on the assumption that the many numbers shown on the reading screen could be confusing to people unfamiliar with the devices.
The next step was defining how the checkup schedule screen would work. At first we experimented with a plus or minus time window allowing more flexibility for the patients to input their vitals a bit before or after if they missed the time. However, feedback from Dr. Preaw was that it was more important to receive the most up to date symptoms and vitals of the patients rather than worry about making the users upload retroactively.
With this in mind, we designed it so the window to submit would be open till the next time slot. For example, the 6am slot would be open for submission till 10am. A slight departure from this rule would be when it turns midnight. The system would consider this a new day and show all the time slots that it is "not time yet". Thus, for the 10pm slot the user actually has only 2 hours to submit.
Although I worked on mostly the patient web app I was able to help redesign the report screen for the nurse web portal. The screen shown below was the first version of the report screen we had designed. However, the overwhelming feedback we got was that the patient info shown in cards is difficult to read because it is in a format nurses & doctors aren't used too.
It turns out that hospitals used two vital sign reports to help them monitor and keep track of patient's condition. There is the standard report and then there is the ADDS chart report. The standard report was most commonly used to monitor patients COVID related symptoms and conditions, whereas, the ADDS chart was more detailed in visualizing trends in patient deterioration based on their vital signs but used less frequently. After looking at these reports it was apparent that the data had to be shown so trends and patterns could be easily interpreted.
Armed with this new insight, I created the wireframes for the standard and advanced table as well as thought through the interaction of how nurses would access these screens. The nurses can click on the table icon on the top right to view the data as a standard report. By selecting the dropdown they can switch to the ADDS chart. Due to the density of the table I wasn't able to find a way to fit the table into the patient detail screen without sacrificing readability, so I had to resort to putting the table feature in an icon, which might not be intuitive to new users.
Final Result
Below are the UI screens my teammates and I ended up designing for the Patient web app. In this final version we changed our primary button from green to yellow because with lots of green already in the UI our CTA button didn't stand out. Another minor change we made was using a ghost "Next" button instead of a secondary stroke button for the vital sign input screen. In the prior version the stroke button made the top section looked cramped due to the limited space. More details of the screens can be seen here as well View Figma UI Prototype
Learning & Reflection
Perhaps maybe because I used to work in finance, but I never had the opportunity to use what I did at work as a medium to help other people before. One week after Vital Sign launched over 40 hospitals requested to sign on and on April 11th we had our official pilot with Hospital Luang Pa Keng. A lot of kudos goes to our CEO Natt who dedicate Ahancer's time and resources to helping the community as well as the developers who worked day and night to deploy Vital Sign at mach speed.
As I write this almost a year and a half after we launched Vital Sign, it is important to update that all the early traction from the hospitals quickly faded, and Vital Sign ended up being used by only a handful of hospitals and for only a short period of time. Reflecting on this, I believe we might have been naive to assume that the hospitals would eagerly adopt another patient management system. Many hospitals were concerned with privacy issues and many wanted a white label solution with custom features and layouts that matched how they operated, which we did not have the resources to deliver or maintain. If I were to redo this I would have focused only on creating the Vital Sign patient app, making it easily customizable so hospitals could manage what information they needed from the patients, and allowing the app to be easily integrated with the hospitals own patient management system.
