Storm Prepper App Landing Page

STORM PREPPER

RAPID PROTOTYPING

 

In 2019, for a quick sprint conceptual project, I designed an app for people living in coastal cities hit regularly by hurricanes and super storms. In six days, I took the project from user research to digital-prototype of two key user flows. 

The research revealed that users need a way to prepare appropriately for a storm because they want to experience as little disruption as possible to their life and work activities before, during and in the aftermath of a storm no matter how severe the storm is.

I hypothesized that by creating a very simple app that provides real-time storm information and preparation recommendations directly tied to customizable to-do lists, preppers could focus on proactively responding to their situation. Therefore, they would experience less disruption and feel a stronger sense of empowerment and control when a storm comes to their city.

 

Final Scenarios and Mock-Ups Below.

ACTIVITIES

 

For this project, I started by interviewing individuals who self-identified as having lived in a city that was hit by one or more major hurricanes. I wanted to understand what their biggest pain points were when it came to living through the storm that could be addressed with a mobile app. The research led to some competitive analysis of current emergency preparedness and storm tracker apps. From there I built out a paper-prototype and conducted some usability testing. After iterating with the paper prototype, I mocked up a digital version.

 

Methods

User Interviews
Affinity Mapping
Competitive Analysis
Feature Brainstorm
User Flows
Interactive Paper Prototype
Usability Testing
Digital Mock-up

 

Tools

Post-its
Paper & Markers
Invision
Sketch

Time

6 days

DESIGN STRATEGY & PROTOTYPE

 

From the user research, I developed a proto-persona, Jamie, and began the design process by focusing on Jamie’s key pain-points, which were:

Her concern about storms.
Her uncertainty about storm alerts, and how they really apply to her.
The pressure & desire she feels to get back up and running as quickly as possible.
Her lack of access to the internet or electricity during or after a storm.

It seemed like the best way to ensure that Jamie could stay focused on her responsibilities and commitments before, during and after a big storm would be to encourage her to prepare any non-perishables, equipment or home improvements well in advance, and then in the immediate lead-up to a storm provide her with clear, actionable alerts, and reminder lists for things that can really only be bought or done in the day or two before a storm.

Because of the project time limitations, I focused on building out and testing two versions of the the immediate lead-up user flows.

In addition to supporting the user’s goals, I wanted the visual design to be calming and un-alarmist. I tried to keep the screens focused on the most important action-oriented information, with simple and consistent buttons, subtle visual cues, familiar icons, and, in its iPhone version, recognizable iOS list management actions.

User Backstory

Jamie lives in a coastal city that is regularly hit by hurricanes between August and October each year. Because storms in the region have been so severe in recent years, she takes prepping relatively seriously.

A few months ago, Jamie downloaded the Storm Prepper App and already set the app up with her location information. She completed all the advance preparations the app recommends, like putting together a bug-out bag and compiling emergency documents. She also customized some of her pre-storm to-do lists.

SCENARIO 1: CAT 3 STORM NOTIFICATION

 

Friday afternoon, Jamie receives a notification that a pending storm has been upgraded to category 3. She swipes left to reveal the system action buttons. She selects View. The app opens to the Storm Prepper main page. Here she can see a forecast map, access information from the National Weather Service, see more on the National Weather Service’s website, and access her planned action items. Because the advisory is not recommending evacuation, Jamie decides to look at the items in her Remain In Place Plan.

She knows she will be passing a store on her way home, so she takes a quick look at her BUY list. Jamie remembers that she restocked her canned vegetables last weekend, so she doesn’t need them and removes them from the list.  She also knows she’s running low on cheese, so she adds it to her shopping list. 

She wants to make sure that ahead of the next storm she also gets cheese, because her generator will keep the stove working even if the power goes out, and “what could be better than grilled cheese with soup?” She decides to save this version as her template list. She is done with the list for now, so she closes her phone and goes back to focusing on what she was doing before she got the alert.

Gif of Storm Prepper Category 3 BUY scenario

Storm Prepper Cat 3 Buy Scenario Flow

SCENARIO 2: CAT 4 STORM UPDATE

 

By Sunday morning, the storm forecast has changed. A notification tells Jamie that the State Police recommend that residents of Ocean City evacuate. Although it is not required yet, Jamie knows that she, her partner, and their dog Sandy will probably be happier if they head inland to her sister-in-laws instead of sticking it out at home.

She decides to take a look at her Evacuation plan, specifically the to DO list to see what she needs to do to get ready to leave. She checks “Call Jane”, because her partner is making that call right now. She decides to re-order the list because after checking the car is ready for the trip, she wants to download her work project in case she won’t have internet access.

After looking at the list for a little while, Jamie starts feeling nervous that her customized list is missing some key items. She decides to reset the list. Her custom list was so short anyway, she’s not worried about losing the handful of items that were on it, so she decides to reset to the Storm Prepper default list and start over.

Gif of Storm Prepper Caegory 4 DO Scenario

Storm Prepper Cat 4 DO flow

SCENARIO 3: EVACUATION MANDATE

 

By Sunday evening, the storm has been upgraded again. A new notification appears alerting Jamie that a mandatory evacuation order has been issued.

Jamie clicks into the app to see the Storm Update and is relieved that she and her family are already headed to her sister-in-law’s.

Image of screen with Evacuation Mandate notification

Image of Storm Prepper Evacuation Mandate Page

Credits

Storm Prepper app icons are adapted (color & size) from original icons created by Agni from Noun Project.

Storm icon and Storm Prepper proto-logo are adapted (color & size) from the original icon created by Luiz Carvalho from Noun Project.

Storm map is adapted (color and layered storm category numbers) from a NOAA map for Hurricane Sandy. https://www.nhc.noaa.gov/aboutcone.shtml