top of page

FrontLine

FrontLine is an app designed to help nurses effectively communicate and log medical events and interventions. Nurses can easily see timestamps of their past interactions, and most importantly, never forget to log incidents, no matter how small, conveniently through the Apple Watch companion app.

Project Timeline

4 weeks - February 2021

My Role

UX Researcher, Design Strategy, UI/UX Designer

Tools

Sketch, InVision, POP, Illustrator

Scroll for project case study

PROJECT
FrontLine Mockup

Problem Space Discovery

The COVID-19 Pandemic as a motivator

The historic pandemic has greatly affected the workloads of healthcare workers and nurses in particular. Excessive overtime hours are bound to decrease nurses' overall wellbeing, which in turn could impact their ability to deliver their medical services to patients in need. For this project, I wanted to better understand the daily shortcomings that healthcare workers face in order to design a digital solution that can help maximize their efficiency, efficacy, and streamline their workflow. This can translate to an elevated patient experience as a result.

Secondary Research 

Current healthcare worker challenges

The pandemic has placed unprecedented stress onto the healthcare system and medical institutions around the world. Through my research, here are some of the key challenges facing healthcare workers during this time:

  • There is a shortage of available healthcare workers due to the increase of incoming infected patients and inevitable contamination of staff as a result.

  • Staff shortages are directly linked to a significant spike in overtime hours for available healthcare workers, especially for registered nurses.

  • It's a thankless job, but nurse pay has remained virtually unchanged considering the exceptional importance of their services at the front line of this pandemic.

Quantitative Data

Key Statistics

20%

of all COVID-19 infections were among healthcare workers

1st

Nurses make up most of infections among healthcare workers

1%

is the increase in pay that Ontario nurses received in 2020

26%

of nurses worked overtime during the year of 2020

~14h

Nurses working overtime often do 12 to 16 hour shifts back to back

2x

Experienced nurses aged 35 to 54 saw their overtime hours double

statistics by Public Health Ontario, CTV News, and Statistics Canada

User Interviews Insights

Understanding a nurse's goals and frustrations

To learn more about some of the common nurse behaviours and frustrations, I've had a virtual conversation with three (3) of them. Nurses were all in their mid to late twenties. It was a challenge to find an ideal time slot in which we can both be available. With that said, I personally made adjustments to ensure I can meet their busy schedule. Interviews lasted about an hour, and some of the shared insights and frustrations are divided into themes below:

Communication ☎️

Registered nurses often experience halts or delays in the care they provide due to miscommunications, and even unlogged incidents. Information omission could be dangerous in certain cases.

News & Resources 🏥 

COVID-19 health measures are constantly changing, leaving some nurses confused about measures they need to adhere to in their specific institution (besides the publicly known and obvious general measures).

Support 🤲 

Due to restrictive COVID-19 health measures, younger and less experienced nurses can sometimes find themselves unable to reach more experienced nurses as effectively as before the pandemic.

"Patient incidents sometimes do not get charted in the computer system due to our busy workloads, and sometimes the computer terminal is just out of reach" 

"It frustrates me how inconsistent COVID-19 measures are. They always change. We get emails about them but honestly I don't think emails are ideal, they're easily overlooked..."

Persona & Experience Map

Keeping the nurse experience central to my design 

I was able to craft a persona and their experience map from the gathered interview insights. Moving forward, this will help me find opportunities that can guide my design decisions and strategy in targeting the main users of my digital solution: registered nurses. 

Persona Xavier Sage
XP Xavier Sage

Looking into the persona and their experience map, better communication is clearly important to ensure a streamlined workflow for the team. Xavier's forgetfulness in this instance could mean the next nurse that takes over the patient may not have all the contextual details they may need to provide care.

With this in mind, we can declare our project's design question:

Design Question

How might we accelerate event logging for nurses in order to streamline their workflow and help them save valuable time?

Task Selection

Focusing on accelerated event logging as MVP

