HOPELINE

Natural Disaster Relief, Simplified: A UX Concept

HOPELINE

HOPELINE is a conceptual disaster relief app providing real-time updates on nearby shelters, disaster zones, fuel availability, and essential resources to help people stay safe and make quick decisions during emergencies.

Role

UX/UI Designer

Duration

2 weeks, Nov 2024

Tools Used

Figma

Context

This design project was inspired by the natural disasters of 2024 in the U.S., where communities faced significant challenges accessing essential resources for evacuation, shelter, and recovery. HOPELINE was created to address these difficulties, offering a community-focused solution that provides critical information and resources at people’s fingertips to foster resilience and support during crises.

Hurricane Helene

Hurricane Milton

Orange County, CA Wildfires

Indian Lake, OH Tornado

Objective Statement

Design an app for individuals to access critical information, navigate safe routes, and find resources during natural disasters.

Design Process

Research

Design Considerations

User Personas

Key Features

Information Architecture

Wireframes

Final Designs

Understand

This phase focused on gathering insights by researching user experiences during natural disasters, analyzing challenges, and creating user personas to identify key needs and pain points.

Research

Research for this project focused on understanding the challenges faced during the 2024 natural disasters in the U.S. This involved gathering insights through vlogs, articles, and other firsthand accounts to identify common themes and user pain points. These findings laid the groundwork for creating user personas, defining key app features, and ensuring the design addressed real-world needs.

These quotes are synthesized from insights gathered during research. These insights served as a foundation for designing user-centered solutions in HOPELINE.

“Major roads are blocked by fallen trees and flooding—no way to know if we can get through.”

“Gas lines are crazy long, and half the stations are out of fuel.”

“We’ve been without power for days. Can’t even get clean water, and we have no way to call for help.”

“Local businesses are giving out free food. That’s the only way some of us are eating.”

“Shelters are packed, and hotels won’t take anyone because there’s no water.”

“Evacuation orders came, but roads are blocked and there's no power. We're stuck.”

Design Considerations

The design took into consideration 3 critical factors to ensure usability and feasability during emergencies. These considerations shaped the app’s features and interface to meet users’ needs effectively.

01

Offline Accessibility
In a real-world application, it would be essential for critical features to be preloaded before connectivity is lost.

02

Cognitive Load
The design has to balance providing detailed information while avoiding overwhelming users.

03

Limited Battery Life
The design must be lightweight, to ensure the app will run smoothly, even on low battery.

Define

This phase involved identifying essential features for the app, developing the information architecture, and considering design factors like offline accessibility, cognitive load, and battery life.

User Personas

These personas represent key user groups, their goals, challenges, and needs during natural disaster emergencies.

Sarah

Mark

George

Sarah is a 32-year-old single mom with a 5-year-old daughter. Financial constraints prevent her from evacuating far, and she needs to find shelter close by. She’s looking for a safe place to stay, but options are limited, and she’s concerned about finding the resources she needs.

Mark is a 50-year-old man living with his wife and two dogs. With the disaster worsening, Mark urgently needs to evacuate, but roads are blocked, gas stations are running out of fuel, and he’s unsure of the best route to take. They need to find a way to safely leave without relying on shelter.

George is a 74-year-old man who lives alone and is unable to evacuate due to health problems (limited mobility). He’s trapped at home and needs to find a way to stay safe, access necessary supplies, and connect with emergency services.

Key Features

Based on the user personas, I identified 3 key features that HOPELINE needed to support seamlessly.

1. Finding Shelters

Locating nearby shelters and checking for availability.

2. Route Safety

Receiving real-time updates on blocked or hazardous roads.

3. Essential Resources

Finding fuel stations, grocery stores, and medical facilities.

Information Architecture

I created the information architecture to organize the app’s content and define its structure, ensuring intuitive navigation. This process involved prioritizing key user tasks and features, establishing a clear flow to make essential information easily accessible during emergencies.

Develop

This phase focused on creating wireframes, refining the interface design, and planning for future usability testing to ensure the app meets user needs effectively.

Wireframes

The wireframes for HOPELINE outline the app’s structure and layout, focusing on simplicity and usability during high-stress situations. The wireframes served as the foundation for refining the user experience and visual design.

This is the wireframe for HOPELINE’s main page, designed to provide users with quick access to all critical information during a disaster. It includes features such as the distance to the nearest disaster zone, quick links to shelters, food, fuel, and the fastest evacuation route with directions. The layout ensures ease of use and immediate access to essential resources in high-stress situations.

Final Design

The final design of HOPELINE emphasizes ease of access to critical information and simple, effective notifications. The interface is streamlined to ensure users can quickly find essential resources, such as shelters, evacuation routes, and disaster updates, without overwhelming them. The design focuses on simplicity, with intuitive navigation to help users stay informed and make decisions under pressure.

Here are a few screens of the final design: