Designing A Remote Patient Monitoring System

Reducing time to treatment to save more lives

Reducing time to treatment to save more lives

Reducing time to treatment to save more lives

Designing A Remote Patient Monitoring System

Team

4 Product designers

4 Product designers

Role

UX Research- UX Design

Duration

2 Months

2 Months

Overview

We designed a remote patient-monitoring screen for the London Air Ambulance and Royal Mary Hospital trauma bay team.

We designed a remote patient-monitoring screen for the London Air Ambulance and Royal Mary Hospital trauma bay team.

Objective

To minimize the time from arrival to treatment in emergency situations.

To minimize the time from arrival to treatment in emergency situations.

Impact

We designed and developed a first-of-its-kind AI-powered remote-patient monitoring system designed for the Royal Mary Hospital trauma bay unit to remotely monitor code-red trauma patients en route to the hospital.

We designed and developed a first-of-its-kind AI-powered remote-patient monitoring system designed for the Royal Mary Hospital trauma bay unit to remotely monitor code-red trauma patients en route to the hospital.

Industry

E-Health

Duration

2 Months

Team

4 Product designers

Introduction

Introduction

The London Air Ambulance (NHS) needed a tool to be able to facilitate communication in their workflows.

Paramedic-to-trauma bay communication as it stands now is mostly verbal, and there is no standardized or digitized way to stay in contact.
The London Air Ambulance (NHS) needed a tool to be able to facilitate communication between the helicopter paramedics team and the trauma bay team to save severely ill patients by monitoring them remotely en route to the hospital.

social activists

Insurance companies

Rehab Centers

Hospitals

Suppliers

Media

Scholars

Indirect stakeholders

Doctors

Municipalities

The government

SCI Families

SCI patients

direct stakeholders

SCI Partners & Caregivers

core Stakeholders
mobile app screen
mobile app screen
mobile app screen
mobile app screen

Problem

London's skies… helicopter buzzing …
racing against time to save lives.
Yet, upon reaching the hospital, not all vital piece of the patient's story can be told...!

When a London Air Ambulance is dispatched to a trauma scene, the treatment starts immediately as soon as the injuries are identified and diagnosed. The helicopter emergency medical service (HEMS) team do their best to control and stabilize the patient on-scene and en-route until they arrive to the hospital trauma bay where they can recieve more complex treatments and surgeries.

However, the hospital trauma bay team often know very little information about the situation, events, and interventions that occur during and after the trauma. Upon arrival, a 30-second verbal handover from the paramedics to the trauma bay team takes place as they debrief them of the essential information. Soon after, the trauma bay team take over to re-examine and evaluate the patient once more, creating a redundant process.

Content

"The partner had to cope with the shock, support the injured partner during the institutionalized rehabilitation, and struggle to make their relationship and life together function again."

"They were struck by the brutal fact that their partner had been seriously injured, and their own needs faded into the background."

"The partners experienced much distress and appreciated the support they got but felt that they were mainly left to manage the difficult process on their own."

(Johnson et al.)

Initial Research

Modes, mediums, and styles of communication between the medical teams in emergency procedures were noted in a flow chart, showing the weak points.

Research Insights

Voice-powered surveys gave us insights into many problems faced by medical personnel in the trauma bay, including "REBOA".

We received insights and ideas that later influenced our design, such as the “REBOA Blood Control Timer,” a device installed in patients to control severe blood loss.

Design Pillars

Data Visualization

Based on the insights, we decided on a visual communication platform with certain features for the trauma bay team using a chronological-based information display screen.
ACCESSIBILITY

♿

Designing a system to co-exist with the current process in place to complement rather than replace.

ACCESSIBILITY

♿

Designing a system to co-exist with the current process in place to complement rather than replace.

ACCESSIBILITY

♿

Designing a system to co-exist with the current process in place to complement rather than replace.

CO-EXISTENCE

🤝

Designing with an understanding of cognitive load, and glance-based legibility.

CO-EXISTENCE

🤝

Designing with an understanding of cognitive load, and glance-based legibility.

CO-EXISTENCE

🤝

Designing with an understanding of cognitive load, and glance-based legibility.

STANDARDISATION

📐

Displaying data with the medical industry’s current visual standards and conventions.

STANDARDISATION

📐

Displaying data with the medical industry’s current visual standards and conventions.

STANDARDISATION

📐

Displaying data with the medical industry’s current visual standards and conventions.

Research Insights

Voice-powered surveys gave us insights into many problems faced by medical personnel in the trauma bay, including "REBOA".

We received insights and ideas that later influenced our design, such as the “REBOA Blood Control Timer,” a device installed in patients to control severe blood loss.

STANDARDISATION

Displaying data with the medical industry’s current visual standards and conventions.

ACCESSIBILITY

Designing with an understanding of cognitive load, and glance-based legibility.

CO-EXISTENCE

Designing a system to co-exist with the current process in place to complement rather than replace.

Design Pillars