By using my HMW statement and considering the needs of the Xavier Sage persona, I was able to create a set of several user stories under two (2) epics in order to better define the function of my product. To create my minimum viable product, I chose the following epic and user stories by taking into consideration the core value proposition.

Core Value Proposition

To accelerate and simplify the process of event logging for nurses 

Core Epic

Effective Communication

Stories and Epics

The above chart shows 14 user stories under this epic. Highlighted are the main ones I chose to move forward with.

The chosen stories I'm going with can be defined through two (2) tasks. The first one is to report an incident, and the second one is to receive confirmation.

I can now start thinking about how the interaction process will look like when the nurse uses this product. This can be illustrated through the main task flow below. It depicts the nurse using Apple Watch to log an unexpected incident with one of their patients, and receiving a confirmation upon success.

User Task Flow

Sketching & Wireframes

Exploring quick ideas with pen and paper

My next step was to start ideating some interface elements very quickly. I knew I was designing primarily for the Apple Watch, meaning things have to be extremely straight to the point, especially when this tool is for nurse use. I also briefly explored how the watch app would work in tandem with its mobile app for iPhone. I do intend to add an iPhone app to this project.

There is a a reason why I'm designing for the Apple Watch first. Although in many hospitals, nurses are encouraged to stay connected with their loved ones at home, there are still some staff managers that frown upon smartphone use and deem it unprofessional. The Apple Watch's interface is stripped of distractions, and is very task driven.

Sketching
Watch Wireframe

Usability Testing: 2 Rounds

Testing the low fidelity prototype

In order to test as quickly as possible I've decided to start my first round of testing with my wireframe sketches with the help of the Marvel POP app. Photos of my sketches were rendered interactive and testable. This iteration of the prototype was tested with five (5) users, with the presented task being to "successfully report an incident".

Low Fidelity Prototype

Notable Changes

2 out of 5 users mentioned the negative connotation that the "Report Incident" wording has. They mentioned it implies that it's always something bad that needs to be reported, and have asked me if it was only for emergencies. They brought up a great point, and was something to consider for a refined prototype.

Changes for the Mid Fidelity Prototype

Changing the "Report Incident" text to a more general use case like "Log Event"

Mid Fidelity Prototype

Notable Changes

1 user mentioned the tap to record button confused them, making them think that pressing it would in turn expand more options that they may choose from.

1 user was left feeling a little anxious because of the uncertainty in the ability to edit or modify any voice recordings. They let me know that they thought it would be very helpful to whoever is using this app to know that they may edit after the fact, or as soon as they're done with the voice recording.

1 user highlighted that the text may be too small for them to read.

Changes for the High Fidelity Prototype

1. Including a universally recognizable microphone icon to imply the ability to record text.

2. Present the user with clarity on the ability to modify text, before they choose to begin a recording. Also, including the ability to add more voice notes if needed.

3. Refer to the Human Interface Guidelines for watchOS for proper text sizing and iconography.

High Fidelity Prototype

Colour & Typography

Brand Identity & Design Language

According to Apple's watchOS Human Interface Guidelines, logos and branding components need to be toned down inside the app. The reason for this is the way the Apple Watch is used: it's glanceable, straight to the point, and very compact, meaning the app should optimize components to only the ones that provide in-the-moment value.

For those reasons, I will be sticking to the San Francisco Compact font family used across the Apple Watch experience. It was designed by Apple for improved legibility and functionality. In terms of a brand colour, I have chosen to go with a scrub blue, reminiscent of a nurse's outfit colour.

Description of Line Items

SF Compact Display - Regular

SF Compact Text - Medium

Page Titles & Primary List Items

#4DC7E1

Iconography

Icons were conceptualized and designed by myself to match the colour and the simple aesthetic of the rest of the application. Below are all icons utilized:

FrontLine.010.png

Next Steps

What's next for FrontLine?

This entire project was focused around the Apple Watch experience, primarily due to the MVP and the main value proposition of this digital product. With more time, more user stories and tasks can be answered, and more features added. These other features will likely be for the iOS mobile application.

bottom of page