Andrea Maple

safety in uncertainty

design challenge | 2020 | 3 hours

Having been raised in the East Bay of the San Francisco Bay Area, I grew up with a minute but perpetual fear for earthquakes. More than fires, mountain lions, or housing prices, earthquakes were the most formidable threat against my safety, the safety of my family and friends, and the safety of my home. I was just eighteen when a 6.0 magnitude hit Napa Valley, and I mourn the loss of thousands of barrels of wine to this day. 

Earthquakes have always literally shaken the foundation of human existence due to their unpredictability and the total nature of their destruction. Unlike snowstorms and hurricanes, the San Andreas fault can and has devastated California without the opportunity for alert and evacuation. In school, my city in particular had two or three memorable shakes – nothing catastrophic, not even a picture frame sliding off the fireplace mantle – but I would remember excitedly checking in with my friends. I can only imagine if that South Napa quake had erupted a few miles south, my emotions could have taken a more desperate turn. 

It’s those three tenets of my childhood that built the core for this app: how do you design against a force of nature like an earthquake? 

01 brief & deliverables

Pick your scariest natural disaster scenario. Think about the basic needs of the people affected. Think about what they will need at a time like this. Design a website or an app that helps them endure through this disaster.

2020 Design Challenge

Within the scope of the challenge, user research and user testing were inaccessible, but I did take into consideration how they would be performed. Market research, sketches, brainstorming, and prototyping were all accepted as deliverables.

02 research

The high-level goals for this project were:

• Fast, simple user connections to resources, services, information, and friends/family
• A fail-proof design that prioritizes safety and certainty, in a time of uncertainty
• Extending, not replacing, earthquake safety measures and resources that are already in place

Seismology 101

For those who haven’t personally been affected by earthquakes in any way, here’s why earthquakes are uniquely difficult to design around compared to other natural disasters:

1. Unpredictability: Unlike hurricanes, floods, storms, fires, or tornadoes, earthquakes are impossible to predict in any meaningful way. Scientists have been optismistic since the 1970s, but every Big One since then has sadly disproven them otherwise.
2. Destructivity: The most destructive natural disasters in history have been earthquakes. This is in part due to their aforementioned unpredictability, but also because there aren’t that many places to hide when the earth’s crust decides to crack open.
3. Safety: Most of earthquake’s safety measures revolve around preparedness, both for the individual and the city they’re in. Infrastructure is especially important for earthquake safety, such as Taipei 101’s infamous swining pendulum. While an earthquake is happening, there is not much you can do to stay safe if you aren’t already prepared, except brace yourself against a doorframe (and if the infrastructure isn’t strong enough, good luck even with that).

Device

User Research

In lieu of proper user research, I took an amalgamation of myself and everyone I knew who had been affected by some natural crisis, or have grown up in areas of natural crisis. A small summary of the pain points me and my friends have experienced are summarised below:

Pain Points	Need
During COVID-19 closures, it was a long process to check which grocery stores near me were open.	Food
Even when I went to an open grocery store, the lines would be really long or they would have really low stock, which is a waste of time.	Food
When I check Facebook after an earthquake, I care more about how my close friends are doing than random acquaintances.	Social
I would prefer official news information about natural disasters so I know what’s going on.	News
I wish the pharmacy would have told me COVID closures had prevented my prescription from being filled.	Medicine
Immediately after a disaster, I just need to know if my friends are okay – I can talk to them personally later, if I need to.	Social

Market Research

Luckily, this design challenge was given during a time of global crisis: the COVID-19 pandemic. With the world on edge, how have other mobile applications thrived or innovated under these circumstances? How have they thrived or innovated under other times of crisis?

Conclusion

The research gave me a deeper insight into creating this app. From my high-level goals, I framed a few lower-level goals into this app’s theoretical implementation:

• Fast, simple user connections to resources, services, information, and friends/family
  • Reducing clutter on each page; clean & minimal design
  • Purposeful visual icons; don’t show inaccessible resources
  • Curated information over status updates
• A fail-proof design that prioritizes safety and certainty, in a time of uncertainty
  • Intentional buttons; easy user correction
  • Bright, distinguishable colours; high contrast; not overly designed to the point of abstraction
  • Strong feedback and response; every action has a reaction
• Extending, not replacing, earthquake safety measures and resources that are already in place
  • Centralizing information in a single feed; centralizing relevant information only
  • Minimal functionality outside of immediate information; the user does not need an extra social media app just to discuss an earthquake, the user does not need an extra shopping app just to check store inventory

Personas

03 basic user flow

With all of these in mind, I created a basic user flow. Key points to highlight are the permanent SOS button, which is available on most screens. Additionally, the information pages under Settings would contain basic earthquake safety procedures, but is tucked away so as not to distract from the main focus of the app. Users who are less familiar with earthquake safety, such as tourists, can access this information on an intentional basis.

Four key motifs present themselves, both as pages and filters: Social, Stores, Services, and Events. Social will help users connect with a selected list of contacts – the design’s intention is to have the entire feature act as the Close Friends feature on Instagram, to reduce clutter.

Stores is how users can see what resources are available: food, medicine, supplies. The stores themselves can update their affected store hours or closures, and the filters will accommodate these to only show accessible stores in the given area. Services is functionally the same, but for medical facilities (with options to show their capacity or affected hours/closures) or shelter (such as motels).

04 prototypes

I mocked up a few selected pages using Figma. These do not reflect the full extent of the app if it were to be developed, but rather a general overview of its visual aesthetic and functionality.

The main design point was the live-map as the opening screen, to accommodate for that unpredictability. The first thing the user will see if they feel they are in a quake is confirmation of the quake, affected stores and services, and any friends in the affected zone.

Earthquake destructivity, the second point of design, can be circumvented through the app in relation to available stores and services. Theoretically, only available/unaffected stores and services will show up on the main page, reducing the need to check and re-check individual store/service information through less efficient manners.

Low-Fidelity Prototype

• 

• 

• 

• 

• 

News articles should be sourced from official sources, including the government and local newspapers, rather than user-submitted content. The events page was directly inspired by Twitter Moments and Facebook: a highly curated summary of a single event, which has no need to be accessible during a normal day.

High-Fidelity Prototype

Bright, simple colours which are consistent throughout the app were a priority over high-design style. Overlays were chosen over new pages to narrow focus onto the live map, and reflect the temporal and unpredictable nature of earthquakes.

The SOS button would be implemented with extreme intention: my intial design was a five-second hold, which turns the SOS button red, before bringing up the Emergency Call overlay for another 5 seconds. It is still accessible in times of emergency – only needing 1 finger – but has built-in user correction to prevent accidents.

Further user testing on this prototype, if accessible, would gauge how easy the app is to learn, a key tenet of usability. Designing around preparedness prioritizes the usability factor of memorability, in the hopes that the user would have this app before – God forbid – they would ever need it.

view on Behance >>