top of page
Header

Emergency Medical Services

Web App Design + Multimodal Usage

Project Timeline: 4 weeks

HeroShot1.png

Providing a fluid two-way form of communication between the caller (CMU students) and the emergency responders.

My Role

Problem Definition

Research

Synthesis

Visual design (Caller/EMS Team)

Screen Flow

Micro-interactions

Team

Aditi Magal

Jocelyn Gao

Carolyn Zhong

Methods

Guerrila Research
Semi-structured Interviews
Customer Journey Map
Personas
Storyboards
Speed Dating

Tools

Figma
After Effects
Photoshop

How might we reduce the anxiety for callers while they are waiting for the responders to arrive?

Context

Emergencies are frightening...
Users can be under lots of stress and the medical teams have to act quickly upon arriving on the scene. Calling for help is supposed to reduce anxiety. It’s difficult to find reliable information from the internet and can be overwhelming with multiple sources while questions race through their heads.

ambulance.png
caller.png

"What should I do while I wait?"

"How long until they arrive?"

"How can I check?"

Caller

(CMU Student)

ems.png
dispatcher.png
chief.png

Responders

(Dispatcher + EMS Team + EMS Chief)

Problem

There is a linear form of communication that is efficient during emergency calls; however, this leaves the caller in the dark after they hang up which causes anxiety during the waiting time.

Problem+Solution

?

caller.png

Caller

dispatcher.png

Dispatcher

ems.png

EMS Team

Solution

A fluid two-way form of communication that allows for reliable and secure information to be transferred between the caller (CMU students) and the EMS team.

NewCommunicationDiagram.png

Scenario

Scenario

We created different designs for the caller, dispatch and EMS team to help maximize the value that each group would receive. Each design prioritizes the most important information for each role and clearly displays the appropriate information to improve the transfer of information. This solution aims to help improve the experience of the point of first contact. Let's walk through a sample scenario.

Imagine...

caller.png

Hello? I think my friend is too drunk, I’m not sure if he’s okay...

dispatcher.png

Okay, is your friend responsive?

Dispatcher

The dispatcher needs to quickly diagnose the situation and take the appropriate actions. He inputs the information, sends a team to the caller's location and provides steps for the caller to take while waiting.

Key Features

phone_dispatcher_main_framed.png

1

Optimized Information Input

Presets and free form fields to improve the ability to respond to a variety of scenarios.

2

Providing Reliable Information

Eases the anxiety of the caller by providing one reliable source of information

3

Live Status on EMS Team

Eases the anxiety of the caller by providing one reliable source of information

caller.png

What should I do while I wait?

Caller

After hanging up, she receives a text that links her to the interface below. She’s worried about her friend and is anxious about the EMS will arrive.

Key Features

HeroShot1.png

1

Flexible Communication

Different scenarios require different forms of communication. Users can choose text, audio or video to suit their needs.

2

Reliable Source of Information

Callers receive direction and reassurance directly from medical professionals.

3

Live Map

Increased transparency of the arrival time and location of the responders.

ems.png

Okay, her friend is laying on his side...

EMS Team

The EMS receives an alert from the dispatcher that contains all the essential information at a quick glance. They are able to communicate with the caller if there are any issues.

Key Features

1

Flexible Communication

Different scenarios require different forms of communication. The EMS team can choose text, audio or video to suit their needs.

2

Accessible Information

Reducing the cognitive load on the EMS team and providing information to help expedite the process.

3

Location Change

Every second matters. If a change in location can save time, the team can request a new meeting spot.

EMS_Home.png
EMS_Home_expanded.png
phone_ems_confirmed.png
Key Interactions

Key Interactions

Caller going through recommendations from dispatcher

After the caller hangs up, they receive a text that leads them to the application. They are able to see the recommended steps and fill out the appropriate information. Additionally, there is an option to attach an image as it can help expedite the diagnosis from the responders.

Caller_Initial.gif
EMS_Location_Confirm.gif

EMS Team requesting an alternative pick up spot

Here is an example of the team requesting a nearby location as a new meeting spot as it would reduce the time to the scene by two minutes. The users have the option to accept or decline when they receive a push notification.

Caller receives an alert when the team is nearby

In addition to increased visibility to where the EMS team is, the caller will also receive an alert when the responders are two minutes away.

Caller_Alert.gif

Design Process

Design Process
ASB.png

Analysis synthesis bridge model

The analysis-synthesis bridge (ASB) model was utilized as the design approach in this project it allowed us to innovate through reevaluating the model of the current to create an improved preferred future. This was particularly effective because the current EMS structure has remained unchanged for many years.

In addition to the ASB model, we incorporated elements of the double diamond, specifically the concept of diverging and converging during the prototype and ideation phase. This allowed us to avoid tunnel visioning and explore off the beaten path.

caller.png
dispatcher.png
ems.png
chief.png

Research and Scope Definition

Research

Conducting interviews with the EMS team

