FEMA
Mobile App Redesign Concept
ROLE
Product Designer
TIMELINE
June to August 2025
TEAM
Jane Carley (Solo)
Disclaimer: This project is an independent, self-initiated concept redesign created for learning and portfolio development. It is not associated with, sponsored by, or commissioned by FEMA. All analysis and user feedback collected for this project were based solely on public available information and conducted for practice purposes only.
01. Overview
FEMA's mobile app is often people's first source of information during a disaster - but its dense layout and inconsistent urgency cues slow users down exactly when they need to act fast. This case study reimagines the FEMA app to sharpen severity signaling and help users make confident decisions at every stage of an emergency.
02. Problem
FEMA's mobile app delivers essential information, but its current design makes it hard to quickly gauge urgency or know what to do next.
Homepage
-
Urgent info is at the bottom of page
-
Image is confusing.
-
No screen change based on emergency level.
-
No "what to do" guide.
Prepare
-
Preparedness topics are not alphabetized as stated
-
There is no ability to search topics.
Settings
-
App uses gear icon in lieu of profile icon.
03. Research
To understand where FEMA's app breaks down for users under stress, I reviewed the existing interface, studied high-stress user expectations, and benchmarked emergency communication best practices - surfacing usability gaps that impact trust, comprehension, and decision-making.
Pain Points
​"I'm not sure if I need to worry or not"​
​"It says topics are alphabetized, but they're not - it makes it hard to scan"​​
Inconsistent severity cues across alert states.
No logic or search on "Prepare" page.
​"Settings feels like a Profile"​​
​"There is soooooo much to read." ​​
Navigation labels do not match content.
High cognitive load from dense text.
Personas
To ground design decisions in real user needs, I developed two personas: Marcus, a mobile, tech-comfortable user who needs fast, location-based clarity, and Linda , a high-risk region resident who prioritizes simple, actionable guidance under stress. Together, they shaped decisions around alert clarity, urgency, navigation, and accessibility.
User Journeys
To understand how Marcus and Linda experience escalating emergencies, I mapped their journeys from early awareness through critical decision-making - tracking goals, actions, pain points, and emotions at each stage. These maps revealed where users lose urgency, clarity and guidance, directly informing opportunities to simplify content, and guidance, directly informing opportunities to simplify content and surface critical next steps when they matter most.
Competitors​
A competitive review of Ready.gov, the Red Cross, and NOAA revealed both strong patterns and gaps in emergency information design. Red Cross excels at high-contrast, location-specific alerts with clear action steps; NOAA offers strong weather visualization - but both often require drilling down for critical info. FEMA's app has a clear structural framework across preparedness, alerts, and recovery, but lacks search, visual hierarchy, and actionable guidance. These gaps shaped my focus on urgency cues, simplified navigation, and immediate next steps.
04. The Design Process
My process began with an audit of FEMA's existing app and a review of emergency communication patterns from organizations like FEMA and the National Weather Service, focusing on how severity levels shape decision-making across calm and high-stress conditions. From there, I explored layout concepts through paper wireframes prioritizing clarity and action-driven guidance, then translated them into Figma—refining color, typography, and spacing to clearly differentiate No Emergency, Advisory, Warning, and Critical states.
These became a low-fidelity interactive prototype testing navigation behavior, fixed headers/footers, severity-based color systems, and content suppression during critical emergencies. I also reorganized the Prepare page to match its stated alphabetical order and swapped the Settings icon for a Profile icon to better reflect its content. Through iterative refinement, I adjusted hierarchy, messaging, and interactions to reduce cognitive load—resulting in a more intuitive, emotionally appropriate interface that supports users before, during, and after disasters.
Paper Wireframes
I started with paper wireframes to quickly explore layout and content across emergency states, normal, advisory, and critical - focusing on information hierarchy, severity differentiation, and core navigation before moving to digital designs.
Low-Fidelity Wireframes & Prototype
These low-fidelity mockups tested layout, navigation, and severity-based hierarchy across emergency states, using minimal visual detail to focus on usability and decision-making. The prototype demonstrates how the FEMA homepage adapts from no emergency to advisory and critical conditions before leading users to preparedness resources, testing clarity, urgency signaling, and navigation behavior under varying levels of risk.
Low-Fi Usability Study
I conducted a moderated usability study on the low-fidelity prototype, focusing on clarity, severity and recognition, and user understanding across changing emergency conditions. Participants interpreted alerts, identified appropriate actions, and navigated between emergency and preparedness content.
​​​
Key findings:
​​
-
​Severity-based color changes (green, yellow, red) significantly improved users’ ability to quickly assess risk levels quickly.
-
The black black background in critical mode felt more serious and easier to read under stress.
-
Alphabetizing the Prepare section improved findability and reduced search time for resources.
​
Overall, users felt more confident navigating the app and understanding next steps as emergency severity increased.
05. Refining the Design
Following usability testing, I refined typography and layout to further reduce cognitive load and clutter, and adjust the Prepare page so it truly flowed alphabetically, and incorporated a search function on the app.
High-Fidelity Mockups and Prototype
The high-fidelity mockups translate validated low-fidelity concepts into a refined visual system, using color, hierarchy, and interaction patterns to clearly differentiate No Emergency, Advisory, Warning, and Critical states while maintaining clarity, accessibility, and trust. The prototype brings this to life - dynamically adapting content density and available actions as risk escalates, prioritizing urgency when needed while supporting exploration during calm conditions. It also reflects refinements to navigation, profile access, and an improved Prepare section that makes FEMA resources easier to find and understand.
Hi-Fidelity Usability Study
Impact
Accessibility Considerations
Accessibility was a core consideration throughout the FEMA mobile app redesign, particularly given the high-stress, time-sensitive nature of emergency situations. The interface was designed with Web Content Accessibility Guidelines (WCAG) 2.2. AA principles as a core constraint - using high-contrast color combinations, large tap targets, and clear visual hierarchy to support users with low vision, motor impairments, or cognitive load under stress. Color is never used as the sole indicator of severity—icons, labels, and concise text reinforce meaning—while simple language and predictable layouts help ensure the experience remains usable and inclusive for a wide range of users. Text alternatives for informational imagery have been planned throughout, and formal contrast verification and a full compliance audit are ongoing as part of continued refinement toward WCAG 2.2 AA compliance.
06. Going Forward/Next Steps
​
If this project were to continue, the next phase would focus on scaling and stress-testing the design beyond a controlled study. Priorities include:
-
WCAG 2.2. AA compliance verification.
-
Broader, unmoderated testing: Larger, more diverse participant pool - including users with visual, motor and cognitive disabilities.
-
Real-world condition testing: Testing under low connectivity, outdoor glare, one-handed use)
-
Screen reader and assistive tech audits: Extends accessibility validation.
-
Multi-language and low-literacy testing: validating the severity cues and plain- language content remain clear for non-native English speakers and varying literacy levels.​
​
