Wildfire News

A geo-spatial approach to wildfire awareness

Product

Native Mobile App (IOS, Android)

Responsive Desktop and Ipad

Client

BC Wildfire Service, Wildfire Communications Team

Role

Researcher, Designer

Time

April 2021 - October 2023

Location

BC, Canada

Framework

Agile

Other Designers

Zack Santella

After working on a number of internal BC Wildfire products, I was asked to work on a re-design of the public facing wildfire mobile app and desktop product.

It has been an amazing experience to have the opportunity to gain a deeper understanding of the incredible work that this agency does to keep the residents of BC safe from the increasing number of wildfires each year.

provincial wildfires

record-breaking averages

As of October 31, 2023 the wildfires in BC have been the most devastating on record, scorching 2.84 million hectares. This surpasses the average annual burned area of the past decade by more than tenfold. This indicates the growing need for wildfire suppression and management within BC and indicates the seriousness of the problem BC Wildfire is trying to address while effectively communicating these threats to the public in order to keep them safe and well-informed.

market research

the claim

The global forest wildfire detection system market has been growing steadily in the last 10 years. The market is estimated to be around $753 million USD or $1 billion CAD worldwide in 2023.

In the past decade, Canadian wildland fire management agencies have allocated between $800 million and $1.4 billion annually to safeguard Canadians, private homes, businesses, wood resources, and essential infrastructure. On average, costs have increased by about $150 million per decade since 1970.

the problem

Due to the large number of fires, the rapid pace at which the fire situation changes and the complexity of fire suppression techniques, it is difficult to deliver detailed wildfire information in a timely and easy to understand manner to the general public.

competitive analysis

Popular wildfire apps were analyzed for competitive analysis with attention to the geo-spatial mapping features and wildfire information delivery.

strengths

All apps provide advanced satellite imagery for detailed fire monitoring, easy to find map legend information and clear iconography to symbolize wildfires and fire perimters. Firespot and Wildfire Info provide air quality information and Wildfire info has a high contrast feature to improve accessibility. Wildfire info also provides thermal maps and a wildfire twitter map that links to the twitter feed of various national parks and recreation areas with the US.

weaknesses

All apps have limited customization options for users and do not allow the user save a commonly used location. All apps have limited information on wildfire information such as associated evacuations, fire surpression activities, and images of the wildfire. Wildfire info provides many layer types and map data sources, but the language used is often overly technical and the value of these layers and features isn't always clear. 

Cal Fire's Wildfire Info

Wildfire Map

Firespot

Cal Fire's Wildfire Info

Wildfire Details

Firesource

Cal Fire's Wildfire Info

Wildfire Layers/Events

Australian Fires

user research

Qualitative research was conducted with the general public who live in communities that have faced wildfire threats.

What information was most valuable to you when you experienced a wildfire threat in your community?

Participants provided multiple responses with almost all partipants citing that they desired better response information, fire size, fire perimeter and evacuation process details.

Age

20 - 70 Years Old

Format

Video Conference

Background

General Public

Location

BC, Canada

Number of Participants

15

other research questions

What experiences have you had where you needed wildfire information?

Where do you go to learn more about the wildfire threat?

Describe your experience when a wildfire threatened your community.

Please describe your experiences going through an evacuation.

What type of concerns do you have about wildfires in your area?

Did you struggle to find certain information?

major pain points

stakeholder reviews

Multiple design reviews took place with the business team and related government stakeholders in order to gather feedback.

Reviews with stakeholders revealed a desire to retain some of the more advanced features on the wildfire map. There was also a desire to save a set of commonly used layers so that the user does not have to turn on the same set of layers each time they open the product.

personas

Based on user research, we created 5 personas in order to communicate user needs and direct design decisions.

flow diagram

To outline the primary functionality, a simple site map and flow diagrams of the primary features were created.

site map

finding wildfire information

wireframes

Once the flow diagram was established, low-fidelity wireframes were created of the primary flows.

finding wildfire information

report a fire

visual design

Once the initial flow was complete, the fonts and colors  were defined for use during high-fidelity design work.

