Emergency: Adding a Feature to a Web App

COMPANY OVERVIEW

Emergency, fka Emergency Ventures, is a public safety app. Their main mission is to connect and serve citizens, volunteers, and emergency managers in natural disasters. They’re all about helping citizens weather natural disasters by arming them with personalized data to make it relevant and actionable to the individual and their situation.

COMPANY
Emergency Ventures

TEAM
Joe Russo (Stakeholder)

ROLE
UX Designer, Researcher

TIMELINE
4 weeks (March 2022-April 2022 - internship)

TOOLS
Figma, Miro, Trello

MY CONTRIBUTIONS

I spearheaded the design of an evacuation portal for the existing Emergency Ventures Web App. I was the sole designer for this project, responsible for the complete UX design process from UX research to building the final prototype.

Context

THE PROBLEM

In the event of a hurricane striking Florida, how might we provide timely evacuation updates to citizens, enabling them to gain knowledge and make informed decisions with data?

Millions of people in Florida are affected by hurricanes and need to prepare for potential evacuation, but they struggle to do so. Existing disaster-related information is generic, scattered, inaccurate, and not actionable. This makes it difficult for people to quickly evacuate in an emergency.

THE SOLUTION

An evacuation portal to empower Floridians to navigate hurricanes with ease.

I designed an evacuation portal with evacuation and flood zone mapping, an evacuation checklist, evacuation routes based on geolocation, highway traffic incident feedback, and directions to the nearest shelter locations to enable Floridians to make informed choices for their safety.

This portal can help keep people safe by aggregating and personalizing disaster information associated with evacuation intelligence.

KEY FEATURES

Find everything you need on your Home/Dashboard

You can find your evacuation portal on the home page.

In an emergency, it is critical to have the most important features and functions at the top of the home screen for quick access.

Plan for every scenario

In your evacuation portal, you will find preparedness plans and checklists for critical supplies needed if you need to evacuate.

You can find everything you need in one convenient location on your evacuation planning portal.

Pack your important documents

An Evacuation Packet/Checklist will ensure you haven’t missed any of the important documents and supplies you need to ensure your evacuation goes smoothly.

Know your evacuation zone

If you enable location tracking, whether you live near the coast or inland, the app will notify you of your evacuation zone.

Get timely and critical notifications in an emergency

Learn about your level of risk and get recommendations on whether or not you should evacuate.

Directions to your nearest shelter location

Find directions to your nearest shelter and approximate time until arrival based on geolocation.

Highway Traffic Incident Feedback

Understand the traffic conditions with highway traffic incident feedback.

Evacuation Routes based on Geolocation

Know what routes will produce the best results for evacuating quickly and safely.

Click on icons in the map for tooltips related to shelter capacity, gas availability, and more relevant evacuation information.

Design Process

User Research

DOUBLE DIAMOND

The "Double Diamond" is a design thinking and problem-solving framework that is commonly used in design and innovation processes. It consists of two distinct phases, each represented by a diamond shape, see below:

BUSINESS GOAL

The stakeholders came to me with the intention of introducing an evacuation portal feature to help Floridians navigate the decisions around emergency evacuation.

With this in mind, I started by conducting market research to understand the problem space and user research targeting users who have experienced hurricanes before to discover their preparedness processes.

RESEARCH METHODS

Finding consolidated information and news on hurricane preparedness was extremely time-consuming and frustrating. 

Competitive Analysis - 5 Studies

Government sites like FEMA are difficult to navigate when searching for real-time, actionable next steps. They offer generalized emergency management guides but no personalized resources.

After researching 5 competitors, I discovered the gap in the market of providing evacuation routes and traffic updates.

Survey - 28 Respondents 

To understand what keeps people from evacuating, I distributed a survey to those who have experienced hurricanes in their regions.

I found that most respondents have never evacuated before in the event of a hurricane.

  • The majority of respondents chose to evacuate due to a government order.

  • 43% of respondents would rate the difficulty of locating and understanding emergency data during a hurricane as a 6-10 (1-10 scale with 10 being the most difficult).

Interviews - 5 Participants

With regard to evacuation, I found that people want clear information about evacuation routes, traffic incidents, and congestion.

Synthesis

AFFINITY MAPPING

To consolidate findings, I created an affinity diagram to steer in a specific problem space. I bucketed insights based on sources of information, methods for decision-making, types of information needed, evacuation factors, and feature wants. I also noted pains and gains in users’ digital experience when preparing for evacuation.

KEY INSIGHTS & PERSONA

I created a user persona to reflect users’ core needs and frustrations regarding getting the information they need to evacuate amid hurricane warnings safely and efficiently.

Users’ core needs are:

  • knowing their evacuation zone + routes

  • the level of highway congestion

  • being able to locate shelter information

Their main frustrations are:

  • disorganized and inactionable information

  • locating relevant data on evacuation zones + routes

  • the traffic conditions at any given time

DESIGN REQUIREMENTS

Our main design challenge was to determine how we might make hurricane-related data points clear for Floridans in our evacuation portal so they can make educated decisions about whether or not to evacuate amid a hurricane.

Ideation

CONSTRAINTS

Adding an evacuation portal using an established design system

The stakeholder previously worked with a designer who provided concepts for key features such as a homepage/dashboard, map layers, and evacuation zone mapping. This is what I used as the basis for future ideation and design work.

CREATIVE BRAINSTORMING

Following a round of rapid ideation, I developed a feature prioritization chart to identify the above opportunity areas, serving as the basis for feature design.

After a discussion with the stakeholder, I focused on providing: an evacuation packet, evacuation routes, highway traffic incidents/congestion, and nearby shelter locations to satisfy users’ core needs.

DESIGN EXPLORATIONS

Before sketching, I created a user flow to provide design direction on the number of screens that would be necessary to provide a solution to users’ needs for evacuation alerts and routes. Through these sketches, I experimented with visualizing the user journey of locating essential information via an evacuation portal during a hurricane warning.

Iteration

MID-FIDELITY

Moving from paper to digital wireframes made it easy to understand how the design could help address user pain points and improve the user experience.

Prioritizing helpful buttons and information locations on the home page was a key part of my strategy.

Based on the user feedback on the sketches, I made the following changes:

  1. Moved the evacuation portal button from the bottom to the top of the home screen

  2. Adding updated shelter information to include capacity updates

  3. Included threat level on evacuation zone descriptions to emphasize severity

USER FEEDBACK

From user testing with 5 users, they felt that if they were actually in danger, the pop-up/modal (screen 3) was really effective. However, they wanted the ability to search for their desired destination. Based on this insight, I added search functionality (last screen).

Based on an additional round of user testing, I added threat level indications per evacuation zone.

Thus, after visual design edits and incorporating user testing feedback, I pitched the final designs and next steps with the stakeholder with intention on implementation. He was pleased with the results and provided positive feedback on the final designs.

Delivery

Reflection

LESSONS LEARNED

Being one of my first design challenges, I learned that even small design changes can greatly impact the user experience. I learned about information hierarchy and how the most important features and portals must be at the top of the home screen for quick access. Additionally, it would be useful for users to include relevant data to help them make more informed determinations around evacuation such as the percentage of people in a specific zone who choose to evacuate.

NEXT STEPS

The next steps would be to implement additional features based on user research and conduct further testing after each iteration.

NEXT CASE STUDY —>