Watch Duty is a collaborative wildfire tracking app. It helps you stay up to date about wildfires, especially when it matters the most. The app helps you visualize fire activity across the state. You can follow individual incidents and get push notifications for critical information, such as evacuation orders.

Experienced fire reporters maintain the incident report in Watch Duty, keeping critical structured information like containment and coverage up to date. When combined with other geospatial data sources, Watch Duty has become a trusted tool for anyone affected by wildfires in California, from home owners to first responders.

Team: Technical founder, volunteer PM, 5+ volunteer engineers, and me.

My Role: Product Designer

https://youtu.be/GoAHRfv6ToY

Small team, 0-to-1 product

Watch Duty is a mission-driven non-profit started by John Mills in 2020. I worked closely with John and a volunteer PM to design the rest of the app from IA down to branding.

The app's main feature is a map that provides an overview of wildfire incidents throughout the state. Users can select a specific incident near their location to access important information such as evacuation orders and up-to-date posts from Watch Duty Reporters.

Additionally, users can manage push notifications for incidents that affect them the most. To enable these functions, I developed workflows for Reporters to create and maintain incidents, as well as post updates and geo-tagged photos.

I jumped into the front end React code to ship features and increase overall usability, accessibility, and polish.

Micro case study: wildfire containment icons

This project was a great opportunity to collaborate closely with Watch Duty’s product owners, builders and integrate expertise and feedback domain experts and people who rely on the app to stay safe.

Start with the icon

When I started working with Watch Duty in 2021, one of my first tasks was to design a branded mark we could also use to mark incidents in the app. On the map view, the size of the icon represents the size of the fire.

I started exploring how to use this icon to convey more information about the current status of the wildfire…

Figure 0.png

In-house experts

Agencies responsible for fighting wildfires, like CalFire, publish data about an incident’s size and containment. To understand what these measures mean, I turned to Watch Duty’s expert crew of fire trackers.

Eventually, we decided that containment — a measure of how much of the fire’s perimeter is under control — is a good proxy metric to understand how dangerous an incident is.

Figure 1.png

Iterate, iterate, iterate

I worked through several iterations of icons with Watch Duty’s founder and our volunteer PM. We explored several ways to present containment at a glance using the incident icon, such as adding a thick border.

Simplicity and clarity were our guiding principles. Many of the people who rely on Watch Duty are elderly or disabled, and almost no one is a wildfire expert.

Figure 2.png

Final result

We settled on progressively filling the nested shapes within the fire glyph with color. The more contained the fire, the grayer the icon is overall.

We also expanded the family to include icons for prescribed burns and “silent” incidents.

Links

Figma prototype

Production app: Web, iOS, and Android

Figure 3.png

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/32b6ce05-c1f6-4cf3-9f49-44e797d2d6de/MQ_icon.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/32b6ce05-c1f6-4cf3-9f49-44e797d2d6de/MQ_icon.png" width="40px" /> Up next: Find out how I worked within a large, complex organization to redesign the companion app to Meta Quest VR headsets with a focus on core people problems Meta Quest mobile app

</aside>

<aside> <img src="/icons/fire-extinguisher_purple.svg" alt="/icons/fire-extinguisher_purple.svg" width="40px" /> Got a burning need for design help? Send me an email!

</aside>