color pallette

Row 1: Primary colors

Row 2: Background colors

Row 3: Font colors

font styling

Noto Sans

Regular, Medium, Semibold

AaBbCcDdEeFfGgHh

Government branding and a modern look and feel

BC Government branding guidelines were applied to the designs. A more modern look and feel was achieved by using a font that had various font weights, slightly saturated colors and by associating symbols to each wildfire-related event. When needed custom graphics were created to capture more complex topics, such as incident management teams.

high-fidelity designs

Once the initial flow was complete, high fidelity designs were created to address the primary pain points and were used to create a functioning prototype.

notification flow improvements

During initial phases of research where app feedback was being analysed, there were a number of reports where users would receive a notification and when they selected it, they would be directed to the app, but a wildfire wasn't highlighted.

After discussion with the technical team, it was found that this issue was happening for one of two reasons.

The wildfire was either out by the time user selected the notification (many small wildfires are put out very quickly by BC Wildfire Service on a daily basis) or the wildfire was input as a duplicate. Pop ups were created to address this issue to provide an explanation to the user that will display when the user selects a notification for a widlfire that is not currently active or displaying on the map.

user-friendly map layers

App feedback and user research revealed that users did not understand where to find the map legend or how to turn on other map layers to see evacuations, fire bans and other fire-related events.

Before the re-design, the map legend and map layers were combined displaying on one screen. This was challenging for users because the layers list format is not neccessarily a user-friendly way of understanding map symbology.

To address this problem we separated the map legend and map layers list. Most commonly used map layers are listed out horizontally on the map view at the top of the screen. The rest of the map layers can be found on the map settings page, which can be accessed by selecting the all layers buttons.

Two buttons were added to the screen that directed the user to the map settings page. One button is always in view beneath the featured layers. The other button is at the end of the horizontal scroll of featured layers. Although this is a commonly used icon on geo spatial products, not all users understood it's meaning. Adding the button to the end of the horizontal list of featured layers allowed for text to be added to the button to indicate it's purpose. This also created an association to the other map layers making it easier for user to additional map events.

Based on user research, the featured layers meet the needs of most general public users displaying all of the major wildfire and wildfire-related events general public users reported being interested in seeing aside from weather data.

map comprehension improvements

App feedback and user research also revealed that users had a hard time understanding map symbology. To address this issues, the map legend was separated from the layers and given it's own view. In addition, we made the map legend  dynamic based on the types of events currently displaying on the map. This way the user is only viewing symbology and definitions related to the actual events they are currently viewing.

When talking to users during the initial research phase it was clear that users wanted to simply select an event and be able to immediately understand it's context and relevance. If the event descriptions were only available within the map legend users would have to constantly select the map legend button to understand each event they selected.

To address this problem, descriptions were added to all map previews which display whenever a user selects a single item on the map. If the user selects an area where there are multiple events, the results list displays. Map symbology was added to the results list to further improve map comprehension.

In addition, the default basemap was updated to a more user-friendly street view so that users could more easily find their desired location.

dashboard

Dashboard designs were created to provide useful and timely information to users who want to know what is happening in the province at a high level. There are two views for the dashboard. The "current situation" view displays wildfire information based on the current totals at that point in time. The "totals this year" view displays a summary of wildfire information based on wildfire activity that has occurred over that fire season year. 

map view

The map layers or events that were reported as being the most important to users are displayed horizontally at the top of the screen. When the user selects an event on the map, a preview displays to display contextual information and provide access to the event's full details pages.

The map legend is dynamic based on the map layers that are currently turned on. The search button allows the user to find a specific location, wildfire or alert and selecting the location button zooms the map to the user's current location. 

event details

The full details screens for wildfires and wildfire-related events can be accessed from multiple screens within the product including the map, the list and the saved locations view and the dashboard.

The wildfire details screens provide specific wildfire information such as wildfire status, related evacuations and alerts, fire response details, suspected cause as well as images and videos related to a wildfire.

Other full details screens such as fire bans, evacuations and area restrictions display contextual information and provide access to information bulletins where they can find more specific details about the event.

