Loading

Electronic Observations

A medical app designed for clinicians to monitor vital signs and calculate national early warning scores at the patients bedside.

My Role

  • UI & UX Design

Time Frame

  • 12+ Months
  • Early 2017 - 2018

Tools

  • Pen & Paper
  • Photoshop
  • Illustrator
  • Invision
  • HTML
  • CSS
  • Ionic Framework

Team

  • Dan Laffan - Team Lead & Backend
  • Jack Gallagher - Mobile Engineer
  • James Judge - Mobile Engineer
  • Seán O' Neill - Mobile Engineer
  • Phil Allen - Javascript Developer
  • Jamie Condon - Backend Developer
  • Ashling McNabb - Business Analyst
  • Dean Mawson - Clinical Safety Officer
  • Simon Neve - Product Manager

Brief

Brief

EObs is a medical mobile app that facilitates medic workflows in real-time, at the patient's bedside. Its aim is to reduce reliance on paper-based workflows by transitioning to digital solutions, thus allowing more time for patient care. In simple terms the medic records a patient's physiological observations and the app generates a warning score if the patient is in danger. The app integrates with the MAXIMS Enterprise desktop solution.

The app was already in production for a year however, there was no Design Thinking or User Experience work applied to it. End-users found it confusing to use and it had the potential to cause clinical risk and lead to serious and potentially deadly implications if information was misconstrued or recorded incorrectly.

We worked hand in hand with the UK's National Health Service (NHS) Digital Team in Musgrove Park Hospital in Taunton which is one of only a handful of hospitals in the UK to be accredited as a Global Digital Exemplar (GDE). The hospital is one of the largest in the UK and has over 700 beds, 15 surgical theatres and about 4000 staff members. The majority of the Product Team work in the UK office and visit the Digital Team in Musgrove Park several days a week.

We adapted a design sprint approach to find solutions to speed up the data entry, simplify the flow and create a new visual language. My role was to lead the UX/UI Design. I was responsible for all designing, prototyping, ideation, testing and some minor development.

Business Goals

Increase revenue by launching a new mobile product line built on the backbone of the desktop PAS (Patient Administration Software) the company currently offers.

User Goals

Easily find patients and enter medical observations on a mobile device.

Project Goals

Redesign the current app by creating a more engaging, exciting and safer User Interface that solves all the pain points.

Scope and restraints:

  • Limited access to the end users.
  • ISB 1500-1508: Common User Interface (CUI) guidelines which set information standards for use in health ITsystems
  • Had to rely on a lot of second-hand information.
  • No resources for proper testing.
  • Majority of the Product team work in another country.
  • Users in another country.
  • The clinical safety/testing process.
  • Prohibited from conducting a UI review or UI sign-off of designs implemented by the developers.

User Demographics

The user demographics for the app is extremely broad as the users can vary from 20 to 65 years of age, they also have varying technical skill levels.

What is a Clinical Observation and NEWS anyway?

I did a content audit on the app and investigated the medical work flow it supports, in order to understand what are clinical observations and the purpose of early warning protocol (NEWS) score calculation.

The National Early Warning Score (NEWS) is based on a simple aggregate scoring system, in which a score is allocated to physiological measurements, already recorded in routine practice, or are being monitored in hospital.

Six simple physiological observations of vital signs parameters form the basis of the scoring system:

  • Respiration rate
  • Oxygen saturation
  • Systolic blood pressure
  • Heart rate
  • Level of consciousness or wnew confusion
  • Temperature

This generates a clinical risk score or National Early Warning Score (NEWS) which informs the medical staff the amount of monitoring the patient requires.

  • 0; minimum monitoring, colour code blue
  • Low 1-4; minimum 4-6 hourly monitoring, colour code green
  • Medium 5-6;hourly monitoring, colour code amber
  • High 7+; continuous monitoring colour, code red

Scan of a physical NHS NEWS Observation form
Scan of a physical NHS NEWS Vital Signs Observation form
wall of research
Mood board and medical device research images in the office
Office wall sketches and notes breaking down NEWS scores
Sketches and notes breaking down NEWS scores and results
a picture of research notes on an office wall
Varying fidelity designs and flows pinned to the office wall

