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):
Care when addressing earthquake safety concerns, as the topic surfaced existential wariness in users
Address lookup with building, liquefaction, and tsunami safety information
General earthquake preparedness resources, including escape plans and household preparedness
Browsable earthquake safety map of San Francisco
Interface formats considered
Dashboard
Google Maps pattern due to user familiarity
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:
Address lookup
Results in single-glance dashboard
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