Based on the insights, we decided on a visual communication platform with certain features for the trauma bay team using a chronological-based information display screen.

Failed Concept

Design Pillars

The Accordion Concept aimed to display historical and live trending patient data, but was too complex to be understood at a glance.

Medical personnel informed us that historical data is important to track the patient across time. However, the current live trending data is more important as it displays the patient’s actual state in the current time.
The Accordion Concept aimed to display both at the same time by zooming in towards the last 7-9 seconds documented. I named it “accordion concept” as it aimed to expand the perception of time and then shrink again.

After testing this concept in comparison with the other concepts, it did not prove to be successful as it was too unfamiliar and too complex to follow in an urgent use case scenario. It was not properly perceived.

✨

Connect to Content

Add layers or components to swipe between.

✨

Connect to Content

Add layers or components to swipe between.

Technicalities

Design Pillars

Font size, colors, and text spacing have a significant effect on the rate of accuracy of a visual search and the reaction time during each search period.

When designing the information, on-glance legibility was an important thing to consider, as the surgeons, doctors, and nurses would use the screen as a fast means of retrieving information. Their attention is limited, so the cognitive load had to be minimal. High contrast was used to display quantitative physiology data such as HR and SpO₂ numbers.

The dark background is scientifically proven to have better results when paired with high-contrast colored numbers. Each physiology indicator was assigned a color based on conventions observed through patient monitoring systems. A proper font and size balance was also achieved by using a bold Helvetica weight commonly used with modern patient monitoring systems.

New Concept

Design Pillars

The Calendar Concept : 2 time axis, one for paramedic-intervention events and another for physiology waveforms.

The Calendar Concept : 2 time axis, one for paramedic-intervention events and another for physiology waveforms.

Pin Chun, my teammate, came up with the idea of separating patient interventions and physiologies, instead of having one time axis with everything noted down. In this way, we have a list of past interventions done, the current time marker, and the predicted future through the AI algorithm.

Pin Chun, my teammate, came up with the idea of separating patient interventions and physiologies, instead of having one time axis with everything noted down. In this way, we have a list of past interventions done, the current time marker, and the predicted future through the AI algorithm.

It proved to be the best decision when we tested it alongside the Accordion concept.

Data Visualization

Data Visualization

We designed a panel with a live-stream visualization of patient data across a 5-second timescale and event-entry axis.

The patient’s ECG, oxygen saturation, and non-invasive blood pressure, are livestreamed through the ZOLL® X Series® monitor/defibrillator that is used by the HEMS team on-scene and en-route to the hospital. The monitor allows data entry in the form of interventions that update the screen’s intervention panel with respective timestamps.

With the assistance of the LAA dispatcher and senior hospital nurse, they can access the screen’s backend system to update manual data entries if needed, such as respiratory rate, C02 saturation, and the Glasgow coma scale. The visualization of the data graph was designed according to conventional patient monitoring systems

What Users See

What Users See

What Users See

The role of human and clinical judgment in our AI feature was heavily criticized.

User testing revealed how our product was perceived positively by medical personnel. Most claimed to understand what it does, and what it aims to solve. However, the AI prediction concept was underdeveloped, as many did not understand the need for it, let alone how it worked.

Testing the Dashboard

Design Pillars

Testing the Dashboard

We used the 3-30-300 method of showcasing our interface and asking the testers questions to confirm whether they could read the interface easily.

📊

Data Visualization

Users found the visualization of clinical data and physiological monitors better in the calendar model.They appreciated the clear representation of current information and the more spacious design that allowed for easier comprehension.Color Coding and

Open

📊

Data Visualization

Users found the visualization of clinical data and physiological monitors better in the calendar model.They appreciated the clear representation of current information and the more spacious design that allowed for easier comprehension.Color Coding and

Open

📊

Data Visualization

Users found the visualization of clinical data and physiological monitors better in the calendar model.They appreciated the clear representation of current information and the more spacious design that allowed for easier comprehension.Color Coding and

Open

📊

Data Visualization

Users found the visualization of clinical data and physiological monitors better in the calendar model.They appreciated the clear representation of current information and the more spacious design that allowed for easier comprehension.Color Coding and

Open

⏱️

Timeline & Interventions

Users valued the timeline that showcased the applied interventions and their successors, providing a quick overview of the effectiveness of procedures.The accordion model was well-received, while the calendar model was considered simpler and faster.The body map feature was not noticed or mentioned by users.

Open

⏱️

Timeline & Interventions

Users valued the timeline that showcased the applied interventions and their successors, providing a quick overview of the effectiveness of procedures.The accordion model was well-received, while the calendar model was considered simpler and faster.The body map feature was not noticed or mentioned by users.

Open

⏱️

Timeline & Interventions

Users valued the timeline that showcased the applied interventions and their successors, providing a quick overview of the effectiveness of procedures.The accordion model was well-received, while the calendar model was considered simpler and faster.The body map feature was not noticed or mentioned by users.

Open

⏱️

Timeline & Interventions

