The challenge

Our goal was to redesign the map to be intuitive, actionable, and adaptable, regardless of zoom level or the density of events. Empowering users to make informed decisions under potentially life-threatening circumstances.

1. Overwhelming data: Users reported that too much information cluttered the interface.
2. Lack of real-time prototyping tools: The company was transitioning to a new mapping software, Mapbox. Figma couldn’t replicate Mapbox's real-time behaviors, requiring creative workarounds to ensure design aligned with production. 
3. Technical constraints: Designing around the limitations of mapping software and load times. 

My role

As the sole designer, I led the end-to-end redesign of the map, collaborating closely with our project manager for user insights and our developer to understand technical constraints of Mapbox. This hands-on approach helped us iterate rapidly and test design assumptions in real-world scenarios.

Empathizing with users‍

Homeowners expressed fear of missing critical updates and frustration with the map's clutter. I began studying other mapping solutions to gather inspiration and identify best practices.

Ideating solutions

Using research from competitors and other major mapping software, I brainstormed with the team to address key user needs:

• Clarity at a glance: Simplify iconography and event clustering.
• Scalable design: Adapt information density based on zoom levels.
• Better interaction: Provide intuitive controls for toggling layers and accessing event details.

Prototyping

Since we couldn’t test directly with live Mapbox data in Figma, I built an interactive prototype by stitching together screenshots at various zoom levels. This let us test behaviors like clustering, zooming, and toggling layers.

I also designed a new iconography system, ensuring these icons adapted seamlessly across different states and zoom levels. I established patterns to show how these events should behave at a certain Z-index, adapting for active and inactive states. These icons were built into interactive Figma components that could be easily adapted based on event type or focus state.

Testing with users

We set up some usability tests with users to get early feedback and validate assumptions. One key improvement was setting clear breakpoints and clustering rules to reduce crowded maps.

• At a wide zoom, only major wildfires appeared.
• Multiple events within proximity were grouped into clusters with a count badge.
• Clusters dynamically split as users zoomed in, revealing individual events.

User feedback

The feedback was good but users wanted more detail at a glance when they were beyond a certain zoom level, without having to engage with the icon.

With the decluttered map interface, this was something we could do. At closer zoom levels we decided to reveal the name and size of the fire along with the icon. 

Iterating
‍
After revising the initial prototype to reflect these changes, we re-tested it with users. We saw an improvement on usability and heuristics.
‍
Users loved the ability to see info at a glance without having to tap on individual events. It made navigating the map and fire landscape much faster and more comfortable for users.

‍Event drawer redesign

With the improved design, users still needed a way to access more details about a fire. I designed a new event drawer. Triggered by tapping a fire icon a detailed drawer with information on the fire's progress, size, and timeline would open. Users could also enable notifications for updates specific to that event.

Maximized map real estate

The previous map had a persistent top bar in the map view. Event sheets also remained sticky at the bottom of the screen and couldn't be fully dismissed. Between the topbar and event drawer, map real estate was very limited. Going off initial user feedback to declutter the map interface, I removed the persistent top bar in map view. I also pushed to change the behavior of the drawer so that it could be swiped down and fully dismissed.

Improved controls

To ensure maximized real estate, I designed a floating control panel for easy access to essential features like home location, map layers, and a legend. Tapping the home icon would recenter the map to their home address. The layers icon would open the layers drawer where users could toggle on and off different event types from displaying on their map (Controlled burns, evacuation meetups, air quality, etc). The information icon opened the map legend where users could see the full breakdown of what each icon represents and learn unfamiliar terminology. To create an easy experience between the legend and the layers, we added a segmented control at the top of the drawer so users could easily switch back and forth.

Results

• User feedback: Homeowners reported feeling more confident navigating wildfire updates.
• Increased user satisfaction: after implementation of these new features user ratings increased from 3 to 4 stars in the app store

Takeaways

Listening to user concerns shaped the foundation of this redesign. By testing ideas, refining them, and validating assumptions, we delivered a solution that met users’ needs. This project reinforced the importance of cross-functional teamwork, particularly between design and development, in overcoming technical constraints of Mapbox.

This project underscored the power of user-centric design to solve real-world problems. By focusing on clarity, usability, and scalability, we created a map that homeowners can rely on.