top of page

Bringing Earthquake Early Warning to the Public

Dates:

Role:

Description:

February - October 2020
 UX Designer, Visual Designer

A mobile app focused on providing Earthquake Early Warnings and general preparedness information for Washington and Oregon.

Top
High fidelity recent events map

The Problem

ShakeAlert, an Earthquake Early Warning technology, was developed by the USGS, in partnership with the UW, UO, Caltech, and UC Berkley. This technology detects the initial P-waves of an earthquake and quickly determines the location and intensity of the earthquake providing seconds to minutes of warning before the damaging S-waves arrive.

ShakeAlert provides the alert but does not provide a vehicle with which to deliver the alert to the public. Current government text alerts, like Amber Alerts, take too much time to deliver, and infrastructural alerts like tsunami sirens take time to develop and build.

Competitive Analysis

At the time of designing 2 weeks ready, three earthquake early warning mobile apps had been published for CA. I viewed these three apps to learn what information they provide the user. One complication that arose while analyzing these apps was that I am unable to receive alerts since I am not located in CA.

MyShake, ShakeAlertLA, and QuakeAlert app icons
MyShake app hamburger menu options
ShakeAlertLA app homepage that contains tile options and bottom navigation
QuakeAlert app hamburger menu options

Two of the apps (MyShake and QuakeAlert) use hamburger menu navigation while the third app (ShakeAlertLA) has both bottom navigation and tiles on the homepage which contain two different options.

Hamburger menu navigation obscures options and makes it harder to move through the app. Bottom navigation is used by most mainstream apps and is easy to access. However, if there exists a secondary navigation structure, like the tiles on the homepage, that contain alternative options, the navigation becomes confusing.

All three apps used a set of screens that users have to swipe through as an onboarding process. It is easy for users to skip through these screens without reading the available text.

MyShake app onboarding screen about citizen science earthquake detection
ShakeAlertLA app onboarding screen that talks about what do when you receive an alert
QuakeAlert app onboarding screen that contains education information about what to do in an earthquake
MyShake app safety information for survivng an earthquake
ShakeAlertLA app section that talks about what to do when shaking stops
ShakeAlertLA app section that allows users to make an emergency plan

All three apps contain preparedness information focused on earthquakes. There are varying amounts of preparedness information in each app. MyShake focuses on all stages (before, during, and after an earthquake), ShakeAlertLA has all stages as well as various tools for preparing before, and QuakeAlert only has information about what to do during.

These three apps do not have extensive preparedness sections that focus on multiple hazards, so I looked at two other apps dedicated to emergency preparedness.

QuakeAlert app education section with information about what to do in certain situations
App icons of Putnam County app and FEMA app
putnam county app enter people in household for emergency plan
putnam county app different walkthroughs to get prepared for an emergency
putnam county app different walkthroughs for various hazards like impending hurricane
FEMA app add emergency meeting places for in town and out of town

Both apps contain a way to document your emergency plan. The Putnam County app has an entire “My Plan” section that starts with five questions that document the adults, children, and pets in the user’s household, out of area contacts, and emergency contacts. It then walks the user through some other emergency preparations like compiling emergency kits, creating go-bags, and preparing your home. It also contains walkthroughs for various hazards like hurricanes, floods, and wildfires. The FEMA app has a much smaller section that focuses only on emergency meeting places. Both apps use text to designate emergency meeting areas.

putnam county app food supply shopping list based on number of people in household
FEMA app recommended emergency kit items list

Both apps contain some sort of emergency kit list with suggested supplies and the ability to check off items the user has obtained. The Putnam County app’s emergency kit list is customized based on how many adults, children, and pets live in the household, as reported by the user in the emergency plan section.

The Putnam County app focuses on a small area (a county in Florida) and highlights hazards that are relevant for that area. The FEMA app allows users to access information about all sorts of hazards but has a section where users can enter their zipcode to see what hazards are more likely to affect their area.

putnam county app hazard list
FEMA app hazards list
FEMA app local hazards based on zipcode

Both apps have a confusing navigation structure with Putnam County having three different navigation options that only show up on certain screens (homepage tiles, bottom navigation, and hamburger menu), and FEMA having navigation only on the homepage (dropdown menu) forcing users to tap back multiple times or tap the FEMA logo to return to other pages.

putnam county app homepage
putnam county app hamburger menu options
FEMA app homepage

Background

So how does ShakeAlert work? ShakeAlert uses seismic stations throughout Washington (WA), Oregon (OR), and California (CA) to detect the initial P-waves of an earthquake. The P-waves travel quickly through the earth and generally do not produce damage. The stations are constantly sending data to a central location. Once ShakeAlert identifies the P-wave, it calculates an epicenter location and magnitude in a matter of seconds. It then calculates the intensity of shaking at a given location and is able to issue an alert for when the damaging and slower S-wave will reach the given location.