Users valued the timeline that showcased the applied interventions and their successors, providing a quick overview of the effectiveness of procedures.The accordion model was well-received, while the calendar model was considered simpler and faster.The body map feature was not noticed or mentioned by users.

Open

📝

Structure & Readability

Users found the structure easy to read and appreciated the application of SBAR and ABCDE strategies.However, there was a suggestion to improve the ABCDE method by including temperature and making it more visually accessible, such as using a color-coded list.

Open

📝

Structure & Readability

Users found the structure easy to read and appreciated the application of SBAR and ABCDE strategies.However, there was a suggestion to improve the ABCDE method by including temperature and making it more visually accessible, such as using a color-coded list.

Open

📝

Structure & Readability

Users found the structure easy to read and appreciated the application of SBAR and ABCDE strategies.However, there was a suggestion to improve the ABCDE method by including temperature and making it more visually accessible, such as using a color-coded list.

Open

📝

Structure & Readability

Users found the structure easy to read and appreciated the application of SBAR and ABCDE strategies.However, there was a suggestion to improve the ABCDE method by including temperature and making it more visually accessible, such as using a color-coded list.

Open

♿

Accessibility

While colors were generally standardized, some users mentioned that they personally didn't rely on color differentiation and preferred black and white charts.One user also mentioned being colorblind to red and green.

Open

♿

Accessibility

While colors were generally standardized, some users mentioned that they personally didn't rely on color differentiation and preferred black and white charts.One user also mentioned being colorblind to red and green.

Open

♿

Accessibility

While colors were generally standardized, some users mentioned that they personally didn't rely on color differentiation and preferred black and white charts.One user also mentioned being colorblind to red and green.

Open

♿

Accessibility

While colors were generally standardized, some users mentioned that they personally didn't rely on color differentiation and preferred black and white charts.One user also mentioned being colorblind to red and green.

Open

Impact

Impact

This initial prototype has since been funded and is in progress to be further designed, developed, and trialed across 4 major hospitals in London, and scheduled to be published by late 2026/early 2027

The interface

The interface

Refining my design

User feedback drove clearer, faster, more flexible planning

Insights from the second round of testing highlighted navigation friction, readability gaps, and limited editing freedom. In response, I grouped related data visually, improved contrast, added default day suggestions, and enabled quick switching between activities—turning feedback into a smoother, more intuitive setup flow.


Left: After feedback, Right: Before feedback

The interface

Case Studies

Past Projects

About

Contact

Resume

Case Studies

Past Projects

About

Contact

Resume

Problem

Problem

Font size, colors, and text spacing have a significant effect on the rate of accuracy of a visual search and the reaction time during each search period.

When designing the information, on-glance legibility was an important thing to consider, as the surgeons, doctors, and nurses would use the screen as a fast means of retrieving information. Their attention is limited, so the cognitive load had to be minimal. High contrast was used to display quantitative physiology data such as HR and SpO₂ numbers.

The dark background is scientifically proven to have better results when paired with high-contrast colored numbers. Each physiology indicator was assigned a color based on conventions observed through patient monitoring systems. A proper font and size balance was also achieved by using a bold Helvetica weight commonly used with modern patient monitoring systems.

First solution

Providing users with Clarity and Control

The new homepage simplifies navigation by placing key financial actions Transfer, Exchange, and Add Money at the centre of the screen.

The new homepage simplifies navigation by placing key financial actions Transfer, Exchange, and Add Money at the centre of the screen.

Old Homepage

🏠

Open

Old Homepage

🏠

Open

Old Homepage

🏠

Open

❝ Some options feel buried inside menus I just want to send money quickly. ❞

❝ On PayPal, some options are not clear at all and are not easy to find at first, like adding to my balance or exchange rates when sending internationally. ❞

❝ I have ADHD and I have problems finding options on this app a lot. It takes too long to find what I need, especially when I’m in a hurry. ❞

New Homepage

🏠

Open

New Homepage

🏠

Open

New Homepage

🏠

Open

  1. Key payment actions (Transfer, Exchange, Add Money) are prominently displayed at the top, reducing friction.

  1. Alerts provide proactive notifications for users to manage their balance.

  1. The homepage is cleaner, with a focus on transactions rather than promotions.

Old Payment

💳

Open

Old Payment

💳

Open

Old Payment

💳

Open

❝ I wish I didn’t have to see the profile and photo of people I sent money to once a year ago—it makes it hard to focus on what I need to do.❞

❝ At first, I was really confused about how to do transactions, but after a while, it became easier. It shouldn’t take this long to figure out.❞

New Payment screen

💳

Open

New Payment screen

💳

Open

  1. We organized options more clearly. Payment actions like "Send," "Bill," "Give," and "Request" are tabbed at the top, making it easier for users to find and switch between different payment methods

  1. Icon colors are changed to reduce distractions, and layout changes help reduce cognitive load.

To all Projects

To all Projects

To all Projects

To all Projects

Please use desktop for better experience