ReadyMapper
UI/UX & Visual Design • Desktop • 2023
OVERVIEW
"What makes this powerful is the ability to have an iterative process with real consumers of the data."
Problem: CrisisReady needed a better way for public health agencies and emergency response teams to respond to disasters. Existing workflows were too slow and disjointed for decision-making in high stakes scenarios.
Solution: We designed ReadyMapper, an interactive dashboard that integrates realtime data on a disaster along with community demographics, movement, and health infrastructure. What started as a tool to support wildfire and hurricane response has since been scaled to support all kinds of global disasters.
As a product designer on this project, my team and I:
Visualized complex datasets related to disasters, mobility, health infrastructure, and vulnerability metrics
Observed and integrated workflows of relevant users managing real-time disaster data
Developed a UI that allows for data filtering, place comparison, temporal analysis and spatial analysis across all available datasets
Collaborated with researchers and engineers to build a dashboard that ensures scientific accuracy and usability for both technical and non-technical users
Created a user interface with flexibility for new types of disasters
Designed a report builder which allows for users to capture customized snapshots of the data
PROBLEM
Combining crisis and community data for decision-makers in moments of crisis
To kick off the project, we had the client define what success looked like in their eyes. This is always a helpful way of aligning our expectations at the start of the project as well as getting a better sense of what we are solving. It also serves as a benchmark to measure ourselves by as we progress through the project.
Failure
Success looks like avoiding 100% of these
Broken or lagging data
Key audiences don't see use/value of the tool
Failure to explain workflow
People hate it
Minimum Success
Success means achieving 100% of these
Clear presentation of data and workflows
Live data in the report (real and timely)
Includes ability to generate pdf report
Able to successfully demo Dixie Fire use case
Used by more than one agency partner
More ways to visualize vulnerability other than age
Target Success
Success means achieving 40–60% of these
Users are able to easily use the product
Successfully demo more than one use case (beyond Dixie fire)
Able to toggle between two scenarios
Teams/offices have internal capacity and interest to use dashboard regularly
People are excited about this tool and it’s future development
Ability to customize the pdf report (rank order sections, include/exclude sections)
See below for a screenshot of the actual activity we did with the client in FigJam:
DISCOVERY
Learning what questions emergency responders are asking when working in an emergency
We began our research by learning from disaster responders firsthand about their current workflows. We used the specific example of the Dixie Wildfire in 2021 to learn exactly where painpoints existed. The main issue they seemed to run into was needing to use many different applications at once to view different types of data. This was too slow and cumbersome, and most importantly didn't allow for layering multiple data sources for analysis. Our discovery and user research allowed us to discern which types of data would be necessary for the dashboard:
Disaster data: Where is the wildfire? Is it growing or shrinking? How many acres have burned since the start?
Vulnerability data: Where are the vulnerable people (i.e. over 65 years old, under the poverty line, etc.)? Where are people experiencing power outages?
Mobility data: Are people evacuating? If yes, where are they going?
Infrastructure data: Where are the hospitals that might need evacuation? What is the bed capacity for nearby hospitals? How long does it take to drive to these hospitals?
For this application to be successful, it was necessary that the client could ultimately upload data theirselves. We spent some time determining the quality and feasibility of available data.
DATA DESIGN
Designing maps and supporting visuals to convey information quickly
For the dashboard to replace the current users' workflow, we were going to need to visualize many different types of layers on top of each other. To decrease visual overwhelm for the users, we kept the basemap simple, using a black and white color palette while emphasizing place names, road networks and the topography of the area. This provided context for the data overlaid on top, in which we used color, texture, and iconography to enhance map legibility.
While the application runs live data, we used historical data from the Dixie Wildfire to initially design the product. The first task was to map out where exactly the fire was and how it was changing. We accomplished this with a red texture to show the fire boundary and darker texture to show new fire growth. We then shaded in places via vulnerability metrics using solid fills. In the example below, you can see how we used contrasting textures and colors to display the percent of the population over the age of 65 overlaid with the fire boundary:
After designing the disaster data for the Dixie Fire, we needed to take a step back and think about how the design would work for other kinds of disasters that may need to be viewed at a much larger zoom scale. When working with hurricanes, for example, it's necessary for the user to be able to zoom out to a national level given the much larger scale and faster timeline of a hurricane. In the example using historical data from Hurricane Ida in 2021 below, you can see how users zoom out to see how the hurricane is developing. In doing so, we hid details like vulnerability metrics and power outages as they are not the focus and instead distract from information about the disaster itself, such as forecast pathways and hurricane categories.
When users determine where the disaster and vulnerable people are, they likely want to know if and where people are evacuating. The movement data used encodes information via raster points across the map, as opposed to specific zip codes or counties. We used a colored dot pattern to show the detail in which people are moving to or from locations in a disaster scenario. The dot pattern here also helped to distinguish the movement data from the vulnerability and disaster data.
Finally, users might want to know which medical facilities might need evacuating or could take evacuees in and around a disaster area. We used icons to show different health infrastructure facility types in an area, which are broken into the categories of hospitals, long-term care/other, and outpatient. The pin iconography also distinguishes this data from the movement, vulnerability, and disaster data.
Creating a supporting lineplot visual to quantify natural disasters over time
Users could scrub through the data using a timeline input, but there was no way to see an summary of the disaster impact over time. We created a small lineplot that shows quantifiable changes to a disaster, such as total acres burned or the wind speed overtime. To save space, we removed the y-axis and instead provide the exact value as a header, such as the exact number of acres burned or category of wind speed.
USER INTERFACE
Building a user interface that is useful in moments of crisis
Once we had determined which datasets to use and how best to design the data itself, we just needed to create a sleek and minimal interface to guide users in their work. The user interface is divided into the following key parts:
Collapsable side bar: Users can quickly move between disasters in the space-efficient navigation menu.
Disaster legend panel: A collapsable legend panel shows the disaster information in the top lefthand corner of the interface.
Adjustable data legend panel: A second legend panel lets users toggle between the data layers, adjust supplementary data layers and see specifics related to any selected places or counties.
Time scrubber: Users can animate the data through time or find a specific moment to view with the time scrubber at the top.
Generate Report: Users can create a pdf of their findings by selecting the large button at the bottom.
REPORT DESIGN
Turning live data into actionable and sharable reports for coordinated response
While the client was pleased with the dashboard itself, they described to us how it was necessary for users to summarize their findings to share with others. To integrate with their existing workflow, we decided a report generation feature would be appropriate for saving and sharing findings. We outlined a few goals for the report generation feature in the dashboard to help us achieve the right design:
Report shows a clear summary at the start before diving into specifics
Users can customize sections such that content in the report is intentional and never distracting
Data is presented in multiple ways to cater towards different people and use cases
Design is flexible so it works with various disasters
The typical chain of command in a disaster situation indicates how each person would likely be interacting with the data. For example, incident commanders are more likely to be reviewing reports, whereas planners are more likely to be using the dashboard itself and generating reports.
When using the dashboard, a user may select the "Generate Report" button at any time to see a comprehensive overview of their map focus and any selected places regarding information around disaster, vulnerability, movement, and health infrastructure. They can even personalize the report by removing certain sections or adding their own notes before saving or sharing the report. Report information is displayed via cartographic images, tables, and small visualizations to allow flexibility for the report generator to create effective displays of information.
