FEMA

Mobile App Redesign Concept

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.

ROLE

UI/UX Designer

Project Lead

TIMELINE
Nov 25 to Dec 25

TEAM
Jane Carley
(Solo)

Pictured Above: a quick glance of the "No Emergency" and "Critical Emergency" Homepages for FEMA Mobile App redesign.

01. Overview

FEMA helps communities prepare for and respond to disasters, and its mobile app is often a critical source of information during emergencies. However, in high-stress situations, users need guidance that is fast, clear, and easy to act on-something, which the current application's dense layout and inconsistent urgency cues don't always support. This case study reimagines FEMA's mobile experience to improve clarity, strengthen severity signaling, and help users make confident decisions at every stage of an emergency.

02. Problem

While FEMA's mobile app delivers essential information, its current design makes it difficult for users to quickly understand the level of urgency or what actions to take. For example, on the homepage, the most important information is located at the bottom of the page. Additionally, key content- such as the Prepare topic - is not alphabetized as described, and the Settings tab behaves more like a profile, adding to user confusion. These issues create friction at moments when clarity, speed, and intuitive structure are most critical.

Homepage

Most important information is at the bottom of the screen and could easily be missed.

Prepare Tab

Settings

The selection at the top indicates it is alphabetized "A-Z", but it is not. Also, no ability to search.

Users may not know to enter their information under settings.

Pictured Above: The original Homepage, Prepare Tab, and Settings for the FEMA mobile app.

03. Research
To understand how users interact with emergency information and where FEMA's mobile app experience breaks down, I reviewed the existing interface, analyzed user expectations during high-stress situations, and referenced best practices from emergency communication systems. The findings highlighted several usability challenges that impact trust, comprehension, and decision-making during critical moments.

Pain Points

"I'm not sure if I need to worry or not"

Users struggle to distinguish between an Advisory, Warning, and Critical alert because visual hierarchy and severity cues are inconsistent and unclear.

"It says topics are alphabetized, but they're not - it makes it hard to scan"

The Prepare tab lacks consistent sorting and

structure, reducing usability. Also, there should be a search function to find what users need immediately.

"Settings feels like a Profile"

Navigation items don't always match user expectations. The Settings icon contains profile-like content.

"There is soooooo much to read."

Large blocks of text can overwhelm users, especially in emergencies when cognitive load is high and decisions need to be made fast.

Personas

In order to ground design decisions in real user needs, two primary personas were developed based on potential FEMA mobile app users and emergency preparedness behaviors. Marcus and Linda represent distinct but overlapping user groups—mobile, tech-comfortable users who need fast, location-based clarity, and residents in high-risk regions who prioritize simple, actionable guidance during high-stress situations. Together, these personas helped inform design choices which focus on alert clarity, urgency, navigation, and accessibility across experience levels.

User Journeys

To better understand how users interact with the FEMA mobile app during escalating emergency scenarios, journey maps were created for both Marcus and Linda. These maps trace each user’s experience from early awareness through critical decision-making, highlighting goals, actions, pain points, and emotional states at each stage. Mapping these journeys revealed where users struggle to find urgency, clarity, and actionable guidance—directly informing opportunities to simplify content, improve hierarchy, and provide critical next steps when they matter most.

Competitors

A competitive review of Ready.gov, the Red Cross Emergency App, and the NOAA App highlighted both effective patterns and gaps in existing emergency information tools. Competitors like the Red Cross app excel at surfacing location-specific, high-contrast alerts with clear action steps, while NOAA provides strong weather reporting and visual clarity. However, several platforms require users to drill down to find critical information or lack intuitive navigation. In comparison, the FEMA app offers a clear structural framework with dedicated tabs for preparedness, alerts, and recovery, but falls short in search functionality, visual hierarchy, and actionable guidance. These findings informed design opportunities focused on improving urgency cues, simplifying navigation, and making next steps immediately clear during emergencies.

04. The Design Process

My design process began with an audit of the existing FEMA mobile app and a review of emergency communication patterns used by organizations such as FEMA and the National Weather Service. I focused on understanding how users encounter information during calm conditions versus high-stress emergency situations, and how severity levels influence decision-making.

