>5 Hours


Background:  Every year, natural disasters cause massive amounts of economic damage and loss of life.  For large-scale disasters, evacuation efforts can take up to days or even weeks.  During this time, people may have limited access to basic needs such as water, food, and shelter.  Infrastructure damage may also inhibit lines of communication, making it difficult to seek medical help and contact loved ones.

Problem:  How can we design a solution that helps people endure through a natural disaster?

Solution:  DisasterRelief is a website that helps people through the aftermath of a natural disaster.  Users can access the site through their smartphone's internet browser.  After checking in, the site helps people reconnect with loved ones and search for basic needs.  Users can also find general safety tips and official updates on relief efforts.




To empathize with potential users, I created a scenario including background information and typical user needs and goals.




Before brainstorming a solution, I first established a few assumptions about potential users.

Users have access to a smartphone that can connect to the Internet.

This assumption was given in the prompt of the design challenge.

Users can navigate through a web browser on a smartphone.

This assumption has two parts.  One, users are physically able to operate a smartphone (e.g., are not critically injured).  Two, users are familiar enough with technology to use a smartphone without issue.

Users may have limited bandwidth or other connectivity issues.

This constraint seems reasonable to assume for a natural disaster situation.  Therefore, the solution needs to be simple and lightweight enough to function with limited connectivity.




I decided to design a responsive website to help users in the first hours of a natural disaster.  These hours are critical in establishing safety and peace-of-mind for people affected.

Given the natural disaster setting, I believe that a website is the best fit solution for several reasons.

  1. A website can be accessed from almost any digital device (e.g., smartphone, public desktop, laptop).
  2. Connectivity issues and infrequent use discourage an app-based solution, which requires downloading.
  3. Overall, a website provides the most simple and direct solution for users who are in a stressful and uncomfortable environment.

Due to the time constraints of the design challenge, I focused on one view for the website.  I decided to design the mobile view because a smartphone is the most easily accessed device for many people in a natural disaster.  The six main features on the mobile website are detailed below.



Due to stress, trauma, etc., users may forget to call 911.  Also, first responders may be overloaded with calls and can have difficulty locating individuals with only a verbal description from a phone call.  First-time visitors to the site will be reminded to call 911 for emergencies.  The website uses the phone’s GPS information when contacting first responders.

2.  check IN

Users can sign in to the app with their name and phone number.  Given the urgency of the situation, the sign-in process is reduced to the minimum amount of information needed to uniquely identify an individual.


Users can search by name and phone number for others who have signed in.  After searching, users can see others' last sign-in location.  This feature facilitates reconnecting with loved ones, without the hassle of making repeated phone calls.


After handling the critical steps above, users will need to stay on top of any updates or announcements (e.g., instructions to take shelter, aftershock warnings).  The site would provide a centralized hub of official information from sources such as FEMA or local government.


Due to the disaster, users may be short on basic needs such as food, water, shelter, medical supplies, and electricity.  The site will display nearby sources of these basic needs in a map view.  The map will also display information such as impassable roads or dangerous areas to avoid.

6.  Stay safe

For many people, like Henry and Danielle from the scenario, this might be their first experience in a natural disaster.  The site will include general tips and FAQs to help users stay safe during the aftermath and relief stages.




I then created two user flows based on two characters in my scenario, Henry and Danielle.  These flows reflect common tasks that first-time users may complete on the site.

Henry is injured and requires medical attention.  He needs to contact first responders and find nearby locations with medical supplies.
Danielle is focused on contacting her husband and children.  She needs to search for them and take steps toward reconnecting.



Due to the nature of the design challenge, I did not conduct initial user research.  However, I did create a research plan that reflects what could have been done.





I began by sketching out the broad concepts and UI elements that drive the user's experience.

During this phase, I focused on creating a minimalist design to prevent user error.  To reduce ambiguity and the chance for confusion, I made two notable UI design decisions.

Use icons sparingly.

Icons can easily be misinterpreted, especially given the user's setting.  Removing icons also helps reduce visual clutter.

Design above the fold.

Out of sight, out of mind.  I did not want users to miss information because they did not scroll down enough.

Overall, these two decisions simplify the experience for users in a stressful and hectic environment.



I then used Sketch to create wireframes and high-fidelity mockups.


First-Time Users
As a safety precaution, first-time visitors are reminded that the tool is not intended to replace 911 for emergency situations.  Users then check in with their name and phone number, inputting the minimum amount of information needed for unique identification.  After checking in, users have the option to select from two common tasks: searching for basic needs and searching for people.


Searching for Basic Needs
Users can quickly select from a list of basic needs such as food, water, and medical supplies.  Search results will be displayed in a map, which also shows the user's current location.  With this feature, users can be more informed about nearby available resources that can meet their needs.


Searching for People
Users can search by first name, last name, and phone number, for other people who have checked-in to the site.  Search results are displayed in a map, and include the person's last check-in location.  With this information, people can rest easy knowing that their loved ones are safe.


The Map Tab
The website has a simple navigation setup with only two tabs, so users can quickly and confidently find the information they need.  The two features described above are housed in the map tab.


The Information Tab
After meeting their immediate physical and emotional needs, users can focus on maximizing their safety and well-being.  This tab lets users stay up-to-date on official announcements and helps them learn about aftermath safety tips.



I used Marvel to create an interactive prototype that is ready for usability testing, as described in the plan below.




Due to the nature of the design challenge, I did not conduct usability testing.  However, I did create a usability testing plan that reflects what could be done.