My function on this project is to provide end-to-end product design for a cross-functional team of PM, developers, and data scientists. User research expanded the premise of this project to be a responsive web app allowing earthquake fitness lookup of San Francisco residential addresses, supported by mapping and resources for earthquake preparedness and retrofit contractors and grants.

Discovering the key functions of the app

After completing both qualitative and quantitative user research, we both validated concern regarding the earthquake safety of San Francisco residences, as well as discovered a need for certain earthquake preparedness knowledge and resources. To find the key functions of the app, I combined organizational goals, research insights and personas into user stories, in which I found unique objects, actions, and attributes, which I organized into a prioritized conceptual model.

Exploring semantic grid + archetype options

Once the key functions of the app were discovered, I took into consideration the target market, accessibility considerations, and archetype qualities, to explore some semantic grid options. We finally landed on a dashboard format after consideration, for accessibility reasons and to provide an easy single-glance report after address lookup.

Understanding user flows

Knowing the user goals and key functions of the app, I was able to surface which goals required simple user flows, as many were met by the single view of the dashboard format.

Establishing wireframes

Based on the user flows, I identified three screen modes needed for the final app: A home screen allowing address lookup, results in a dashboard format, and optional modals for additional information.

First pass on the responsive UI

Based on the wireframes, I did a first pass on the responsive sizes to better understand what elements and styles I would need to build out in components and the design system. The below design is preliminary. Modals for the "About" and "Share report" links would show further details. For further engagement, illustrations will be added on the home screen following the concept of "earthquake readiness", perhaps in a line art style signaling stability and security, user interests reflected in the initial research, as well as details referencing San Francisco.

Next steps

• Usability testing of interface to validate whether users can reach goals intuitively

• Establishing design system based on Chakra UI, and spec responsive screens for dev

• Analytics to monitor project success