We first conducted secondary research to explore the space of emergency response teams and discover opportunities. We identified three major stakeholders as the EMS Chief (business owner), EMS team (service provider), and Callers (customers). To clarify, these callers are CMU students who have previously interacted with the EMS. After discovering these major stakeholders, we conducted interviews to gain a deeper understanding of the relationships between the stakeholders. It was difficult to interview the EMS team as there were many details that were confidential and unable to share with us.

brainstorming.png
chief.png
ems.png
ems.png
caller.png
caller.png
caller.png
caller.png
caller.png
caller.png
caller.png

7

1

2

Callers

EMS Chief

EMS Team

Impacting the point of first contact

By beginning with a broad scope, we were able to let the data drive our decisions without predetermining the scope prior to analyzing the data. This reduced the effects of confirmation bias and allowed us to focus on a real user need.

The two customer journey maps revealed that the callers experienced two phases before interacting with the EMS team where they have to make a critical decision of whether to call the EMS or not. Although this was important, we identified the phase of waiting for the EMS as a critical phase where there was an opportunity to create value for multiple groups of people.

Furthermore, we focused narrowed the scope of our users to students at Carnegie Mellon University and the EMS team at CMU because we had the most information about this demographic. By having a narrow scope, it enabled us to have a potentially higher impact and create metrics in the future to measure that impact.

csjmap 1.png

Phases of an emergency

PhaseSelection.png
CSJ_Caller.png
caller.png

Customer Journey Map - Caller

CSJ_EMSteam.png
ems.png

Customer Journey Map - EMS Team

Synthesis

Research Synthesis

Synthesizing the research into personas

Looking at pain points, user data and opportunities helped us create fictional personas that are digestible, engaging and driven by data. Personas served as a boundary object within a team to help us quickly communicate ideas and validate or disprove assumptions. We realized that the efficient and accurate transfer of information was even more crucial in these time-sensitive and sometimes life-threatening situations. The personas were used to evaluate each scenario from different perspectives, to identify overlapping needs such as transparent communication provides reassurance to both callers and the EMS team during stressful situations. 

Persona_Caller.png

Caller

Persona_EMSTeam.png

EMS Team

Pain points

caller.png

Lack of transparency about the EMS and ability to access reliable information

confusion 2.png

User's lack of knowledge about EMS protocol creates hesitation

dispatcher.png

Difficulty of knowing the real time position of everyone

transfer 2.png

Users want control and more direction from medical professionals on what to do

ems.png

Dealing with aggressive patients

chat 2.png

Transparency from communication between the EMS team and patient can ease anxiety

Insights

Validating Needs Through Storyboards

People are anxious while they wait

Through the use of these boundary objects we created scenarios to further understand how our design could help them. Using personas in scenarios adds value to personas because it is a form of grounding these abstract findings and allows us to evaluate the validity of these personas. By utilizing the method of speed dating to validate user needs, we reframed the problem and focused on “How might we make users feel safer during wait time?”. The narrow scope to a specific phase allowed us to also think about how we could provide value to all three stakeholders and improve the transfer of information.

scenario1.png
scenario2.png
scenario3.png
scenario4.png

Creating a model of the preferred flow

After identifying the scope of the project, we created a model of the preferred flow to understand the detailed interactions both internally and externally.

We focused on creating value for the caller, EMS team and dispatcher as this would ultimately create value for the EMS chief as well. By creating this shared mental model of the preferred state, we were able to determine the functionalities and prioritize the features that would provide the most value without designing the details.

This was a crucial step in exploring variations of designs without losing a shared vision of what our designs should accomplish. The model also helped clarify the specific areas where the users would interact with the EMS team or dispatcher.

ideation1.png

What features are essential and why?

By prioritizing the most valuable components of our design, we were able to keep the designs as minimal as possible. Although we are giving more value by designing these new features, we did not want to detract the value of our designs by cluttering and overwhelming any party with extraneous information. One of the challenges of this project was to understand how we could add value to the way information was transferred without decreasing the efficiency and speed of communication. By analyzing the information from our research, we identified the following as the key elements in each design.

caller.png

Caller

1

Contact with EMS team (Video, Call, Text)

Use multiple modes of contact for various scenarios
(eg: texting for loud environments)

2

Map

Provides transparency of the location of the EMS team

3

Recommendations

Access to a reliable source of relevant information

ems.png

EMS Team

1

Contact with caller (Video, Call, Text)

Provides a bidirectional form of communication

2

Map

Allows for flexibility in meeting location

3

Caller details

Provides access to caller details to lower cognitive load

1

Caller information

Creates effective way of recording and distributing information

dispatcher.png

Dispatcher

2

Location of caller and EMS team

Allows complete knowledge of the situation

3

Optimized input fields (preset, free form)

Streamlines method of sending additional information to caller

4

Chat

Provides open communication with caller

Visual Breakdown

Design Breakdown

Start simple, keep it simple

We started with wireframes that were drawn by hand to flesh out the general flow of the screens. One of the issues we identified early on was how the user would navigate to the website.

Due to the stressful nature of the situation, we decided that the user would receive a text from the dispatcher after calling in order to reduce the effort needed to access the resource.

Based on the scenarios and roles of each group, we decided whether we should design both a mobile and desktop version.