🥱TL;DR

Too Long; Didn't Read

Hey I get it, this design journey is really long and detailed but that's the reality when working in healthcare, there are no quick solutions. Everything is a complicated bureaucratic procedure for a reason and new software has to pass safety certifications before it can deployed in a hospital.

In a nutshell, the Electronic Observations app had been production for a year before I joined the team, I introduced a new way of working by testing and validating prototypes before development, I streamlined the flow and created a new design language to be applied to all future mobile products. We worked with one of the very few NHS digital exemplar hospitals in the UK and after three years the App went live.

Before:

Gif representing original eOBs flow
Gif representing original eOBs flow

After:

Screen recording of final release demonstrating entire vital signs observation app after development was completed
Patient Workshop
❝ Sharon, health care assistant, explains "I'm just going to do your blood pressure and then use this iPod to update your observations", Nick, carer in this scenario, says "Can I just have a look?" Of course here you can see the blood pressure number. ❞
June 6 2019 Twitter
❝ eOBS is so much easier! A better way to communicate with the nurses. ❞
— Sophie Prothero
Healthcare Assistant at Wye Valley NHS Trust
Mar 26 2021 Twitter
❝ As a clinician working on the wards, I have benefited from the ability to review observations from the patients bedside. ❞
— Dr Jake Burdsall
Consultant Gastroenterologist & CCIO at Wye Valley NHS Trust
May 7 2021 Twitter
a picture of a patient wristband

Patient Profile

Problem

The medics needed to view individual observation results and launch recordings for the NEWS.

Solution

Created the patient profile section as a hub to display individual patient information and launch patient actions.

The Patient Profile section contains medical information for each specific patient. From here the user views the patient's individual observations and launches the recording screens and view their tasks and notifications. As the app expanded over time, more modules were added to support varying types of hospital workflows. A useful feature of the app is the QR scanner, this allows medical staff to scan the wristband of any patient and access their patient profile instantly.

In the designs I included the compulsory standard patient information set of, patient name, gender, identification number, date of birth and age. I also added patient's location, medical service and responsible HCP (Health Care Professional). The patient photo was included to help identify the user which is useful if the patient has dementia and removed their own wristband.

The NEWS (National Early Warning Score) score is the culmination of entering the six vital signs recordings, from these the early warning protocol score is tallied and also given a red, amber or green (RAG) status, or blue if no observations have been recorded. Then the app generates clinical advice, tasks and notifications to be sent to medics if required. I based the design of patient profile around the NEWS colours as I felt it was extremely important. Beside the NEWS number I added an increase or decrease icon that would animate if the patient’s NEWS had changed since the previous recording.

For the vital signs observations, I decided to turn each reading into a separate card and added the red/amber/green (RAG) status colour to clarify recognition of the values. I also added a line chart to display the latest Obs recordings.

The engineers built several versions and we modified it along the way. We tried having a coloured border on the left hand side and experimented with also changing the colour of the number to match the RAG status. I was never really happy with it visually because it turned into a multi-coloured patchwork of cards. The final design contained a stripped back version of the screen with just the recording values and a simple circle that displayed RAG status.

I included task and notifications counts. The Product Team consulted the hospital and decided to to have an escalation pathway if a medic could not respond. The idea was that a recipient of the notification could suppress it, acknowledge it or escalate it further to a Clinician of a higher level.

I built out prototypes that covered the requirements and everything went into development. It was during this phase that I finally chose the current colour scheme and fonts for app and was able to completely change the from the original version.

