UX CASE STUDY · EMERGENCY HEALTH · iOS

Be your own
first responder.

A trauma response iOS app built around the IFAK kit — teaching civilians and first responders to act with speed and confidence in life-threatening emergencies.

Frank Mellana
iOS (React Native)
TCCC / MARCH
Emergency Health
147K
Preventable trauma deaths per year in the US
3 min
Before death from uncontrolled arterial bleeding
88%
Of preventable combat deaths caused by hemorrhage
0
Apps that tie an IFAK kit to step-by-step emergency protocols
App Screens

Five screens.
One mission.

Every screen is built around a single question: what does a person in a high-stress emergency actually need right now?

Home
9:41▓▓▓▓
TRAUMA
Be your own first responder
+
EMERGENCY
Tap to open response protocols
Your IFAK Kit
🩸
Tourniquet
🩹
Pressure
💨
Chest Seal
🏠Home
🩹Kit
⚡Respond
📖Learn
Kit Detail
9:41▓▓▓▓
← Back
🩸
CAT Tourniquet
Stop life-threatening limb bleeding
Overview
How to Use
Critical Notes
The CAT Tourniquet is a one-handed device that completely stops blood flow to an extremity. It is the first line of defense against life-threatening hemorrhage.
WHEN TO USE
Arterial or severe venous bleeding from arm or leg that cannot be controlled with direct pressure. Amputations. Apply within 2–3 minutes.
🏠Home
🩹Kit
⚡Respond
📖Learn
Emergency Procedure
9:41▓▓▓▓
← Back Reset
🩸
M — MARCH
Massive Hemorrhage
4/7 steps
📞 CALL 911 IMMEDIATELY — do not delay EMS
✓
Call 911
Call emergency services immediately.
✓
Scene Safety
Ensure scene is safe. Don gloves.
4
Apply Tourniquet
T+1:00
Apply CAT tourniquet 2–3 inches above wound. Pull strap tight, twist windlass until bleeding stops, lock.
⚡ Write the time on the tourniquet
🏠Home
🩹Kit
⚡Respond
📖Learn
IFAK Kit
9:41▓▓▓▓
IFAK Kit
Individual First Aid Kit — 6 items
all
bleeding
airway
wound
🩸
BLEEDING
CAT Tourniquet
Stop life-threatening limb bleeding
🩹
BLEEDING
Pressure Bandage
Control non-limb wound bleeding
💨
CIRCULATION
Chest Seal
Treat penetrating chest wounds
🏠Home
🩹Kit
⚡Respond
📖Learn
Learn
9:41▓▓▓▓
Learn
Trauma education & TCCC fundamentals
📋
The MARCH Protocol
The gold standard for trauma response.
4 min read
↑
MARCH stands for Massive Hemorrhage, Airway, Respiration, Circulation, and Hypothermia. It is the framework used by military medics and civilian responders...
❤️
Recognizing Shock
Identify hemorrhagic shock early.
↓
⚡
Tourniquet Myths
Everything you learned may be wrong.
↓
🏠Home
🩹Kit
⚡Respond
📖Learn
Screen Breakdown

Every screen,
intentionally designed.

Each screen answers one question: what does this person need right now? Here's the thinking behind every decision.

9:41▓▓▓▓
TRAUMA
Be your own first responder
+
EMERGENCY
Tap to open response protocols
Your IFAK Kit
🩸
Tourniquet
🩹
Pressure
💨
Chest Seal
Response Protocols
🩸
Massive Hemorrhage
Apply tourniquet within 2–3 min
CRITICAL
🏠Home
🩹Kit
⚡Respond
📖Learn
01

Home Screen

The home screen is built around a single hierarchy: the emergency button comes first, everything else second. A user in crisis should never have to hunt for an entry point.

Central Emergency Button
Carried over from the 2019 original — the large red "+" is the visual anchor of the home screen. It communicates purpose before a single word is read.
IFAK Kit Preview
A horizontal strip of kit items gives quick access to reference without navigating away. Tapping any card deep-links to that item's detail.
Protocol Cards
Severity badges (CRITICAL / URGENT) let users scan quickly. Each card is a direct entry into the step-by-step procedure.
MARCH Reference Block
A persistent reminder of the MARCH framework — reinforces the mental model every time the user opens the app, building muscle memory over time.
9:41▓▓▓▓
IFAK Kit
Individual First Aid Kit — 6 items
all
bleeding
airway
wound
🩸
BLEEDING
CAT Tourniquet
Stop life-threatening limb bleeding
🩹
BLEEDING
Pressure Bandage
Control non-limb wound bleeding
🧵
WOUND
Combat Gauze
Pack deep junctional wounds
💨
CIRCULATION
Chest Seal
Treat penetrating chest wounds
🏠Home
🩹Kit
⚡Respond
📖Learn
02