Using these insights, I explored layout concepts through early wireframes that prioritized clarity, visual hierarchy, and action-driven guidance across multiple emergency states. I then translated these concepts into digital wireframes in Figma, refining layout, color usage, typography, and spacing to clearly differentiate between No Emergency, Advisory, Warning, and Critical states.

These wireframes were developed into a low-fidelity interactive prototype that demonstrated how the homepage adapts based on emergency severity. The prototype allowed me to test navigation behavior, fixed headers and footers, severity-based color systems, and the suppression of non-essential content during critical emergencies. I also tweaked the prepare page to better align with the alphabetized order it indicated and changed the original settings icon to a profile icon to better align with the purpose of the section.

Through iterative refinement, I adjusted visual hierarchy, messaging, and interaction patterns to reduce cognitive load and support faster decision-making. This process resulted in a more intuitive, emotionally appropriate, and scalable emergency interface that better supports users before, during, and after disasters.

Paper Wireframes

I began the FEMA redesign with paper wireframes to quickly explore layout and content variations across different emergency states, including normal conditions, advisories, and critical emergencies. Sketching allowed me to focus on information hierarchy, severity differentiation, and core navigation patterns before committing to digital designs.

Digital Wireframes

These low-fidelity mockups were created to test layout, navigation, and severity-based information hierarchy across different emergency states, using minimal visual detail to focus on usability and decision-making.

Low-Fidelity Prototype

The low-fidelity prototype demonstrates how the FEMA homepage adapts across severity states, transitioning from no emergency to advisory and critical conditions before leading users to preparedness resources. This flow was designed to test clarity, urgency signaling, and navigation behavior under varying levels of risk.

Usability Study

One moderated usability study was conducted to evaluate the low-fidelity FEMA mobile app prototype, with a focus on clarity, severity recognition, and user understanding across changing emergency conditions. Participants were asked to interpret alerts, identify appropriate actions, and navigate between emergency and preparedness content.

Testing revealed several areas where users experienced uncertainty or hesitation:

Severity-based color changes (green, yellow, red) significantly improved users’ ability to quickly assess risk levels.
Users responded positively to the black background in critical mode, noting that it felt more serious and easier to read under stress.
Reorganizing the Prepare section into an alphabetized list improved findability and reduced time spent searching for resources, but it was still not truly alphabetized.

Overall, users reported feeling more confident navigating the app and understanding next steps as emergency severity increased.

05. Refining the Design

Following insights from usability testing, I refined the FEMA mobile app design to further reduce cognitive load and improve clarity across varying levels of emergency severity through typography, further reducing clutter, and making small formatting adjustments to the prepare page so that it truly flowed alphabetically.

Mockups

The high-fidelity mockups translate the validated low-fidelity concepts into a refined visual system, clearly differentiating emergency severity through color, hierarchy, and interaction patterns. These screens demonstrate how the FEMA app adapts across no emergency, advisory, warning, and critical states while maintaining clarity, accessibility, and trust.

High-fidelity Prototype

The high-fidelity prototype demonstrates how the FEMA mobile app dynamically adapts as emergency risk escalates—from no emergency to advisory, warning, and critical states. Through changes in color, contrast, content density, and available actions, the design prioritizes clarity and urgency when needed, while supporting preparedness and exploration during calm conditions. The prototype also highlights refinements to navigation, profile access, and an improved Prepare section that makes FEMA resources easier to find and understand.

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 uses 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.

06. Going Forward/Next Steps

If this project were to continue, the next phase would focus on validating the redesigned emergency states with a broader and more diverse group of users. Conducting unmoderated usability testing during simulated emergency scenarios would help evaluate whether users can quickly interpret severity levels, understand recommended actions, and navigate between emergency and preparedness content under stress.

Additional next steps would include completing a formal accessibility audit aligned with Website Content Accessibility Guidelines (WCAG) 2.1 AA guidelines, with particular attention to color contrast, assistive technology support, and cognitive accessibility during high-stress situations. Testing with screen readers and dynamic text sizing would ensure the experience remains usable across a wide range of abilities and device conditions.