Screenshot of the Obs section before the redesign
Screenshot of the Obs section before the redesign
Wireframe sketch of Obs cards with line chart
Wireframe sketch of Obs cards with line chart
I added graphs that would change the colour of the card based on RAG (Red, Amber, Green) status.
Wireframe sketch of Obs cards with line chart and gauge
Wireframe sketch of Obs cards with line chart and gauge
Detailed sketch of Obs card gauges
Detailed sketch of Obs card gauges
I looked at ways of displaying the RAG status in a severity gauge.
Wireframe sketch of patient list items based on NEWS colour
Wireframe sketch of patient list items based on NEWS colour
Wireframe sketch of patient list items with task and notification counts
Wireframe sketch of patient list items with task and notification counts
Wireframe sketch of NEWS and clinical advice score
Wireframe sketch of NEWS and clinical advice score
I looked ways of showing the NEWS score, with an emphasis on displaying the red, amber and green colour coding.
Sketched flow of options available to recipient of a notification
Sketched flow of options available to recipient of a notification
Wireframe sketch of News and clinical advice screen
Wireframe sketch of NEWS and clinical advice screen
This screen needed to contain the NEWS score, clinical advice, Tasks and notification options.
Sketched flow of tasks generationed based on the NEWS score
Sketched flow of tasks generationed based on the NEWS score
Wireframe sketch of NEWS and clinical advice screen
Wireframe sketch of NEWS and clinical advice screen
High-fidelity design of patient profile
High-fidelity design of patient profile
As you can see form the breakdown a host of information needed to be displayed
Adobe Photoshop designs of Notifications inbox
High-fidelity designs of Notifications inbox and Task List
Adobe Photoshop designs of Notifications inbox
High-fidelity design of notifications response flow
High Fidelity Concepts for dashboard with data insights and Helper Bot for Tasks and Notifications
High-fidelity designs for dashboard with data insights and helper bot for tasks and notifications

Final

Pro-duct

After some trial and error the hospital went with the majority of the features, but decided to not add a patient photo because of GDPR concerns. The feature still remains active in the app, should they change their mind.

Because of the complexity involved with the escalation pathway and the difficulties the with the 5-step handshake on iOS, the push notifications never really worked as intended and the hospital decided to remove the tasks and notifications section and functionality from the app.

It was disappointing that the notifications were taken out because I think are really valuable and could help save lives. I think they are far too complicated and we never got them to reach their full potential. However they still are part of the app and hopefully they can can be reactivated in the future.

Before:

Screenshot of the Obs section before the redesign
Screenshot of the Obs section before the redesign

After:

Screen recording of final release demonstrating eObs cards section after development was completed
Sketch of Patient List
Screengrabs from an earlier version of the app with tasks and notifications active
Julia entering observations using the e-observations solution with Ben
❝ Julia entering observations using the e-observations solution with Ben (Digital Nurse) giving guidance. @musgrovedigital @MusgrovePark #digitalshowcase18 ❞
23 Oct 2018 Twitter
a picture of an EKG machine

Vital Signs

Problem

The users needed a way to record the vital signs observation readings for patients.

Solution

Redesigned the aesthetics of the number pad.

AAs stated earlier the NEWS score is generated by entering vital signs observations values. For the sake of brevity I will not go into each vital sign individually but I will expand on a select few of the more interesting inputs.

Oxygen Saturation (SpO2) is the percentage of oxygenated blood in the human body, normal levels are 95%-100%. This is usually measured by the medic with a Pulse Oximeter.

Body temperature is the temperature range found within humans. A typical healthy body range is 36.5–37.0 ° and is measured with a medical thermometer.

The heart rate or pulse rate is calculated by counting the amount of times the heart beats per minute, between 60-100 beats per is the normal resting heart rate. This is usually measured with a stethoscope or heart rate monitor.

I researched other apps and I particularly enjoyed how the train Leap Card App had a circle slider that allowed me to add money onto my account, without the need of inputting the numbers manually. I thought this could be a great solution in a stressful hospital environment, as the users the users would have less cognitive load and input data faster thereby affording more time for patient care.

I put forward some options and built a simple prototype. I used a pre-existing Jquery circle slider library and modified it to work on a phone, to demonstrate the concept. The product team did not like the idea and wanted to go with the same numpad as before.

I was determined not to let the idea go so I created screens in Photoshop and made an interactive prototype in InVision. I added a button to the screen that would allow the user toggle between numpad and the circle slider, This way it would give the user flexibility to decide which option they preferred. Again the concept was rejected.