IFAK Kit Screen

A browsable reference for all six IFAK items. Designed for two modes: quick scanning before an event, and deliberate learning between emergencies.

Color-Coded Left Border
Each card has a colored left accent that maps to its category — bleeding (red/orange), wound (amber), circulation (blue), airway (purple), tools (green). Pattern recognition without reading labels.
Category Filter Chips
Filters let Dana (the experienced user) jump straight to the category she's reviewing. All items visible by default so Emma (the novice) sees the full picture first.
Tagline Under Name
"Stop life-threatening limb bleeding" tells you when to use it in one line — without opening the item. Scanning the list gives a full mental model of the kit.
Taps to Full Detail
Each card leads to a 3-tab deep dive: Overview, How to Use, Critical Notes. Progressive disclosure from summary to step-by-step to warnings.
9:41▓▓▓▓
← Back
🩸
CAT Tourniquet
Stop life-threatening limb bleeding
Overview
How to Use
Critical Notes
The CAT Tourniquet is a one-handed device that completely stops blood flow to an extremity. First line of defense against life-threatening hemorrhage from limb injuries.
WHEN TO USE
Arterial or severe venous bleeding from arm or leg that cannot be controlled with direct pressure. Amputations. Apply within 2–3 minutes.
PREVIEW — HOW TO USE
1
Apply 2–3 inches above the wound (never over a joint)
2
Pull the free-running end of the strap as tight as possible
🏠Home
🩹Kit
⚡Respond
📖Learn
03

Kit Item Detail

Three tabs. Three mental models. A first-time user reads the Overview. An experienced responder jumps to Critical Notes. A student drilling technique stays on How to Use.

Tab 1 — Overview
What the item is, what it does, and when to use it. Written for someone who may have never seen the item before. No assumed knowledge.
Tab 2 — How to Use
Numbered steps in plain language. Short enough to follow in the field. The goal is to replace recall — the user should be able to execute without memorizing anything.
Tab 3 — Critical Notes
Red-bordered warning cards for common mistakes. "Never apply over a joint." "Mark the time." These are the facts that save or cost lives if missed.
Color Consistency
The item's category color threads through the hero, tab underline, step circles, and "When to Use" label — reinforcing identity without extra visual weight.
9:41▓▓▓▓
← Back Reset
🩸
M — MARCH
Massive Hemorrhage
4/7 steps
📞 CALL 911 IMMEDIATELY — do not delay EMS
✓
Call 911
Call emergency services immediately.
✓
Scene Safety
Ensure scene is safe. Don gloves.
4
Apply Tourniquet
T+1:00
Apply CAT tourniquet 2–3 inches above wound. Pull strap tight, twist windlass until bleeding stops, lock.
⚡ Write the time on the tourniquet
🏠Home
🩹Kit
⚡Respond
📖Learn
04

Emergency Procedure

The most critical screen in the app. Every element is there to reduce cognitive load in the worst possible moment — not to look good, but to keep someone alive.

Interactive Checklist
Tap a step to complete it — it dims, gets a green check, and the next step becomes active. The user doesn't have to think about what comes next. The app holds that for them.
Live Progress Bar
A red progress bar fills as steps complete. Gives a visual sense of how far through the protocol the user is — critical for handing off to EMS with context.
Tourniquet Timer
Carried from the 2019 original. Starts automatically on the tourniquet step. Records exact application time. Turns amber at 1 hour, red at 2 hours. Time of application is life-critical data.
Critical Action Highlights
Amber-bordered callouts for actions with zero margin for error — "Write the time," "Never over a joint," "Burp the seal if patient worsens." These stand out even at a glance.
9:41▓▓▓▓
Learn
Trauma education & TCCC fundamentals
📋
The MARCH Protocol
Gold standard for trauma response.
4 min read
↑
MARCH stands for Massive Hemorrhage, Airway, Respiration, Circulation, and Hypothermia — the framework used by military medics worldwide...
❤️
Recognizing Shock
Identify hemorrhagic shock early.
↓
⚡
Tourniquet Myths
Everything you learned may be wrong.
↓
Stop the Bleed
Free 2-hour ACS bleeding control course. Find a class near you.
FREE COURSE
🏠Home
🩹Kit
⚡Respond
📖Learn
05

