ShakePrep

Address based hyper-localized earthquake preparation app

Shakeprep Final mockups

Overview

Many people living in earthquake-prone or high risk areas are underprepared for earthquakes due to reasons such as choice paralysis, uncertainty over preparation, or simply lack of knowledge. I worked on a quarter long course project to create an app prototype which creates a hyper-localized disaster preparation experience, aiming to help prepare individuals and families for how an earthquake would affect their home location in specific.

Role
Product Design
User research, user interviews, sketching, wireframing, 

Project Type
School Project

Duration
May 2023 – Jun 2023

Problem

How might we create a way for people to prepare for earthquakes while being specific to their needs?

Research

80%

reported 2 out of 5 or lower on earthquake preparedness

0%

currently had an earthquake app installed on their phone

$230

was the most spent on “useless” preparation items

I ran short user interviews to understand current earthquake preparation habits out of friends and family. Despite awareness of the possibility of a large earthquake in the Pacific Northwest, 80% rated their earthquake preparedness relatively low.

None of them currently had earthquake apps on their phones, and those who had previously tried disaster preparedness apps found them unhelpful, citing unclear design and insufficient information. 

Competitive Analysis

I identified three similar, existing applications for earthquake preparedness, all of which had earthquake maps. However, by default Android devices will give earthquake warnings to users based on location. For most people, having worldwide earthquake maps which drain battery are unnecessary.

Competitive analysis

Persona

Gabriel, 32, Physician

Gabriel is a 32 year old physician who likes to help his community through his work. When he isn’t working, he likes to enjoy a movie or listen to good music. He’s a new dad, and the addition to his family makes him consider dangers he hasn’t thought deeply about before, such as earthquakes. 

Goals

  • To prepare himself and his family in case of an earthquake
  • Feel in control of his preparation
  • Prepare the perfect amount- Not under prepare and be left high and dry, nor over prepare and waste money and resources 

Information Architecture

Based on the needs identified in earlier stages, I drafted the information architecture map of the app, however changes were made between the initial IA map and the final, noted by the callout texts.

Shakeprep Information Architecture

User Flow

Using the information architecture as a guide, I created an initial user flow of start to end of a user’s usage.

Shakeprep user flow

Wireframes

Sketched wireframes of Shakeprep app

The initial sketches had the home page as the map itself, though it was restructured to a proper home with easy access to multiple things a user could be looking for in later iterations. This was informed by feedback on how most users will input their home or work address once, and will move on to learning about ways to prepare and mitigate risks. 

Prototypes

After creating a working prototype, I tested the flow and functionality of the wireframes with a few of my peers, and received these main suggestions:

  • To have a back button during the onboarding process
  • To create clearer filtering system on the map page
  • Explaining what the app is and how to use it
Shakeprep Map Interaction

Final Designs

Shakeprep Final Screens

Taking feedback on the onboarding screens, I rewrote the copy to be more engaging and personable, while also reducing text and visual load. 

A language select drop down was added in order to reach a broader audience so that everyone can prepare for earthquakes.

The map interaction was most important on this app. Users should be able to:

  • Add their home address
  • See at-risk areas marked on the map 
  • Identify and address any potential risks through the alerts system
Map interaction
Checklist interaction

The “Advice” section was changed to “Prepare”, in order to store alerts and an emergency checklist all in one place. 

Users can check the list for basic and additional emergency supplies they own. 

Reflection

This was my first time doing the full process of UX design, from preliminary research, competitor analysis, user research, wireframing, visual design, and prototyping. It was challenging to design a product for a concept that didn’t have much existing apps relating to it, but I learned a lot in the process.

Next Steps

  • Continue to iterate the map page in order to add more possible risks, such as tsunamis and land slides
  • Increase clarity of map colors, visuals and more through a legend or other visual indicator
  • Elaborate on the emergency supplies checklist in order to be shared with other household members