By this stage my circle slider concept had gained zero traction so I decided to change my approach and try some skeuomorphic options to breakaway from the uniformity and repetition of the numpad. I thought if the medics could actually see a very recognisable thermometer on the screen and interact with it, it would give them an easier transition to a digital device.

I researched medical instruments and found out that medical thermometers are quite different from their meteorological counterparts. They have a different shape and much smaller temperature range. I used a stock image of a medical thermometer to create a digital version in Illustrator and made a static prototype in InVision. I proposed that the thermometer would have a slider that the user could slide to their desired temperature. As they did so, the mercury level within the thermometer would raise accordingly with gesture mimicking the real-world recording of a physical thermometer. Then I created a scalable SVG of the thermometer image and a coded prototype with a plan to get one the developers to help animate the slider on touch. However this concept was also turned down by the product team.

Screenshots of Blood Pressure, O2 Saturation and Level of consciousness before they were redesigned
Screenshots of Blood Pressure, O2 Saturation and Level of consciousness before they were redesigned
All patient information is fictitious test data.
Screenshots of Heart Rate, Respiratory and Temperature observations before they were redesigned
Screenshots of Heart Rate, Respiratory and Temperature observations before they were redesigned
Screen recording of the Leap Top-Up App demonstrating a Circle Slider input
I like the intuitive UI of the Leap Top-Up app and I thought the circle slider would cause less of a cognitive load. Also as it is fun to use people would enjoy using it in our app.
Wireframe sketch of supplemental oxygen input
Wireframe sketch of supplemental oxygen input
This option had radio buttons and icons to choose supplemental and administration method.
Wireframe sketch of oxygen saturation input
Wireframe sketch of oxygen saturation input
Wireframe sketch of heart rate input
Wireframe sketch of heart rate input
Wireframe sketch of temperature input
Wireframe sketch of temperature input
I placed a circle slider and location of recording options on one screen.
Second sketch of Temperature
Wireframe sketch of temperature input
I varied the position and accommodated the PID (patient identity) bar and navigation.
Sketch of skeuomorphic temperature slider input
Sketch of skeuomorphic temperature slider input
An idea to use the level on a medical thermometer as a touch gauge.
Wireframe sketch of respiratory rate and supplemental 02
Wireframe sketch of respiratory rate and supplemental 02
Third sketch of Temperature
Medium-fidelity designs of vital signs inputs

See the Pen qRRWyO by MrThunder (@MrThunder) on CodePen.

A Codepen prototype with a circle slider
I coded this prototype to demonstrate the functionality on a mobile device.

See the Pen Template by MrThunder (@MrThunder) on CodePen.

A Codepen prototype of Thermometer input
Unfortunately I never had the time to get touch events added to the prototype.
Screen recording of Invision prototype demonstrating the heart rate input in medium-fidelity
I thought if I had an option to choose between the circle slider and numerical input, it would give the flexibility to use both.

Final

Pro-duct

After consultation and feedback from the Product team the designs were deemed too experimental and they chose to forgo the slider and skeuomorphic solutions and go instead the numpad. Product sent the numpad designs to the hospital which were accepted and developed into the final product.

Personally I felt the circle slider was easier, intuitive and less repetitious than typing the numbers individually, particularly for a set of predefined values, such as percentages, or temperatures which are in a confined numerical range. In my opinion the tactile gesture adds a perceived gravity to the users action and by having the option to toggle between a regular numpad and circle slider, it would give the user flexibility to choose their preferred method. However the numpad is still a solution that works very well on the hospital floor.

Screen recording of final release demonstrating the oxygen saturation input after development was completed
Screen recording of final release demonstrating the heart rate input after development was completed
Screen recording of final release demonstrating the temperature input after development was completed
a picture of a nurse taking a blood pressure reading

Blood Pressure

Problem

The blood pressure observation was taking users between 45-60 seconds to complete.

Solution

Used progressive disclosure and visual representation of human body to create “3 second Obs”.