Callers can be in various environments which resulted in having both a mobile and desktop version. Dispatchers operate in the same environment and need the screen real estate to manage the vast amount of information. The responders on the EMS team are constantly on the move and a mobile version would be best suited for them.

ideation3.png

Caller (Mobile)

caller.png

In both the desktop and mobile version of the caller, the 3 forms of contact and ETA are always visible as we identified them to be the essential features to ease anxiety. On mobile, the contact bar is placed at the bottom as they are easily accessible, even if the user is operating with one hand. The ETA banner is placed at the top with large font size and high contrast to ensure high readability. Finally, depending on the user, the recommendations can be expanded and replace the map entirely.

phone_caller_main_framed.png
Caller_Home_Expanded.png

ETA

Always available at the top even if recommendations are in the expanded state.

Recommendations

This can be collapsed or expanded depending on the situation.

Contact

Always visible to provide a constant ability to contact the EMS team.

Caller (Home)

Caller (Home - Expanded)

Caller (Desktop)

The desktop version of the caller is visually similar and is comprised of the same components because having more pixels, does not mean we have to have more components. The minimalistic look only displays the crucial information to the user in times of an emergency. Additionally, through the use of color and spatial positioning, the user can quickly identify the major features with preattentive processing.

Caller_desktop.png

Contact

Always visible to provide a constant ability to contact the EMS team.

ETA

Always available at the top even if recommendations are in the expanded state.

Recommendations

This can be collapsed or expanded depending on the situation.

Caller (Home)

EMS Team (Mobile)

ems.png

The EMS mobile screens mirror the contact and ETA design aspects of the caller screens because they are crucial in responding to the emergency. The details of the situation replace the recommendations and have the same collapsable and expanding function. The EMS is able to easily identify if the caller has confirmed or declined their request in location change with a green or red flag.

EMS_Home.png
phone_ems_details.png

ETA

Always available at the top even if caller information is in the expanded state.

Caller Information

This can be collapsed or expanded depending on the situation. It shows the information about the caller, as well as any recommendations that the dispatcher has sent.

Contact

Always visible to provide a constant ability to contact the caller.

EMS (Home)

EMS (Home - Expanded)

Location change request

This feature allows the EMS Team to request a change in the meeting location if it means that they can safely reach their caller in a shorter amount of time. For example, if there are one-way streets and a small adjustment would mean saving a few precious minutes. If the EMS team chooses to request a change in location, the caller will receive a notification and can choose to accept or decline depending on the situation. There is a field to enter notes as the reasons for a change in location and an alert to help error prevention during time sensitive situations.

LocationRequest_1.png
LocationRequest_2.png
LocationRequest_3.png
LocationRequest_4.png
LocationRequest_5.png

Confirmation

Request Location

On Hold

Confirmed

Declined

Dispatcher (Desktop)

dispatcher.png

The dispatcher’s desktop screen is designed to have a top-down flow of entering information. There are both text input fields and dropdowns to allow for flexibility and efficiency in time-sensitive situations. The screen is clearly partitioned into four parts to help distinguish the information. The clear sections help the dispatcher quickly parse and organize the abundance of information they receive with each case. Reducing the information required in the working memory allows the dispatcher to focus more attention to responding to the situation.

Caller Information

A streamlined process of recording and distributing information about the caller

EMS Roster

This helps the dispatcher see who is on call and which members are best suited for the call.

Dispatcher_home.png

Dispatcher (Home)

Live Map

The map shows the real time location of all members on duty.

Recommendations

For common scenarios, they can quickly select preset categories, otherwise they can manually enter recommendations for special cases.

Case management

A system to manage all the cases that the dispatcher is tasked with.

Next Steps

Next Steps

If you can’t measure it, you can’t improve it.
- Peter Drucker

Creating Metrics

Due to the limited resources of time, we were unable to test our designs to the extent that we desired. Based on the following design principles and typographic signals to create clear designs, we are assuming that it can reduce the cognitive load that will result in faster preattentive processing and thus faster response times. We acknowledge that this assumption could be wrong and it would be best to record the response time with the current designs and compare them to our new designs to measure the improvement.

For the callers, a set of tasks could determine how quickly they are able to identify relevant information. Eye trackers could also be used to visualize which elements draw the user’s attention. For the dispatcher, several sets of patient information could be given over the phone and access how quickly and accurately dispatchers can enter the information. We acknowledge that lives are on the line in many of these scenarios. Therefore, we would only implement the designs into the field with the approval of the chief and after the run-throughs show significant benefits than the current designs.

These quantitative metrics are important in measuring the impact of these designs; however, it is equally vital to understand if callers actually feel a reduction in anxiety. This can be accomplished by tracking the heart rate and interviewing users after the situation. Although it is much harder to clearly define if there is a reduction in anxiety, talking to users can be telling in if the designs are successful. Based on the feedback of users, we would continue to refine the visual elements of the three designs to improve efficiency, usability and satisfaction of the designs.

Take Aways

Takeaway1.png

Less is more. Only design what is necessary.

Takeaway2.png

Brief moments in a user’s journey can still be high impact and value.

Takeaway3.png

Communication is often about transferring information efficiently.

Other projects

bottom of page