SF QuakeSafe (in progress)

SF QuakeSafe (in progress)

SF QuakeSafe (in progress)

The team

  • Lead Product Designer (my role)

  • 2 Product Managers

  • 2 Front-End Developers

  • 3 Back-End Developers

  • 2 Data Scientists

  • Rotating design help

The problem

A large number of San Francisco homes are not structurally prepared for earthquakes, and specifying data is not easily accessible to the public—though this data has been made available by the City of San Francisco, as part of its effort to make all San Francisco residences compliant with its earthquake safety building code.

The audience

Those who pay for a residence in San Francisco (all ages and backgrounds), and those considering it.



Key functions, based on research

The initital project scope was to make building earthquake safety data available in an accessible manner, but we wanted to ask potential users about their needs and to validate the initial idea. Due to budget constraints, exploratory research was confined to surveys, with around 50 respondents, surfacing the following needs (in order of priority):

  1. Care when addressing earthquake safety concerns, as the topic surfaced existential wariness in users

  2. Address lookup with building, liquefaction, and tsunami safety information

  3. General earthquake preparedness resources, including escape plans and household preparedness

  4. Browsable earthquake safety map of San Francisco

Interface formats considered

  1. Dashboard

  2. Google Maps pattern due to user familiarity

  3. Portal with Left Navigation Menu allowing for dedicated pages per data type

Chosen: 1) A single-pane responsive web dashboard was chosen because it would be accessible to all devices and user types (including those with screen readers), while also providing an authoritative single-glance report after address lookup.

Not Chosen: 2) The Google Maps pattern is focused around the map, which was decided against as the map was deemed to be secondary to the hazard data and resources, based on the user goals discovered in the initial research. 3) Portal with Left Navigation Menu was decided against since it would require unnecessary interaction to use, which could pose difficulty for those with screen readers and the less computer literate.


Defining flows to user goals


Finding necessary screens

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 the elements needed to be built

  • High-contrast blue and yellow were used to accommodate color blindness

  • Chakra UI kit was used by engineering request


Layout iteration and testing

  • The two-page design did not allow users to immediately browse the 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


Data transparency and visual refinement

A concern regarding liability surfaced during initial research led me to want to contact the City of San Francisco to ensure the interface and alert language were transparent to the intent in the City's dataset. A meeting with City representatives allowed us to redefine the alert language to be in accordance with the City's intent, and also to provide users with exact details on what is being specified by the safety alerts.

Additionally, a second exploration on the visual design layer—vetted through user research—allowed us to land on a more refined look-and-feel to better engage with the audience. Further testing of the visual design will be done during usability testing.



Next steps

  • Iteration on map visualizations

  • Usability testing and any iteration prior to build

  • Continuing collaboration with City of San Francisco

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

  • Analytics to monitor project success