— Designing a City Emergency Plan —

What is SF72? SF72 is your hub for emergency preparedness. You’ll find information about what to do in an emergency, simple steps to get connected, and useful guides to help you get prepared.

Why 72? The first 72-hours after a disaster are the most critical to survival and recovery. In a serious emergency, city services will be impacted, so a basic rule of thumb is for people to be able to take care of each other for 72 hours or 3 days before help arrives. 

The Problem, People are only interested in emergencies when something is happening to them, they see it in the news, or a community member mentions it.

Challenge, How can we increase youth to learn about emergency preparedness       

My Role: As a team, we were responsible for user research, user testing and interview process. I also created wireframes, prototypes, and the visual design.

Duration: 6 days

Team: One PM team member from SF72.org, and myself

Client: The San Francisco Department of Emergency Management

Solution: Monkey see, monkey do.

  • People listen to their friends, families, and teachers. 

  • With SF72 Youth Curriculum, starting with teachers, we will get students to learn about emergency preparedness then spread it to the entire family.

Competitors Analysis 

I found out that this project has been around since 2012. What happened is that a lot of competitors like Red Cross, State of CA, even Federal level organizations like Fema, stop working emergency preparedness area. So SF72.org is getting people prepared for an earthquake or whatever emergency that's why People started this project and I am glad that I participated in this project.




“I never really think about emergencies, unless it’s the health of my family.”
“We have emergency kits or go-bags at home and work. We have water stored and flashlight plus other things like food and blankets etc.”
"Having everything prepared before there is even a tropical storm in the Gulf of Mexico."
"Being ready for the unexpected. Always having a backup plan. Because it's an emergency! It's unexpected, and you can not plan ahead for that. Best the idea is to have a backup plan."


  • People who never think emergencies. They need to face to fear at first :(
  • People so prepared in their life. They had experienced before, and they know what they need to do.


Where do we start?

There are a lot of things we COULD do to make the product better, so how do we prioritize what we will do?

Two inputs:

• What are SF72.org objectives?

  • We want to increase youth participation and support teachers with short curriculum

• What is important to our Persona? How can we best help Youth & Teachers

Objective & Key Results

Objective: Improve adoption of SF72 Youth curriculum into public and private schools    

  1. Key Result: 3 targeted schools implement exciting, non-scary, accessible, and understandable emergency preparedness curriculum into classes and track feedback

  2. Key Result: 30% increase in downloads of preparedness curriculum as proof of students doing homework assignments that include emergency plans/kits, hazards, and communications

  3. Key Result: 50% increase in interest in other parts of the SF72 program resulting in new training requests


Product RoadMap & kpi


User flow and first sketches

We started to design user flow, and it helped us to understand user needs and features. After first early paper sketching, we tested it out. 


Usability Test Scenarios

Open-ended: You are a teacher and exploring emergency preparedness materials to use in class

Receiving this email from sf72.org to explore what to do next

Close ended:  You are still a teacher :) and you need to fill 20 minutes of class time tomorrow with emergency preparedness lesson.

  1. Request an appointment with trainers.
  2. Download the  curriculum 
 -->  The First Iteration

-->  The First Iteration

 --> The Second Iteration 

--> The Second Iteration 

Pain Points, After usability tests, I analyzed the test results.

Second, I listed all the pain points of each user and I answered why users confused during the user test. 

  • We don't need to ask them who you are at first, then show the curriculum
  • They all need the curriculum at first. 

Key Insights

  • Short and explained well email from the SF72

  • For SF72, access the curriculum quickly as a one pdf, not separated pdf's

  • Request a trainer for schools

  • Other short downloadable  curriculum, hazards 

 E-mail content V1.

E-mail content V1.

 SF72 Homepage

SF72 Homepage

  E-mail content V2.

E-mail content V2.

 Learn by Myself

Learn by Myself


Back to Wireframing

  • After two rounded user testing, as a next step, I created high-fidelity screens. 
  • Based on our MVP and user needs, we reconsider our design decisions and redesigned 


 Lo-Fidelity Sketches, 

Lo-Fidelity Sketches, 

High Fidelity Iterations

With the prioritization and features results in mind, I proceeded to high fidelity iterations as shown below.



Version 3. = Final Result


Next Steps

I’d love to test the redesign with more users and reiterate. There are few things I’d like to explore further.

  1. Redesign the curriculum based on students need and their focus, non-scary, easy to access, and understandable emergency preparedness curriculum.
  2. Track feedback and social media effect with #SF72 hashtags
  3. Design including a mobile app that would help you prepare better before and after, even in the event of a crisis.

Look at Other UX Projects