All full details screens have map views of the selected event to provide users with spatial awareness.

content design

Since users wanted more information on what to expect during an evacuation, this information was added to the evaucation details screens.

It was also important to communicate that evacuations are managed by local authorities. This information was added to the evacuation details screens with a link to civic info so that users could find local authority contact information. Not all local authorities have a website so this was the best way to direct users to a place where they could find the relevant contact information.

Content design was carefully considered on each full details screen to ensure the contextual information was easy to understand and addressed feedback surfaced during research. These views did not exist within the product before the re-design work began.

report a fire

Report a fire screens were created through close collaboration and discussion with the team who manages wildfire reporting throughout the province. Time was taken to discuss their process and challenges experienced when collecting data on wildfires reported by the public.

Two new features were added to the flow. The compass screen (What is the direction of the fire?) allows the user to convey the direction of the fire using the gps feature on their mobile device.

On the add photos screen, the user now has the ability to add photos from the their photo library so that they don't have to be within the vicinity of the wildfire to upload a photo.

Work was also done to improve the offline reporting experience as since there are places within the province where there is poor data connection.

saved

locations and wildfires

The saved locations feature was enhanced so that multiple locations could be saved in the app. The saved location screen shows if there are any active alerts, conditions or wildfires in the area. The user's saved locations are also added to the map view using an icon so that the user can more easily orient themselves when viewing a map of the full province.

Wildfires can be saved so that users can keep track of wildfires of interest with a single click, which is beneficial for those who do not necessarily want to add a saved location, but want to keep track of the status of a wildfire.

Users can receive notifications about wildfires, evacuations, fire bans and area restrictions detected near their saved locations. The notifications feature was enhanced to show an "updates" page where all notifications are displayed so that the user can revisit any notifications they may have dismissed on their device.

listed events

The list view displays wildfires, evacuations, fire bans and area restrictions. Users can find events by searching for an event name, using the filter options or selecting the 'find my location' button to pinpoint events nearby. Users can also select an event and be directed to the full details screen.

The list provides an accessible way to find wildfires and wildfire-related events for those with vision impairments or those who have experience colorblindness since the map conveys many types of events using various colors and symbols.

prototype

High fidelity designs were used to create a clickable prototype that allowed for testing with users.

Dashboard and Navigation

Map Events

Report a Fire

Saved Events

Wildfire List

Map Legend and Layers

design validation

The prototype was used to test the primary funcationality of the product with 15 participants.

research strategy

Testing sessions occured over Microsoft Teams. Sessions were recorded while the participant narrated their thoughts as they completed each task. Both the live updated desktop interface and the mobile mockups were used to illicit feedback from users.

Questions focused on asking the user to complete primary tasks such as finding a wildfire of interest on the map, finding events on the map, accessing the full details pages, creating a saved location, adding a wildfire to the user's saved events list and turning on notifications.

Before

After

initial round of testing

During the first phase of testing, 67% of users had trouble understanding where fire bans were located on the map because the color shading used to indicate the geographic area was too faint for most users to see. We did not have control over how this event was being portrayed on the map since this was controlled by the layer's data custodian. With our development team and product owner, a workaround solution was created so that we could control the styling of fire bans on the map.

There were updates to language as a result of testing such as the stage of control definitions on the wildfire full details pages. Some users did not understand that the definitions applied to that specific wildfire because of the way the definitions were worded so updates were made to address this problem.

Each user was asked to complete 8 tasks and their scores were averaged to find a task success rate of 63% with users completing 5 out of 8 tasks successfully on average. 

second round of testing

Users were able to complete all tasks successfully during the second round testing with a task success rate of 100%.

Other issues did come up during discussion, specifically on the dashboard widgets. On the historical comparison and fire centre statistics widgets, the area burned is displayed and measured using hectares. Many users did not fully understand the size of a hectare and so a definition was added to the historical comparison widget to address this issue.

