Helping you endure a natural disaster

Lifesaver is dedicated to helping you get through a natural disaster. After a natural disaster occurs, evacuation times can take up to a few weeks. During this time, resources are limited and loved ones get separated.

Lifesaver is a site that allows people to locate necessary resources as well as the status and location of loved ones. In addition, it allows people to help each other more efficiently as aid becomes limited in this time.

The Solution

Lifesaver Website


Product Designer


Design challenge, 1 (Super Bowl) weekend

Tools Used

Sketch, Principle, Pencil & Paper


How might we help people endure through a natural disaster and the uncertainty of relief


Anyone going through a natural disaster

Locate necessary resources

Users easily filter through the app to see which places still have resources that they need (e.g., water, food).

Find optimal path

Lifesaver will give users the optimal path to the selected location. Because of potential damages done to roads, Lifesaver finds the best way to go around this.

Help those around you

Users can see if anyone around them needs help and notify them that they are coming.


Understanding the user

To understand user needs, I used scenario based design. Below is a potential scenario of a natural disaster:


Creating a persona with goals helps me keep the user at the center as I am designing.


Limited connectivity is the main constraint as natural disasters can cause damage to communication infrastructure.

I decided to design a responsive website because natural disasters do not occur on a daily basis and the need to download an app while there is limited connectivity may be difficult for the user. Having a link for the user to go to on their browser will prove easier for them. In addition, the user will be able to use the site on a desktop as well in the case they cannot locate their phones.


Below are a set of assumptions I made and used during the entire process.

Assume that users are already registered with the site beforehand and are already logged in the system.

While registration is important, I wanted to focus on crucial tasks of the design.

Assume that users have access to a mobile phone or digital device that can connect to the Internet at this time.

Without access to a digital device, the site is useless.

Assume that the design does not take massive amounts of internet bandwidth for users to use.

In times of disasters, connectivity is a problem. However, I will be taking into consideration that there are limited connectivity during these times.

Assume that information will be updated in real-time.

Major features of the site (e.g., locating available supplies, giving optimal route) require that the data is there and sufficient.

Assume that users have the technological expertise to use the site.

While there are users that may have trouble navigating the site, the core functionalities should still be useable to them.

Initial Research Plan

Due to time constraints, I was not able to conduct research before designing. I created an initial research plan to better understand users.

View Here


Due to time constraints, I had to prioritize in order to create a minimal viable product.

Overall usage

Ability to access the site from various devices

I decided to create a website so that it is accessible from any digital device. I decided against a mobile app because having users download another mobile app in times of natural disaster, where there could be connectivity constraints, is difficult. Users may not even have access to their mobile phones and can only access a public library desktop.


Ability to see danger zones

This is important so users will know which areas to avoid.

Ability to see optimal routes to these locations

Users should be able to see the optimal route to the selected locations within the site. These routes should account for debris and unwalkable/driveable roads. This feature allows users to easily get to the desired location.

Asking for help

Ability to ask for help from those around you

Users should be able to ask for help when they cannot travel somewhere. For example, elderly population may find it hard to go out and retrieve supplies. People with physical disabilities may have trouble obtaining resources they need. This site allows everyone to help out in times of need. Relying on strangers can also help endure through a natural disaster.

Ability to see if anyone around you needs help

On the receiving side, anyone in the vicinity can see who needs help. This fosters a sense of collaboration and togetherness in dire times. This could potentially improve morale in disaster situations.

Locating Supplies

Ability to see location of places that still have supplies (electricity, food, water, medicine)

This is crucial because users need to be able to have access to basic supplies. This would improve efficiency so that people are not scrambling and running around from store to store to locate supplies.

Locating Loved Ones

Ability to update your own status and receive the status of individual you care about (family members, loved ones)

Parents or any loved one really would be worried about those they care about. Communication is limited during this time as infrastructure may be damaged by the event. Therefore, there should be a quick way for users to see the status of their loved one. Location may be limited due to connectivity issues so the priority information is a status that says "I'm okay!" While the user may not receive the location information, this creates a peace of mind.

Ability to see your loved one(s)'s last known location

Users should have the ability to see the last known location of their loved one(s). This information may be difficult to show in real-time due to constraints. Users may have limited power on their phone and want to conserve the amount of data they use, or even turn off their phone. One way to solve for this is to just show the last known location.


User Flows

I made 2 flows of the most common tasks for users would use the site for:

  • Finding locations with food
  • Finding status of loved one(s)

Application Map

I created an application map to figure out the major functionalities of the site. The main information is a map view that will let the user then filter through to see what they actually want. Most of the interaction is controlled within this view so that users do not have to go from page to page.

Sketches and Brainstorming

I sketched multiple screens to get started. At this point, while I did not have the full site thought through yet, quick sketching allowed me to put my thoughts onto paper. Below are some example sketches that I did during this part. Click on the image to view details!

Different ways of laying out the home screen

Route functionality

Map views - locating other users

Interface Designs and Prototypes

Home Screens

This is the first screen that the user sees when they go on the site. Major functionalities start from this page.

Locating Supplies and Persons

Users can locate supplies and locate people. When the button is clicked, modals will appear to give more options as to what the user wants to show.

Locating supplies

Locating loved ones

Finding optimal route

Users find the optimal route to their selected destination from the site. When a natural disaster occurs, we have to account for debris/physical damages. This allows the user to find the most efficient route but also stay clear of danger.

Asking for help

If users are unable to retrieve resources themselves, they can ask for help directly in the site to send a broadcast to those around them. Other users can see who needs help that is around their vicinity. This creates a sense of togetherness during dire times, help fostering collaboration.

Seeing who needs help around you

Usability Testing

Due to time constraints, I was not able to conduct usability testing. I created a testing plan to get feedback on the designs.

View Here

Final Considerations

Next Steps

I would want to flush out the full desktop version of the site. Due to limited time, I wanted to focus on mobile first as I think most users would have access to a phone first. In a disaster situation, I am hypothesizing that users would prefer to carry less and smaller things on their person. However, some users may have lost all access to digital devices and the only way to get online is to go to the nearest library and use public computers that potentially still have connectivity.


There were some additional features that I had originally thought of. One of them was to search for medical stations. Due to limited time constraints of this design challenge, I had to prioritize certain features over others. This gave me the change to really think about what were "must-haves" and what were more "nice-to-have" features.