Learn Screen

Between emergencies, users need to build competence — not take a course. The Learn screen is designed for micro-learning: one topic, five minutes, real knowledge gained.

Accordion Pattern
All topics are visible and scannable before any is opened. Users choose what they want to learn without being forced through a sequence. One tap expands. Same tap collapses.
Inline Reading
Content expands in place — no navigation to a new screen. Keeps the user oriented in the full topic list and makes it easy to jump between articles without losing their place.
Read Time Labels
"4 min read" sets expectations and reduces friction. Users are more likely to start something they know they can finish before their next meeting or their coffee gets cold.
Stop the Bleed CTA
The app teaches the protocol — but nothing replaces hands-on training. The free ACS course is surfaced at the bottom of Learn as a natural next step for users who want to go deeper.
Design Evolution

Original vision.
Rebuilt for scale.

The 2019 prototype established the core concept — an emergency-first trauma app with real-time tools. The 2025 rebuild retains that DNA while adding MARCH protocols, IFAK education, and a stress-optimized interaction model.

2019 — Original Prototype
2019 app screens showing registration, emergency button, timer, checklist, and video features 2019 feature overview showing video/audio and live stream capabilities
What the original established
"T" Brand Identity
Clean circular logomark. Bold, minimal, medical without being clinical. Red as the primary color — urgency, blood, action.
Emergency-First Home Screen
The large central red "+" as the home screen's primary action. Zero ambiguity about what this app does.
Tourniquet Timer (3:05:30)
The clock starts the moment the tourniquet goes on. Time of application is a life-critical data point — the 2025 rebuild carries this forward as a live, interactive timer.
Step-by-Step Checklist
Numbered steps for tourniquet application. This interaction model became the foundation of the 2025 Procedure Screen — now covering all MARCH protocols.
Video & Live Stream
Tutorial videos and real-time streaming for expert guidance. Referenced in the 2025 Learn section as embedded educational content.
2025 — What's new
Full MARCH protocol coverage · IFAK kit reference with 3-tab detail · Interactive step progress with haptic feedback · Category-filtered kit browser · TCCC education articles · Cross-linked kit→procedure navigation
The Problem
147,000
Americans die each year from preventable traumatic injuries. Most within the first hour.

The tools exist.
The training doesn't.

Millions of people own IFAKs (Individual First Aid Kits) — but freeze when it matters most. Equipment without practice is dead weight. The gap between owning a kit and being able to use it under stress is enormous, and almost no one closes it.

3 min

Average time before death from severe arterial bleeding — with no intervention

88%

Of preventable combat deaths were from hemorrhage — controlled by a tourniquet

0

Standardized civilian apps exist that tie IFAK contents to step-by-step emergency protocols

Research

Two users.
One shared problem.

Emma Williams
Prepared Civilian · Teacher · 34

Completed a Stop the Bleed course after a school incident. Owns a basic IFAK. Rarely reviews it. Freezes under stress and can't remember exact steps.

"I have the kit in my bag but honestly... if something happened right now I'd panic and forget everything."
Dana Brown
Active Responder · Trainer · 28

Personal trainer and competitive shooter. Carries IFAK daily. Has TCCC training. Wants fast access to reference without friction — not a training app, a field tool.

"I know what to do but in the moment I want a protocol I can follow — something that thinks for me so I can act."
01

Stress degrades recall — checklists don't

Under acute stress, cognitive load spikes and memory degrades. A sequential checklist offloads working memory and lets the user act, not think. This became the core interaction model for emergency procedures.

02

Equipment knowledge and procedural knowledge must be linked

Users know what a tourniquet is. They don't know how it connects to the MARCH protocol, or when to pack a wound vs. tourniquet. Cross-linking kit items to procedures bridges this gap in-context.

03

Education must fit micro-moments

Neither persona has time for a course between tasks. Short, in-app reads (3–5 min) with zero navigation overhead enable learning in bus rides, waiting rooms, and lunch breaks. The accordion pattern on Learn serves this.

Information Architecture

Four tabs.
One clear purpose each.

🏠

Home

Quick-access overview. Emergency banner front and center. Kit preview and protocol cards.

🩹

Kit

All 6 IFAK items. Filter by category. Deep-dive into each item: overview, how-to, critical notes.

⚡

Respond

