Disaster Alert - UX

Disaster Alert - UX

Product Objectives

What is the Problem Statement?

There is a large-scale natural disaster, such as an earthquake or massive flooding in the San Francisco Bay area. People have some access to the Internet via cell phones and computers. Given that this is a fairly large-scale disaster, and that the bay area has about 7 million residents, evacuation takes a very long time (days or weeks).

What are the user’s behaviours when using the product?

  • Panicked.
  • Less focus to do tasks.
  • Lots of thinking activity.
  • Urgency.

What age group are we designing for? Why?

  • We are designing for a person who has a smartphone and stuck in a natural disaster, so it ranges from a 16-year kid to old people.
  • People who need help.
  • First responders and support teams.
  • Relief organizations and other groups dedicated to long-term rebuilding activities

What are their goals?

  • To know about the disaster beforehand for safety.
  • To know the route for evacuating the city.
  • To alert officials that they need help.
  • To get basic needs like water, food and medicines.
  • To know nearby temporary shelters.
  • To inform and know about the safety of their family members.

What are their pains when using the product?

  • The urgency for safety.
  • Less focus.
  • Less time to perform tasks.
  • Less thinking capacity.
  • Low Phone charge.
  • Poor Network Signal.

What happens if we solve the problem? What are the results?

  • People will find basic needs.
  • People will find their loved ones.
  • People will be saved from death.

What success criteria are we using to solve the problem?

  • A number of people got food, water and medicines on time.
  • A number of people found temporary shelter.
  • A number of missing persons found on request of their loved ones.

How will design affect how well we will be able to solve the problem?

  • Identify easily at day & night - Color scheme should be bright. Provide Light & Dark modes.
  • Minimize scanning time spent on processing words - Conveying ideas through icons & images.
  • Clear Instant Indication - Buttons were designed to be easy to click while in a rush.
  • Less Cognitive load - Using Progressive Disclosure and focusing one main task at a time.
  • Urgency - Need to request help with the minimum number of taps.

What tools are we going to be using?

  • Documentation - Notion
  • Competitive Analysis - Xtensio
  • User Surveys - Typeform
  • User Personas - Xtensio
  • Red routes - Google Sheets
  • Card Sorting - Optimalsort
  • Sitemaps & Userflows- Timblee
  • Page tables - Google Sheets
  • Paper Sketches - Sneakpeekit paper prints
  • Wireframing - Balsamiq
  • Visual Design - Adobe Photoshop, Adobe Illustrator
  • Prototyping - Marvel

How will we find our target audience?

  • Finding people who faced similar situations.
  • People who shared their experiences when such situations occurred.
  • Competitors user audience.
  • Watching scenes of such movies and real videos.

Business and Technical Assumptions

I had assumed stakeholder Business goals and Revenue stream specific requirements as the problems mentioned in the challenge. The technical requirements are not considered in detail as we are not developing currently.

  • We believe our customers have a need to know how to save themselves in a disaster situation.
  • Those needs can be solved by providing help and educating them to face such situations.
  • My customers will be people struck by disaster.
  • The primary value a customer seeks is an instant help.
  • We will acquire the majority of our customers through advertising campaigns through organisations, ****referral marketing.
  • We will make money by receiving donations.
  • Our primary competition in the market is Red Cross Apps.
  • We will beat them due to the usage of advanced technology, everything in a single app and building around the user needs.
  • Our biggest product/service technical risk is technical issues and server downtime.
  • We will mitigate or solve this by observing up to date and time of technical status.

Competitive Analysis

If every other competitor product has a certain feature, users will obviously expect that on our product too. Sometimes, this can provide material for me to ask in user interviews and surveys, such as how they felt about this aspect or is it needed at all. I made a list of good features and task flows from analyzing those products.


Brainstorming & Ideation

I will be thinking on my own, in terms of innovation and usage of modern technology to improve the product for the user. I thought of what will be the most effective area to break into the market and differentiate our product from the rest. I made a list of features which will be best to use and needed to the product.

User Surveys

The user interviews/surveys will reveal which design ideas will work, which won’t and may even inspire new ones to me. As I'm short on time, I opted for a quick and short user survey. I wanted to include character, behavior discovery questions along with product opportunity questions. I had tried to ask open-ended questions instead of leading ones to the users.


User Personas, Stories and Scenarios

Persona - 1 :


User Stories

I phrased a few simple sentences visualizing the user in mind to meet their goals. These stories will detail the user’s motivations and needs. The sentence format will be:

As a [family loving person], I want [to track my family people] so that I can [feel safe for them].

As an [old person], I want [content to be visually big] so that I can [read clearly].

User Scenarios

Scenarios tell us in what situations a specific user story might occur. We need to explore different contexts so that we will understand which pages they go to, where will they click and for what they’ll be looking to accomplish. I had visualized certain scenarios of the user using the product to get better features.

Persona - 2 :


Persona - 3 :


Card Sorting :

I gave 30 cards by creating the categories, that make sense as a basic help to the users to organize them. It makes me understand the user's expectations and understanding of the topic.



User Flows

I made a chart for User flow regarding different goals and tasks the user will perform. The flows focus on how the user will go through the design for the required outcome.

Based on user flows, I went step-by-step by creating the primary navigation and by adding sub-pages to them in a visual hierarchy.

Onboarding :


Login :


Permissions :


App Screens :


Request :


Find :


User Profile :


Paper Sketches

Page Tables

As I had decided on the pages in the sitemap, I listed out what content should be there and what and all are needed in each of the pages. Then prioritized the primary, secondary actions on each page to make them grab clear attention either by size, color or contrast