Adding the blood pressure observation was by far the most complicated Obs entry in the app. Before the redesign users struggled to achieve their tasks and found inputting the observation extremely confusing, this process could take well over a minute. Every input was simultaneously on the screen and there were many parameters for the type of recording, be it sitting or standing, the laterality (left or right side of the body) and finally the specific limb where the blood pressure sphygmomanometer was attached.

There were also segment controls at the top to allow for multiple recordings. These added more confusion, as the same controls were repeated below for the second recording. The preselected headers looked almost identical to the standard drop-down input and users kept trying to wrongly interact with them.

Visual perception is one of the most productive and quickest ways through which people are able to obtain information and get it processed by the brain. I thought I would try to accompany the text with illustrations, so for a left arm or a patient in a lying position, I would have a suitable icon or image to help speed up the process.

I liked the way the Aer Lingus App was organised, it had multiple baggage options on a single screen and I explored similar concepts in my sketch book. It soon became apparent that there were still too many options on the screen.

Finally it occurred to me to use progress disclosure to break down the problem into steps and slide over to a new screen for the next step. I integrated the laterality and limb selection into one step and so the user could select the option on a single bodymap.

I reconstructed the flow into the following steps:

  • Step 1, Select type – Single reading, Bilateral reading or Lying and Standing reading.
  • Step 2, Choose recording area – Left/right arm or leg.
  • Step 3, Position- sitting, standing or lying.
  • Step 4, Add blood pressure values.

If for example the user selected the bilateral recording at step 1, then the steps would change accordingly.

  • Step 1, Select type – Single reading, Bilateral reading or Lying and Standing reading.
  • Step 2, Choose recording area – Left or right arm or leg.
  • Step 3, Position- sitting, standing or lying.
  • Step 4, Add blood pressure values (Lying is then defaulted as the body position).
  • Step 5, Choose recording area – Left or right arm or leg.
  • Step 6, Add blood pressure values (Standing is defaulted as the body position).

This solution was a radical departure from previous design, I knew it would be a big sell to the Product Director to get something so radically different approved. A semi-interactive InVision prototype would not be enough to convey my idea so I decided that the best way to demonstrate it was to quickly build a simple prototype using CSS and HTML. This way the prototype could be used on a phone so they could feel the speed and ease of use.

Our Clinical safety officer is a practising nurse and a wealth of information on the realities of working in a hospital, so he helped me find the standard bodymap images used by clinicians. I recreated my own version of a bodymap in Illustrator, so it could be turned into an SVG, which would be responsive and clickable on mobile.

To get the mobile experience I used one of my favourite Gulp build tools for browser testing, called BrowserSync. This allowed me to test the prototype on the phone's browser mimicking the mobile experience. We used the Ionic Framework for the app, which is built on standard Web Technologies, so I knew that anything I tested could be easily replicated by the engineers.

I made a single HTML page that had different sections to represent the different steps and slid between the different states in the viewport, similar to how an image sprite works, that changed the flow of the steps when an option was selected.

Screenshot of the Blood Pressure input before the redesign
Screenshot of the Blood Pressure input before the redesign
Screenshots of Aer Lingus App
Screenshots of the Aer Lingus App
I liked the use of icons and text to select baggage options in the Aer Lingus App.
Photocopy of original Body Map from the NHS
Photocopy of original Body Map from the NHS
Wireframe sketch of blood pressure input
Wireframe sketch of blood pressure input
There were options to have all the parameters visible in a single screen.
Wireframe sketch of blood pressure input
Wireframe sketch of blood pressure input
Two-step option to select options on a body map in conjunction with the body position on the first step and the input the Blood Pressure recording on the second step.
Wireframe sketch of blood pressure input
Wireframe sketch of blood pressure input
Three-step option starting with the body map and separating each step into individual screens.
Video demonstrating the first Blood Pressure prototype
Sadly this video is all I have of this prototype, when I was getting a replacement hard drive the files did not back up to Microsoft Onedrive Microsoft Onedrive.
Medium fidelity designs for Blood Pressure
Medium-fidelity design for blood pressure flow

Final

Pro-duct