Emergency protocols sorted by severity. Step-by-step interactive checklists with MARCH framework.

📖

Learn

TCCC education. MARCH protocol, shock recognition, tourniquet myths, IFAK building guide.

Primary Emergency Flow — Massive Hemorrhage

Open App
→
Emergency Banner
→
Respond Screen
→
Procedure Checklist
→
Step-by-Step
→
Complete

2–3 taps from app open to first actionable step. Zero friction on the critical path.

IFAK Kit Design

Six items.
Every one mapped.

Each IFAK item is fully documented with three layers of information — matching novice to expert mental models.

🩸

CAT Tourniquet

Stop life-threatening limb bleeding. Apply within 2–3 minutes. The #1 life-saving device in a kit.

BLEEDING
🩹

Pressure Bandage

Control non-limb wound bleeding. Torso, head, neck, groin. Secondary dressing after packing.

BLEEDING
🧵

Combat Gauze

Pack deep junctional wounds. Kaolin-impregnated gauze accelerates clotting where a tourniquet can't reach.

WOUND
💨

Chest Seal

Treat penetrating chest wounds. Vented design prevents tension pneumothorax. Seal entry and exit wounds.

CIRCULATION
🌬️

NPA

Maintain airway in unconscious patients. Nasopharyngeal airway inserted nasally — safer than OPA in trauma.

AIRWAY
✂️

Shears & Gloves

Access wounds fast, protect yourself. Gloves first. Shears expose injuries without moving the patient.

TOOLS
Design Principles

Designed for
the worst moment.

01

Stress-First Design

Every critical action is 2–3 taps from any screen. The emergency banner is the largest, most prominent element on the home screen. No one should hunt for a procedure mid-emergency.

02

Glove-Friendly Targets

All interactive elements meet the 44×44pt minimum touch target. High contrast red/white on black for outdoor readability in direct sunlight and low-light environments.

03

Zero Latency

All data is local and static. No API calls, no loading states, no spinners on the critical path. In a trauma scenario, a loading screen is not acceptable.

04

Progressive Disclosure

Overview → How to Use → Critical Notes. Each tab serves a different mental model. Novices start at Overview. Experts jump to Critical Notes for last-minute reminders.

05

Cognitive Offload

Step-by-step checklists replace memory. Under acute stress, recall degrades. The app thinks for you so you can act. Completed steps dim. Active step highlights. One thing at a time.

06

Cross-Referenced Knowledge

Kit items link to procedures. Procedures link back to kit items. The system teaches relationships — not just isolated facts — so users build genuine competence over time.

User Research

Real people.
Real findings.

An affinity mapping session across multiple user interviews surfaced five core categories of insight — each one shaping a direct design decision in the app.

5
Research Categories
13
Pain Points Identified
4
Emergency Behavior Patterns
8
Motivations to Learn First Aid
6
Current Info Sources Used
Affinity Map — Full Research Board
User research affinity map showing familiarity levels, emergency behaviors, motivations, info sources, and pain points
🎯
Familiarity with First Aid
Comfort Level
Most users are "not very familiar" or have never thought about first aid
A smaller group has administered first aid before but lacks structured knowledge
Very few describe themselves as truly "comfortable" — even those with prior exposure
→ Design response: App assumes no prior knowledge. Every screen teaches while it assists.
🚨
Emergency Behavior
Primary · During · After
Primary response
"Call 911" — almost universal, but users don't know what to do next
"Freeze up" — significant number of users expect to be paralyzed by stress
During the emergency
Users look for additional help rather than acting independently
"Panic" and "Stay calm" appeared in equal measure — highlights stress unpredictability
After the emergency
Users seek training only after an incident — motivation is reactive, not proactive
→ Design response: Step-by-step checklists eliminate the freeze. The app acts when the user can't.
💡
Motivations
Reason to learn first aid
Protect family or loved ones — the #1 motivation across all users
Peace of mind — knowing they could act if needed, even if they never have to
High-risk hobbies (hunting, rock climbing, backcountry) drive preparation
Media exposure — seeing violence in news increases desire to be prepared
Professional requirement — some fields mandate basic first aid knowledge
"Being prepared is important to me" — strong identity alignment with preparedness
→ Design response: "Be your own first responder" speaks directly to the protection and peace-of-mind motivators.
📱
Current Info Sources
How people find first aid information today
Online search — most common, but inconsistent quality
YouTube videos — highly visual, but not interactive or context-specific
CPR and first aid classes — trusted but infrequent and quickly forgotten
Social media — unreliable, but where many first encounter preparedness content
Handbooks (Red Cross, American Heart Association) — thorough but hard to use under stress
Mobile apps — used by some but seen as incomplete or disconnected from real emergencies
→ Design response: App combines the immediacy of search, the structure of a handbook, and the portability of mobile — all optimized for stress.
⚠️
Pain Points
Current mobile apps · Non-digital sources
Current Mobile Apps
🚑
"Still have to wait for professionals"
Apps tell you what's happening but don't empower you to act. Users feel passive, not capable.
📵
"Not all connect with local 911"
Disconnect between digital guidance and real emergency services. Users don't know if help is coming.
❓
"Leaves you not knowing how to help"
Apps describe injuries but don't walk through treatment. Information without action.
📋
"Experience lacks instruction"
Existing apps are reference tools, not procedural guides. No step-by-step in the moment.
📹
"No way to document what's happening"
Users want to capture what they did for EMS handoff — time of tourniquet, interventions taken.
Non-Digital Sources
📚
"Information is hard to break down and consume"
Handbooks and manuals are comprehensive but dense. Hard to scan under pressure.
🕐
"Courses are intensive and time consuming"
Full TCCC or first aid courses require days of commitment. High barrier to entry for most people.
🎯
"Not many options for how to practice"
Reading about a tourniquet and applying one are entirely different skills. Limited practice pathways.
→ Design response: Every pain point maps to a feature — step-by-step procedures address "lacks instruction," the tourniquet timer addresses "no documentation," TCCC micro-articles address "too time consuming to learn."
UI Improvements

