Alder Hey: Virtual Whiteboard

SUMMARY

Alder Hey Children’s Hospital was looking to optimise the existing process for pre and post-theatre. They previously had teams operate with a large whiteboard in the ward to track where a patient is up to in their process – from admission through to post-surgery.

This process was extremely manual, with staff having to write and amend information on the board and didn’t work in real-time as they would need to travel back to the area where the information is manually captured onto the board, rather than updating this at their patients bed.

ROLE

UX/UI Designer

Solo designer working at a fast pace to get a proof of concept over to the client. This was my first week in a new job.

Background

Alder Hey Children’s Hospital is one of the largest and busiest children’s hospitals in Europe. They treat everything from common illnesses to highly complex and specialist conditions and are currently recognised in the following areas:

  • A Centre of Excellence for cancer, as well as spinal, heart and brain conditions
  • A regional cardiac surgical centre
  • A Department of Health Centre for Head & Face Surgery
  • A Centre of Excellence for Muscular Dystrophy and the first UK Centre of Excellence for Childhood Lupus
  • One of four national centres for childhood epilepsy surgery
  • A designated children’s Major Trauma Centre
  • A World Health Organisation accredited health-promoting hospital
Where do I come into this?

I joined Blinx Solutions in July 2021 and after working through the companies design system and getting to understand their product, I was assigned this project as my first to lead the design on.

Understanding the problem

Originally, Alder Hey had only met with our CEO & Founder at Blinx so this meant it was going to be a little trickier to gather all the insights needed to fully understand the user’s needs and requirements. However, I was able to sit down with my boss as well as the Product Leader assigned to this campaign so we could discuss everything they had already taken from their initial meetings with the Hospital.

The first thing we realised is that we could meet the requirements of the user by creating a minimum viable product (MVP) that simply redesigned the whiteboard system they use, creates a staff facing dashboard with more confidential patient data on it, as well as creating a process tracking system in which nurses and doctors could easily move a patient along on their journey from admission all the way through to being discharged.

We were able to work with our Chief Medical Officer at Blinx Solutions to gather more insight as to how the process actually works while being on the ward. Here we sat around a whiteboard and roughly sketched out which interfaces I would need to design to meet the MVP. From this, we also highlighted 6 important stages of the patient’s journey. These were as follows:

  1. Admittance
  2. W.H.A.T (Weight, History, Anaesthetis sees patient & Theatre checklist)
  3. Pre-Op Check
  4. In Theatre
  5. Post-Op Recovery
  6. Discharge

It was now my job to design a system in which the doctors and nurses can briefly glance up at a monitor on the ward and easily see where the patient is through these 6 steps.

Wireframing the solution

Based on the above meetings and research I began creating wireframing some ideas. These initial sketches were vital in figuring out the sort of data I could show on each page, how a top-level structure could look for a page and where else I need to look into to make the most user-friendly interface for these medical professionals.

One area we mentioned having on the ‘Live Whiteboard’ would be a stages progress bar which was my core focus with this project, however our Chief Medical Officer explained that in his experience, a lot of staff on a ward would want all data available without the need for this to scroll or auto switch to a second page. This is an issue as there could be up to 25 patients on this whiteboard at any one time, meaning this could be a difficult UI to create without overcrowding the data.

High Fidelity Mockup

I began working on creating a new header for the system before working on anything else. This for me is the way I prefer to work. If I can get a solid design or theme set in a header (be this on an application like this or in web design) I believe I get a better feel for the rest of the system’s design.

Speaking with my team I knew that Alder Hey wanted a very personal touch to the application, whilst the app itself still needs to suit the Blinx Solutions design system.

To do this, I redrew a pattern from some Alder Hey pyjama’s I had bought for my girlfriend a few years ago. Fading this subtly into the header and adding both Blinx and Alder Hey branding has left me with the following design that was greatly received when showed back to the client.

After setting creating the header I then began looking into the structure of the system. I developed a patient roadmap as discussed would be part of our MVP along with an alternative screen showing overall wait times for each area. I took inspiration from the apple watch activity app. This would work in a similar sense, meaning the circles would all need to be closed, and any open rings mean that some jobs are incomplete.