Intro

This is a design challenge initiated by a company as part of their summer 2021 internship application process. Prompt: Create a product for Bay Area residents to access information when natural disaster hits

My role and contributions:
This is a personal project with every single step done individually by myself. Design process including:
background research, persona creation, ideation, sketching, prototyping, etc.

Solution

What is Safe Bay?

“Safe Bay” is my submission to the challenge. It’s a simple platform that allows Bay Area residents from all language backgrounds to find useful information when an earthquake hits.
‍
Safe Bay can:
Indicate users’ personal safety status and share with selected members
Let users find and report resources such as food, medical resources, electricity, etc.
Check users’ linked members’ status and contact them if needed

Research

Choose the focus of the problem space

Bay Area has a high population of immigrant, more than 40% (Link to data reference) of its residents can’t speak English or have very limited English ability. Earthquake is on the top of the list of San Francisco’s nature disasters (Link to data reference). It’s frequent and a lot more concerning than other disasters. That’s why I decided to set my design scope onto make an app that is universal for all and helpful for earthquake situations.

Goal: Universal, Multicultural, Simple

There are a few conditions that needs to meet and in this challenge, I assume they are available:
People have smartphones
Limited cellular data is still available after earthquake
Local government highly promote this app to its residents

For the app to be universal, I looked into color language and iconography to make sure there are no cultural barrier when it comes to looking. I set down with a set of icons and colors. Considering the needs of colorblind users, some components will be using a combination of both. Some example such as: red is an universal color for danger, green means peace and confirm, etc.‍

Story Time

Who are our users?

To better understand the user flow and their special needs, I came up with two personas: one non-English speaker and one English speaker. Each of them will have different experience and concerns, and what they could do after earthquake happens.

Meet Siya Su

Siya, 56, is a single mother of 2 children who are both currently working in Silicon Valley. Ever since she migrant from China to United States, she has been staying in the Chinatown in SF for the most time of her life. Because of that, she has very limited English ability. Before her children moved away, they installed the “Safe Bay” app on her phone and told her to use it if something happened.

One day a big earthquake hit the Bay Area and Siya has to seek for food and water. She is scared but she remembered to open “Safe Bay”...

Meet Bill Brooks

Bill, 25, recently moved to San Francisco for his new job after graduate from college. Bill is originally from Illinois, doesn’t have too much experience with earthquake. Thankfully he is aware of that situation and installed the “Safe Bay” on his phone as recommended by local government just in case.

One day a big earthquake hit the Bay Area. Bill’s office was lucky enough not suffered too much damage. Their lights are still on and there are some food in their vending machine. Bill wants to share this information to surrounding area, so he opened “Safe Bay”...

Ideation Sketches

Sketches for each element on the app

Landing Page:

The landing page has the minimum elements: indicate if the user is safe or not. If the user is safe and can move freely, they will press the green button and other functions will be activated. If the user is trapped or has bad injuries, they need to use the red 911 button. The 911 button will not only become their status but will also shows up on local rescue authorities database in real time. After the button is pressed, other functions will be activated.

A sketch that contains the elements of landing page: the green safe button and the red 911 button

Status Page:

From the list of linked members, user can see their status if they ever open the app and update theirs. For those who is in a danger status, user can try contact them and help them seek rescue. There is a third status which is no update at all. This could mean a lot of situation such as phone not available or the user can’t update it.

A sketch that shows elements for status page, includes linked users and their status show up as red, green or nothing next to them

Map Page:

After the map is being opened, users can see icons on the map in the close area. From there they can tap on the icon and the map will guide them to the resources they need.Users can also see the location of their linked members (if they are in Bay Area). Linked members are pre-set prior and will share the safety status with each other.

A sketch of elements on map page. Includes a map of nearby area and possible route to resources

Map Page (adding resources):

For people who can read English and has resources available around them, they can use the + button on the top right. From there they can submit available resources to the map. Once there are more reports from different people indicate that this resource actually exists, the main map will show the resources for other users to see.

A sketch of adding resources function. People can add resources to the map in the form of icons

Continue the Story

How would they use it?

Now let’s go back to Siya and Bill...

Siya's Story Continued

Siya pressed the green button as taught by her children when she is safe. The map shows up on her screen and she was able to recognize the food and water icon on the screen. The map also helped her to find the shortest way to those resources by using only one single tap on the icon.

A low-fidelity prototype page that contains the elements of landing page: the green safe button and the red 911 button

A low-fidelity prototype page shows the map and the available resources

A low-fidelity prototype page shows a possible route to the resouces

At Silicon Valley, her children saw her green status on their phone since they are linked. They are relieved to see their mother being safe.

A low-fidelity prototype page shows everyone in this user group is safe

Bill's Story Continued

Bill indicated that he is safe by tap on the green button first. Then he opens the map and tap on the + button on the top right. He selected “Electricity” and “Food” from the adding menu and submit the report. He also encouraged his coworkers to submit reports as well so this resources can be seen by everyone in this area.

A low-fidelity prototype page shows the interface of adding resources to the map

Future Thoughts

But what if...?

...People can’t use their phone? Phone is dead or broken or lost? Fainted due to injury or even...dead? This app has the potential to work on this problem with a strong alert system. If an official level of warning (Japan has this) is being issued, the app can quickly record the last location of an user’s phone before anything happen to it or its owner. Even if the user cannot update their status anymore, there is still a chance for their linked users to locate them.