diagram showing how sensors surrounding the earthquake epicenter detect the first felt wave and send that information to an earthquake alert center. An alert is then sent to users (shown by a city) before the damaging waves reach them.

Two Weeks Ready is being built specifically for the pacific northwest (WA and OR). The frequency of earthquakes plays a role in the type of app we want to develop. While the pacific northwest experiences over 1000 earthquakes >M1 each year, of these about 25 are large enough to be felt by humans, and there have been about 25 earthquakes since 1872 that have produced damage.

The WA Emergency Management Department had started working on the content for the app. I was brought in after ideas for the app had been proposed and preparedness content had started being developed.
 

It’s easy to forget that earthquakes pose a real danger to the pacific northwest when so few earthquakes are felt widely and produce damage. Thus, folks in WA Emergency Management were worried that users would delete the app when not many earthquakes triggered alerts. This prompted the idea to add a preparedness section that includes information about different hazards, emergency kits, and home hazards. It also includes an area to create an emergency plan.

Tsunami icon
drought icon
volcano icon
Landslide icon
Severe storm icon
earthquake icon
Pandemic Icon
flooding icon
Fire icon
hazardous material icon
Winter weather icon
Tsunami icon
drought icon
Landslide icon
volcano icon
Severe storm icon
earthquake icon
drought icon
Pandemic Icon
flooding icon
Fire icon
Landslide icon
Winter weather icon
EEW.png

Low Fidelity

I created an information architecture diagram for review. This helped illustrate the structure of the app and allowed for folks to provide useful feedback on the organization and content of the app.

Then I worked on creating wireframes of the screens. This portion consisted of three separate reviews and revisions with stakeholders. The revisions consisted of adding sections and content like location and user guide sections within the settings and further capabilities for the preparedness calculator.

wireframes - enabling notifications option
wireframes - enabling critical alerts option
wireframes - enabling location option
wireframes - recent events map
wireframes - recent events list
wireframes - I felt an earthquake
wireframes - event details
wireframes - create an account
wireframes - account login
hazard information.png
wireframes - emergency kits
wireframes - emergency kits
wireframes - emergency kits
wireframes - hazard hunt
wireframes - hazard hunt
wireframes - preparedness home
wireframes - preparedness home
wireframes - create account
wireframes - community
wireframes - pandemic protective actions
wireframes - earthquake protective actions
wireframes - hazard information
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - my family plan
wireframes - settings
wireframes - settings
wireframes - settings

High Fidelity

I started creating high fidelity screens by deciding on colors and creating logo options. Color options were taken from Washington EMD’s current two weeks ready color scheme found via two weeks ready documents.

Screen Shot 2020-07-12 at 7.34.24 PM.png

The name of the app was decided before I became a part of the project. During logo ideation, I focused on the earthquake aspect of the app rather than the preparedness aspect. The name “Two Weeks Ready” already communicates the preparedness aspect and does not communicate the earthquake early warning aspect.

two weeks ready logo 1
two weeks ready logo 2

After knowing the general logo design of the app, I knew what “vibe” I wanted the app design itself to evoke.

high fidelity - hazard information
high fidelity - tutorial 1
high fidelity - tutorial 2
high fidelity - tutorial 3
high fidelity - home screen
high fidelity - tutorial 4
high fidelity - recent events map
high fidelity - recent events list
high fidelity - tutorial 5

The Solution

Unfortunately, the development of this app has stalled because of funding and the fact that I am no longer employed with the company working with WA Emergency Management Department.

Solution

Reflection

Working on this project across organizations was a new experience. I wasn’t able to quickly receive feedback as I was developing wireframes and logo ideas, and progress was slow as the WA Emergency Department became occupied with Covid-19 response. Meetings were set up with these folks about every month, but feedback via email was negligible. In the future, having concrete questions about the design may help guide feedback. Another set back was that most ideation, in terms of what sections the app would have, the name, and general content ideas, had already been completed before I joined the project. This meant I had to get brought up to speed with their vision, and it was harder to challenge any ideas that would result in a badly designed app. There was also no research conducted with users prior to this ideation so I conducted competitive analysis. There is also a plan to conduct usability studies with users after the app has started development.

During this project I wasn’t working directly with developers, I was working with stakeholders that developed the content. This was a new experience knowing that developers will eventually look at my wireframes and work from them.

 

Overall I was excited to work on this project, knowing that this app has the possibility of saving lives through earthquake early warning and helping folks get prepared.

bottom of page