Product tested the prototype with the Clinicians, they were extremely happy with the speed and perceived simplicity. With a few tweaks we added the solution to the app and “3 second Obs” was born. The use of progressive disclosure worked very well with complicated medical workflows and it laid the foundation to solve many problems we had in the future.

Before:

Video of the Blood Pressure flow before the redesign
The visual design is different here as we were exploring different fonts, colours and styles at the time.

After:

Screen recording of final release demonstrating the blood pressure input after development was completed
a picture of research notes on an office wall

Completed Obs

Subsequently the ability to chain up all the six Obs entry screens into one singular session was added. By adding a start button that queues up each recording to allow the entry of the entire Observations and NEWS calculation to completed in under a minute.

Screen recording of final release demonstrating entire vital signs observation flow after development was completed
I think this is a great example of how progressive disclosure can simplify the most complicated real world flows on mobile devices.

Outcomes

Electronic Observations goes live  🥳

On the 27th November 2019, After four years of development and passing all rounds of piloting and clinical testing, the eOBS app went live, in conjunction with the whiteboard, inWye Valley NHS Trust.

❝ As CCIO (Chief Clinical Information Officer) I have been really pleased to see eOBS roll out so successfully across the trust. The feedback from staff has been very positive. ❞
— Dr Jake Burdsall
Consultant Gastroenterologist & CCIO at Wye Valley
Jan 29 2021 Twitter
❝ eOBS is so much easier! A better way to communicate with the nurses. ❞
— Sophie Prothero
Healthcare Assistant at Wye Valley NHS Trust
Mar 26 2021 Twitter
❝ Great Job with eOBS. Nothing but positive feedback from AMU (Acute Medical Unit). ❞
— James Bartlett
Consultant Acute Medicine at Wye Valley NHS Trust
Mar 21 2021 Twitter
❝ Extensive reporting of our eOBS solution has allowed us to help Trusts manage the unprecedented demand for oxygen due to Covid-19. More than fundamentally useful, from a patient safety perspective downright essential. ❞
— Tony McConkey
Clinical Director, Pharmacy and Medicines Optimisation at Wye Valley NHS Trust
Apr 23 2021 Twitter
❝ As a clinician working on the wards, I have benefited from the ability to review observations from the patients bedside. ❞
— Dr Jake Burdsall
Consultant Gastroenterologist & CCIO at Wye Valley NHS Trust
May 7 2021 Twitter
❝ The ability to view the observations in a format that mimics the traditional obs chart has allowed us more senior clinicians to transition to the eOBS without having to change our way of working. ❞
— Dr Jake Burdsall
Consultant Gastroenterologist & CCIO at Wye Valley NHS Trust
May 28 2021 Twitter
❝ The mobile platform has proved popular with the junior doctors. There are also clear benefits to patient safety. ❞
— Dr Jake Burdsall
Consultant Gastroenterologist & CCIO Wye Valley NHS Trust
Jul 2 2021 Twitter
❝ eOBS is very handy and easy to use. We can always monitor ALL of our patients using one device. ❞
— Sidney Taquiam
Deputy Sister at Wye Valley NHS Trust
Jul 30 2021 Twitter

Reflections

This project was my first foray into the world of both Mobile and Medical software. I found working with the latest technologies in a previously unknown sector fascinating and exhilarating, not to mention all the karma points I acquired by working on an ethical product.

The product has been a success for IMS Maxims, and I was delighted to be a part of the team that made hospital workflows easier for staff. The blood pressure input was a game changer, it was unlike nothing the clinicians in the hospital had seen before and its use of progressive disclosure paved the way to solve many complex medical workflows in the future. To hear the Clinical Director at Wye Valley Trust, explain that eOBs helped them manage the demand for Oxygen during the Covid-19 pandemic was incredibly heart-warming for me. So maybe in the words of the comedy TV show Silicon Valley, our software “made the world a better place” 😅.

←

Surgical
Noting

This concept prototype allows surgeons to take medical notes with an Apple pencil on an iPad.

Go to Case Study

→

Digital Whiteboard

A brand new product designed to replace traditional analogue whiteboards which allows real time Admission, Discharge & Transfer of patients on mobile.

Go to Case Study