SF SafeHome: Redesigning Disaster Preparedness

A mobile-first risk assessment platform empowering San Francisco residents to uncover seismic, tsunami, and liquefaction threats before they become tragedies.

Civic Tech UX Strategy Product Design
SafeHome Desktop UI SafeHome Mobile UI
01
UX Process Built
3wk
Full Redesign Timeline
4+
Cross Functional Teams Aligned
100%
UX Methods Introduced Fresh
Role Product Designer
Timeline Joined Jan 2026 - Present
Org SF Civic Tech
Team FE/BE Engineers, Data Scientists, Analysts

🎯 What is SafeHome?

SafeHome is a simple, highly accessible website tool designed to help the general public determine if a specific San Francisco address is at risk during an earthquake.

The current risks assessed are generated entirely from high-quality government datasets, evaluating:

  • Soft-Story Property Status: Poorly reinforced wooden buildings (classified by the City of SF).
  • Tsunami Flood Zones: Coastal hazard areas (calculated by CA USGS).
  • Soil Liquefaction Zones: High-risk ground instability areas (calculated by the City of SF).

The Scale of Impact

7 Million+

The San Francisco Bay Area is home to over 7 million residents, sitting directly atop some of the most active fault lines in the world. Despite the extreme density and immense risk, actionable property-level data is incredibly fragmented. The impact of this project is potentially life-saving for millions.

⚠️ UX Pain Points

While the state and city collect phenomenal data, existing government resources are not user-friendly to the general public and are practically invisible to average renters and buyers.

πŸ—ΊοΈ

Critical Information Hidden

The full-screen map trapped users on mobile without scroll indicators, hiding essential preparedness resources below the fold.

🧩

Confusing Terminology

Technical terms like "Liquefaction" or "Soft Story" lacked plain-English explanations, leaving residents uncertain about their actual risk.

πŸ“±

Lack of Responsiveness

The original portal was completely unable to be used on mobile devices, violating the primary use case for emergency preparedness.

β™Ώ

Accessibility Failures

Poor color contrast and non-semantic structure made the tool inaccessible for users with visual impairments or screen readers.

πŸ’‘ UX Focus & Ideation

Our core UX philosophy is straightforward: Shift the cognitive load to the system. The goal is to make this existing data fully usable and highly visible to renters and buyers in SF so that, ultimately, this awareness forces property owners & developers to upgrade building safety.

πŸ—ΊοΈ User Journey & IA

To address these pain points, we overhauled the Information Architecture of the Earthquake Safety App. The new journey deliberately separates resources into actionable, contextual phases: Pre-Event, During Event, and After Event.

ENTRY
Enter
SafeHome
βž”
Input address &
Map interaction
βž”
Personalised Resource List ACTION ITEMS BELOW
PRE EVENT
"Go Bag" Checklist Design Opp
βž”
State Resources
βž”
Insurance Companies
βž”
Elderly / Disabled
DURING EVENT
Offline Maps + Routes Critical Feature
βž”
Live Updates Tsunami Alert
βž”
Community Volunteers
βž”
Push Alerts Future Phase
AFTER EVENT
Shelter Locations
βž”
Hospitals & Emergency
βž”
Insurance Estimator Design Opp
βž”
Elderly & Disabled Accessibility

πŸ“ˆ Data Science Alignment

I collaborated closely with the Data Science team to translate raw government datasets into accessible frontend metrics. Here is how that data impacted our strategy:

Website Health

SafeHome

Last refreshed a few seconds ago

Visitor Analytics

Cumulative Users in L365 β“˜

466

β†˜ Down 23.48%

Weekly Active Users β“˜

81

β†— Up 80.0%

Organic SEO Unique β“˜

5

β†˜ Down 61.54%

Monthly Active Users β“˜

178

β†— Up 7.23%

Cumulative Unique Visitors β“˜

Active Users (DAU/WAU/MAU) β“˜

Referring domain (last 14 days) β“˜

Shows the most common referring domains for users over the past 14 days.

$direct www.sfcivictech.org www.google.com amreenkaur.com l.instagram.com localhost:6006 project-mffehjhlp... vercel.com
020406080100120140160180

