SF QuakeSafe (in progress)

SF QuakeSafe (in progress)

SF QuakeSafe (in progress)

Function: Product design lead
Team: Product manager, developers, data scientists, occasional design help

Not all San Francisco homes are earthquake-safe

A large number of San Francisco homes are not structurally prepared for earthquakes, and specifying data is not easily accessible

Target audience

San Francisco residents and those considering living in San Francisco

Key functions

Qualitative user research surfaced a need for:

  • Browsable earthquake safety map of San Francisco

  • Address lookup with building and area earthquake safety information, based on San Francisco government data

  • General earthquake preparedness resources

  • Help with earthquake safety concerns

Exploring interface options

For accessibility to all devices and user types, a responsive web dashboard could provide an authoritative single-glance report after address lookup. Other options explored:


Understanding user flows

Simple user flows were defined to solve for key user goals


Establishing wireframes

Based on the user flows, three screen modes were identified as necessary:

  1. Address lookup

  2. Results in single-glance dashboard

  3. Modals for supporting information


First visual design pass

A first pass on the responsive sizes to orient design and engineering on elements of build


Iteration and testing

  • The two-page design did not allow users to immediately browse safety map without entering an address, prompting redesign to a single page

  • Interest in the Google Maps pattern resurfaced, prompting A/B testing which established the dashboard as the preferred format


Responsive sizes for MVP

Design of responsive sizes allowed development to begin


Next steps

  • Redefine interface to be transparent to underlying dataset

  • Iteration on map visualizations

  • Usability testing and any iteration prior to MVP build

  • Consider mailing all addresses where buildings are in need of retrofit

  • Analytics to monitor MVP success

  • Explore and enhance visual design layer, for impact and engagement