PRODUCT
-
App for firefighter and paramedic use during emergency treatment
-
Mobile Design
-
High Contrast
-
Icon Design
MY ROLE
-
Sole UX Designer with an Agile team of developers and project managers
DEVELOP & DELIVER
-
Ideation
-
Wireframes
-
Prototyping
-
Usability Testing
DISCOVER & DEFINE​
-
User Interviews
-
Field Studies
-
WCAG Protocols
-
Heuristics
-
Information Architecture
-
Mapping
design problem
Create an app for a Fire Department in that would enable Paramedics and Firefighters to access over 100 protocols, procedures and medication dosage calculations quickly and accurately while responding to emergency calls in extremely variable conditions.
Stakeholder interviews
Extensive interview sessions were completed with the stakeholder and two additional staff members. Multiple applicable app features were generated, then several of the most pertinent were settled on and the remaining concepts were postponed for future upgrades.
Current Version
-
Scene Sizeups for Structure Fires
-
Medical Protocols​​
-
Pediatric Emergency Guide
-
Dosage Calculator
Future Version
-
Hospital Locations and Codes
-
Lab Values
-
Intraosseous Infusions
-
Ventilator Functions
On-Scene Ethnographic Studies
The research gathered up to this point was valuable and actionable, yet it felt a complete picture of the conditions of usage was lacking. What was required was on-scene ethnographic research. Multiple ambulance ride-alongs were arranged, traveling with crews to varied on-scene emergencies, from motor vehicle accidents, "bystander down," cardiac arrest, industrial accidents and medical calls to residences and retirement homes.
​
This data was invaluable and helped establish a more effective and efficient app. The missing aspect was primarily environmentally based. The conditions were not well understood by the average person and had to be experienced personally. There were extremes of temperature, weather, visibility, night vs. day, rain and snow, loud, distracting environments of flashing lights, noise and severe anxiety in patients, family and bystanders.
​
This cloud of chaos was overwhelming at times, but it solidified the need for a simple, clear, easy to use app with high visibility. The design and testing of the app subsequently progressed.
Mapping & Prototyping
I was on an agile team of developers, product and project managers, working remotely and completing two week sprints. We are working on a prototype that is actively being coded and will be sent out soon to the field for firefighter/medic testing.
​
I immediately found the proposed color scheme of red on blue to be difficult to read. I designed an alternate color scheme, created a style guide and color palette and then sketched three sample screens with different colors (B, C & D Below). I ran an analysis of the colors to make sure they follow Web Content Accessibility Guidelines (WCAG) 2.0.
A
Original Screen A
WCAG2 Ratio: 2.5/1
D
B
C
Improved Screen C
WCAG2 Ratio: 6.22/1
The team and the stakeholders all chose screen style "C" (above). The design was to be simple and clear, so I chose a combination of Cabin and Roboto fonts as they were easy to read. The contrast ratio for the original proposal "A" was 2.5/1; with the above "C" design I was able to increase the contrast to 6.22/1, which is well above the WCAG 2 recommended ratio of 3.5/1. This improvement will enable the app to be more accessible to the product users and provide a higher contrast visibility. Since the color blindness gene is linked to the X chromosome, 95% of all colorblind people are male and since 4% of firefighters in the U.S. are female, there is a statistically high probability that there are firefighters that need to be accommodated for this factor.
design elements
Color Palette
Typography
Standard Icons
Custom Icons
Once the accessibility requirements were met, the color palette, typescale and icons were created in Sketch. Several designs were then wire-framed and tested. The app had to convey a lot of data so the information architecture had to be precise and very clear. The primary menu had six key groups, Protocols, Fire, Medical, Drugs, Hospital and Apparatus. Below are the screens for the 100+ Utah State Emergency Protocols.
Detail of dropdown design for scene sizeup:
Some of the building type layouts:
USABILITY TESTING & Research
As a proponent of fail fast/fail often, I tested the designs at each step with different users. Up to this point, the feedback was quite positive with many helpful suggestions for improvement. I was, therefore, quite surprised at how many testers really disliked the pediatric design above. The colors were based on the Broselow Pediatric Emergency system used worldwide and recognized in most medical textbooks and publications.
So why did it fail? I tested the design with more people and conducted short user interviews. The overall consensus was the large color blocks were distracting and the visual hierarchy was hard to understand for such critical data. More iterations and research created an improved design that was more acceptable (below).
The client requested a dosage calculator that would provide the correct dose of emergency medication according to patient mass. Below are samples of the resting calculator as well as pediatric and adult doses for the treament of life threatening Supraventricular Tachycardia (SVT).
results and conclusions
From start to finish, this was an exceptional experience and is one of my favorites. Design projects that can affect life and death situations are very challenging, but incredibly satisfying. The parameters were broad, from field research, user interviews and wireframes to ideation, prototypes and usability testing. Above this was the extremely critical requirement the all of the data be 100% accurate, without exception. This entailed a great deal of precise research from different sources, comparing treatments, procedures, diagnoses and dosages just in case one of the source publications was incorrect.
​
Fortunately, treatment is rigidly specified and limited to acute emergency care and stabilization for field paramedics. Creating a similar application for physicians would have been nearly impossible. I worked closely with the development team to create an infrastructure that would accommodate the inevitable changes in emergency treatment so the application would not require annual redesign.