What changed.
Why it matters.

Every improvement maps back to a research finding. Nothing was changed for aesthetics alone — each decision was grounded in what users said they needed.

Navigation
BEFORE

Flat list structure with no clear information hierarchy. Emergency response buried among general content.

→
AFTER
🏠
🩹
⚡
📖

4-tab structure aligned to the MARCH protocol — Home, Kit, Respond, Learn. Each tab has one clear job.

Research insight: Users froze because they didn't know what to do next. Clear navigation reduces decision fatigue at the worst possible moment.
Emergency Entry Point
BEFORE

Emergency action hidden in a list. 4–5 taps to reach a protocol. No visual urgency on the home screen.

→
AFTER
+

Large central red "+" button — the primary visual of the home screen. 2 taps to first actionable step from any screen.

Research insight: "Freeze up" was the second most common emergency response. A single unmissable action removes the decision point entirely.
Kit Reference
BEFORE
No kit reference

No in-app kit reference. Users had to leave the app and search YouTube or Google to understand how to use their equipment.

→
AFTER
🩸
🩹
💨

Full IFAK reference with 6 items, category filters, and a 3-tab detail view. Overview, step-by-step, and critical notes — all offline.

Research insight: Users described "not knowing how to help in the critical moment" as their biggest fear. Kit reference closes the gap between owning equipment and using it.
Tourniquet Timer
2019
3:05:30
Basic timer only

2019 original had a timer — but no automatic start, no application time recording, and no warnings for dangerous time thresholds.

→
2025
TOURNIQUET TIME
00:03:27
Applied: 9:41 AM

Auto-starts on the tourniquet step. Records exact application time. Amber at 1hr, red at 2hrs. Confirms the application time for EMS handoff.

Research insight: "No way to document what's happening" was a top pain point. The timer solves this — giving EMS critical handoff data automatically.
Education Model
BEFORE
No learn section

No education layer. App was purely reactive — useful in an emergency, useless between them. No path for users to build confidence over time.

→
AFTER
📋 MARCH Protocol↑
❤️ Recognizing Shock↓
⚡ Tourniquet Myths↓

Dedicated Learn tab with 4 TCCC articles. Accordion pattern for micro-learning in 3–5 minutes. Designed for the gap between emergencies.

Research insight: "Courses are too time consuming" blocked most users from getting trained. Micro-articles lower the barrier — 4 minutes on the bus beats never.
Stress-Optimized Design
BEFORE

Standard touch targets, no contrast optimization, no consideration for glove use or outdoor visibility. Designed for normal conditions.

→
AFTER

44pt minimum touch targets. Black background with red/white for outdoor contrast. All data local — zero loading states on any emergency screen.

Research insight: "Freeze up" and "panic" as dominant responses revealed that the UI itself needed to work for impaired cognitive states — not just calm, capable users.