Pageview funnel, by browser β“˜

This example funnel shows how many users have completed 3 page views.

1 First page view β†’ 178 persons
2 Second page view Average time to convert: 1d 10h
11.24%
β†’ 20 persons (11.24%) completed β†˜ 158 persons (88.76%) dropped
3 Third page view Average time to convert: 14h 21m
5.06%
β†’ 9 persons (5.06%) completed β†˜ 11 persons (94.94%) dropped

Data Quality Dashboard β“˜

Monitors accuracy and filtering of known bot signals.

139 Users
0
12
25
Mar 3Mar 13Mar 23Apr 2

Daily active users (DAUs) in L7 by Country β“˜

Shows the number of unique users by country that visit SafeHome.

United States China France Canada Japan Spain
03570105140

🧠 Process Deep Dive

Mobile-First Approach

Real estate moves fast in San Francisco. A renter might be standing outside an apartment building they're touring right now. By prioritizing a mobile-first design strategy, we ensured the tool functioned as an immediate "pocket safety inspector" rather than a dense desktop research portal.

SafeHome Mobile Interface scrollable

Strategic A/B Testing

We recognized early on that users process civic data differently. To definitively validate our core navigation pattern, we are conducting a strict A/B test between two vastly different homepage philosophies:

πŸ—ΊοΈ

Map-Centric Approach

A highly visual, exploration-based interface that loads the interactive map immediately, allowing users to browse neighborhood heatmaps.

πŸ”

Non-Map-Centric Approach

A highly focused, search-based interface that forces the user to input an exact address before revealing any geospatial data.

Option A: Map-Centric

Alpha
Map Centric Design

Option B: Non-Map

Beta
Non-Map Centric Design

πŸ§— Challenges

Qualitative Artifacts

  • Translating incredibly dense structural engineering jargon into understandable civilian language without losing accuracy.
  • Maintaining high momentum and alignment in a completely remote, asynchronous volunteer organization.

Quantitative & Technical

  • Designing lightweight UI components that don't choke the mobile browser when rendering heavily layered GIS vector chunks.
  • Balancing data granularity vs load speed limits for mobile users over cell networks.

πŸ€– Catalyst: The AI Edge

A Sweeping Process Shift

I joined the project mid-flight in January. Observing the existing workflows, I realized the team was strictly relying on traditional, manual generation methods causing sluggish momentum.

I championed a paradigm shift by injecting competitive AI tools directly into our core design pipeline.

Tool Stack

✨ Claude
⚑ Google AI Studio
πŸ’¬ ChatGPT

Exponential Velocity

Rapidly ideated architectural structures, drafted UX copy, and shipped high-fidelity screens. This bridged the alignment gap with developers, accelerating our two-week sprint cycles drastically.

πŸ† Leadership & Results

The Wins

+76.5%
Active Growth
Monthly increase.
6.5m
Engagement
Avg session duration.
+600%
Visibility
Organic SEO growth.
51%
Initial Trust
Early conversion.

Wins Breakdown

Growth

Scaled reach 600% and acquisition 76%.

Trust

Sustained 6.5-minute, high-conversion sessions.

The Gaps

-85%
Mobile Gap
UX friction on mobile.
93.7%
Abandonment
Journey drop-off.
64%
Churn Rate
Inactivity post-visit.
Low Vol.
SEO Volume
Low absolute count.

Learnings Breakdown

Friction

Severe mobile and journey drop-offs.

Retention

High churn despite visibility growth.

πŸ”­ Learnings & Future Scope

We are actively building a foundation that scales. If we successfully validate this model in San Francisco, we plan to aggressively expand the platform using appropriate datasets to cover major Bay Area hubs (e.g., San Jose, Oakland).

New Disaster Cases

  • Wildfire & Smoke indexing
  • Real-time Flooding events
  • Service Loss Notifications (power outages, cell drops, closed government services)

Future Website Features

  • Offline mode routing
  • SMS backup communication during major disasters
  • Full language localization support for diverse Bay Area populations