Originally the wildfires statistics were shown by default on the historical comparison widget and the fire centre statistics widget. Users prefered to see the statistics for the area burned for these widgets because the data was more meaningful.  For instance, there could be a similar number of wildfires in 2021 and 2022, but the area burned is drastically different. As a result, we changed the default for both of these widgets to show hectares burned statistics on initial load. The user can still select the wildfires button on each widget to see wildfire statistics.

other usability issues

Although users were able to manipulate the featured map layers (evacuations, fire bans, area restrictions etc), many had trouble understanding that when they selected a layer and nothing happened on the map that the lack of visual feedback meant that there were no current evacuations or fire bans. Although this did not prevent users from accomplishing the task requested of them during testing, it did present as a usability issue. Design work to address this issue was documented as a future enhancement to be considered.

positive feedback

There was positive feedback on a number of improvements to the product, mainly the ability to save a location so that users did not have to input their location each time they visited the app. Users were happy that they were able to choose their location on a map when adding a saved location because some people lived in more rural areas of the province that did not always have a known address. 

accessibility

The app has been evaluated for contrast accessibility based on the AA Web Content Accessibility Guidelines (minimum contrast standards). On some screens, I found that contrast could be improved.

One specific example is the selected state of the feature layers button on the map view. Initially the icon color was the same as the text color, but the color contrast proved to not be fully accessible. In the final version the text color was modified.

desktop alignment

Desktop views were created for the dashboard, map view, list view and full details screens to ensure consistency with the mobile product.

In order to align with the mobile view, desktop enhancements were made to the dashboard and map view. It was important to address nconsistencies on the map view that became important to align with on desktop, such as the way fire bans were displaying on mobile. It was important that both interfaces displayed fire bans events in the same way on the map.

There were also important updates to the basemap to address user concerns about being able to find familiar roads and landmarks to situate themselves.

 In addition, there was a number of users who said that the map was too small on the desktop view - a change that was made during the first round of desktop updates in 2022. To address this, the map was expanded and the search bar and map filters/layers were positioned on top of the map. Work is ongoing to bring the rest of the desktop and mobile product into alignment.

responsive map

responsive dashboard

content management system

Before work on the mobile app began, I designed a content management system that allows internal employees to manage wildfire information displaying on the public-facing mobile and desktop products.

All content displaying on the wildfire details pages comes from the adminstrative product. This system allows internal employees to input wildfire details such as fire size, related alerts and response information so that the public can stay informed. Users can also add media, such as images and videos that are associated with a wildfire providing updates on wildfire status and location.

The administrative product is connected to other internal wildfire products so that manual entry isn't required for all of the data, fast-tracking information delivery to the public.

The visuals for this product are not included in this case study due to confidentiality reasons.

launched product

BC Wildfire App and Website

Download the BC Wildfire App on your mobile device or visit the BC Wildfire Situation website to see the desktop product. Designs from this case study were launched in March 2024.

app reviews

original product

Product interface in 2022

re-designed product

Changes as of March 2024

learning opportunities

handoff

Throughout the course of this project, steps for handoff were improved through discussion with the technical team. Some improvements were made to the way artboards and files were organized within the design software and the way technical acceptance criteria was managed in order to better facilitate handoff.

participant recruitment

I also learned some of the challenges of participant recruitment during the research and testing phase of this project. In the future, I would likely spend some extra time on recruiting participants or using a service to help with that process.

collaboration

By working with another designer on this project, I had the opportunity to collborate on ideas and concepts which led to further improvements of my design skills and ability to discuss design rationale.

next steps

preparedness

Future work will focus on adding more preparedness information to the current product. This may include updates to the dashboard and map view so that there is more of a focus on preparedness information during the off-season. Research highlighted that many users were interested to learn what BC Wildfire Service does to prevent wildfires and so there is an opportunity to highlight the work that this organization is doing all year around to keep the province safe.

enhancements

A number of design improvements were documented and passed on to the client in order to be revisted in the future. Some of these improvements include the way events display on the map and further alignment between desktop and mobile.

Ways to Connect

Feel free to reach out to me if you'd like to learn more about my experience and design work or if you would like to collaborate on something in the future.

© Jacqueline Williams 2024 • UX Designer