Main Screens :


On boarding and Permissions :


Design Screens Explanation

Onboarding :

I am showing the most important user goals of our app one at a time by making them understand the value provided to them.

  • Request emergency help and basic needs.
  • Track loved ones to make sure they are safe.
  • Learn how-to-escape from disasters when occur.

Permissions :

  • Audible siren when NOAA issues a Tornado warning for any of your monitored locations letting you know when it’s time to go to your safe room plus an all-clear alert when the warning expires.
  • Allow reading email related to travel trips. When you plan to travel somewhere, pop up or notify if there is a weather concern or any disaster occurrence in the city you are going to visit.
  • Manage the battery to extend battery life by switching on battery saver automatically when a disaster occurs.

Invite your loved ones through phone and social media.

Main screen :

By showing more options, much time will be needed to process and decide for the users. We have a time constraint. So, provided only high prioritized tasks so that users can find instantly what they need. The human brain can instantly recognize if we show it in visual format than reading and processing the words. So, made use of icons when necessary.

1. Request :

  • Shows the info of the disaster occurred and its intensity, where and when it had been occurred.
  • You can track the live disaster interactively, up to where it had been reached, what areas are affected and predictions of next area the disaster is reaching to.
  • Evacuate the city on the safe side, before the disaster reaches our location. It shows the information about nearby safe cities and towns to evacuate.
  • When you request emergency help, it will alert the officials or nearby volunteer people to help the users.
  • You can request for basic needs, medical help.

2. Find :

  • Find your loved ones by tracking their locations.
  • Find the nearby open shelters to reach and be safe.
  • Find the people who are in need of help by becoming a volunteer.

1.1 Request emergency help :

  • Instead of making the input of the number, made use of scale which increases the count by sliding the point on the scale.
  • By default, the current location will be taken. Or else user can enter it manually.
  • Once user requests, a courage quote will be shown in the process of loading and assigning the team.
  • A success message will be shown as feedback to the user. It contains the information about the team assigned and time it will take to reach. The user can track and contact them if needed.

Why no. of people is important?

Eg: A disaster came in the city. The rescue team is at point A and two refugee points are at Y and Z respectively. It will take the same time for the rescue team to reach either Y or Z. So in such case, we need to give preference to the point where the number of people was more.

1.2 Request basic needs :

  • People can request items or services with a few clicks and a record is immediately made for them containing the relevant information. Those looking to help can access these records, specifically the ones closest to them, to reach out and offer assistance. The type of service needed, the location it is needed at, and help with how to get there are provided for the responder.
  • Input the number of people and location.
  • Request the basic needs like food, water, bed sheets, clothing.
  • Request medical help for a doctor and also we will ask whether any specific medicines are needed(maybe pills for sugar, cancer patients).
  • Once user requests, a courage quote will be shown in the process of loading and assigning the team.
  • A success message will be shown as feedback to the user. It contains the information about the team assigned and time it will take to reach. The user can track and contact them if needed.

2.1 Find loved ones

  • Track the updated locations of the loved ones to make sure they are safe.
  • Update any missing information of your loved ones with the input of photo and contact details.
  • Machine learning and image recognition - A family with a lost loved one can upload pictures of that person along with some basic information about the person as well as contact info. This will train the API to memorize who that person is and if a match is found, an email can be sent to the family with the whereabouts, location and status of the loved one. Someone who is working on finding and identifying rescued people can take pictures of them and upload it to the web as well. This will help train the API again and then if a match is made, email, call, push notification out to the family concerning the match. Since both parties will usually not upload them at the same time, one side will upload first to train the program while the other uploads in hopes of a match. Each party's respective location/contact information will be logged as well so they can be notified asap.

2.2 Find open shelters

  • The open shelters will be shown in the form of list and map.
  • The shelters are sorted based on nearby distance with information of accommodation capacity of people.
  • The users can contact the shelters to inform or inquire.

2.3 Find needy people

  • The app matches people who need help, with people who have resources to help. Users who have resources are notified immediately or they can search to find out who needs help.
  • Input for how many people you can provide the necessary needs you have.
  • The people/shelters list who are in need of the needs you have will be shown in form of list and map.
  • The directions and contact information will be provided for each.

3. Menu :

3.1 User Profile

  • It has two tabs i.e. Add and Permissions.
  • Add - to add emergency numbers, emails and loved ones.
  • Permissions - to manage battery, audible siren and travel popup info.

3.2 How-to-escape

  • Step-by-step instructions let you know what to do even before/during/after a disaster.
  • Know how to, what to do about food and drinking water when your area has been impacted by floods and power outages.
  • Disaster scenes as 360 degree VR videos.
  • Reminders to update emergency kits and practice fire escape plans.
  • Earn badges that you can share with your friends and show off your escaping disaster knowledge with interactive quizzes. (Gamification)

3.3 Settings

  • Change language as it is a global app and providing it in local language make to reach more users. The local users can use the application more efficiently.
  • The app will switch between dark and light modes based on your location time. Still, if the user wants to switch to another mode, the user can make use of this setting.

I am safe alert :

  • If the user is in a disaster-affected zone, the app will provide a notification to confirm whether the user is safe or not. If at all, a user is at that location or not.
  • If the user responds with safe option, the app will intimate him to share the information through messages and social media.
  • Let family and friends know you are okay with the customizable “I’m Safe” alert for Facebook, Twitter, email and text.

Visual Design Prototype

Wireframes had been skipped due to short of time. Though they are clearly visual on my mind.

Prototype :

References :




The End

Next: Janaspandana