Wildfire Communication

 A responsive wildfire product that provides important wildfire information to the general public. Users can view the details alnd location of wildfires, evacuations, fire bans and other wildfire-related events.

Wildfire-Banner-Mockups-Updated

project details

CLIENT

Confidential

RESPONSIBILITIES

All deliverables and documentation related to user experience design - user research, analysis, concept development, testing, creation of high-fidelity designs and design handoff with technical acceptance criteria.

PROJECT MANAGEMENT

Sharon Wu

DESIGN

Zack Santella and Jacqueline Williams

DEVELOPMENT

Dylan Hemsworth, Sean Sylver, Lucas Li and others.

QUALITY ASSURANCE

Paul Pilon

DELIVERABLES

Research Analysis Artifacts, High-Fidelity Mockups, Technical Acceptance Criteria Documentation

TOOLS

Balsamiq, Axure, Figma, Loom, Jira

DURATION

24 Months

TIME PERIOD

April 2021 - October 2023

PROJECT FRAMEWORK

Agile

DEVICES

Desktop and Mobile

goals and timeline

PROJECT GOALS

The Wildfire Information project's goal was to deliver accurate and timely wildfire-related information to the general public throughout the entire year.

The focus was on understanding the user at a deeper level in order re-design the existing spatial awareness product with wildfire information that had never been available to the public before in this format. Another goal was to increase trust between this wildfire organization and the general public so that relevant information was more easily discoverable. After discussing the vision with the client, a design question was created to lead the rest of the design thinking process.

PROJECT TIMELINE

This project spanned two years. During the first year, the desktop view was re-designed and during the second year the mobile view underwent a similar re-design. During the second year, updates were made to the desktop view to ensure a consistent experience, but some items were tabled until the following year as we prioritized the most high-value items.

DESIGN QUESTION

How might we improve the product's content and design so that the general public can find relevant wildfire information more easily and significantly decrease the number of calls to the wildfire technical support team.

user research

PARTICIPANTS

Research was conducted with a diverse group of general public users to better understand their experience when facing a wildfire crisis and evacuation. BC Wildfire Service handled participant recruitment. Participants were included and their ages ranged from young adults to those who were of retirement age. All interviews took place online.

There were participants didn't have any knowledge of wildfire management practices and others who did have some understanding. For instance one participant worked with Fire Smart BC, an organization that helps people in high-risk communities understand the risks of wildfire and prepare their home in case of an emergency.

RESEARCH STRATEGY

The first part of the interviews focused on discovery questions. Conversation revolved around their experience of facing a wildfire crisis or evacuation, the tools used to gather trusted information, the types of information most valuable to them throughout their journey and at what point in time those pieces of information were most useful.

The second part of the interviews focused on the analysis of the user interface for usability issues related to layout, flow and language. Particiapnts completed tasks using the prototype while narrating their thoughts and reasons for their actions. My role was to observe and prompt the user when needed to fully understand their reasoning and perception of elements on the screen.

feedback

ANALYTICS AND WRITTEN FEEDBACK

App reviews and feedback were collected, analysed and organized into categories. The elements that were most often reported by users to be problematic to the user experience were focused on during the ideation and design phase of the process.

Although analytics were limited, data was used to determine major drop off points and provided important direction as to where to focus design improvements and time. Based on the analytics it was clear that users were not sure how to learn more about events displaying on the map view and that there was a need for more familiar patterns and language.

During testing, the users were sucessfully able to navigate to the full details screens and better understand the contexutal information being displayed within the the re-designed bottom sheet on both mobile and desktop views.

STAKEHOLDER REVIEWS

A number of meetings took place with the client and other member of the BC Wildfire Communcation Team to collect data on the types of tLots of discussion occurred with the client and others on the comms team who deal with the general public directly during  was collected from the client and people on the comms team since they

Stakeholder reviews were conducted with people who worked within BC Wildfire Service and others were worked within the Forestry Industry. During the

research analysis

EXPERIENCE MAP

Research was organized into themes and an experience map to consolidate the information and communicate user needs to the client. The experience map helped organize the data and indicated which part of the experience should be the highest priority and what types of information are most relevant to the user at that point in time.

THEMES

Research was also organized into themes to help identify the pain points that were the most challenging among users. Energy was then focused on those high priority items as we went into the ideation phase.

WF-News-Experience-Map-2022

market research

Various desktop and mobile applications were analyzed in order to gain a better understanding of commonly used patterns and features available in curent spatial awareness products. Other products communicating emergency information and spatial awareness information within Canada were also considered for inspiration and consistency purposes.

Analysis of other wildfire products helped direct design decisions on various elements. This included the use of common iconography for different actions, such as snapping to the user's location and the ability to display additional map layers.

The way in which other products indicated the presence wildfire-related elements on their map was also considered so that we could increase the possibility of user's being able to understand symbols on the map without having to refer to the map legend, when possible. We also considered the way in which other popular map products responded to different actions so that the Wildfire News product could be as intuitive as possible to the users.

IMG_1858-1
IMG_1856
IMG_1731-1
IMG_1835

mobile design review

the dashboard

CURRENT SITUATION

There are two tabs on the dashboard. The first tab displays information and totals that reflect the current situation or current number of fire-related events at the time.

 The dashboard was designed to be useful for those looking for a high level provincial overview, but also for those who live in areas that are at high risk of a wildfire threat.

More high level information is located at the top of the screen while the more specific and detailed topics display farther down. The sections and topics included on the dashboard were chosen because they were reported as being the most useful and valuable across different user groups during the research phase of this project.

TOTALS THIS YEAR

The second tab displays a summary of relevant information and totals that reflect activity for the current year. For example, on that this tab the  wildfire count displays a total number of all wildfires that have occurred so far this year.

There were a number of technical constraints related to how the data could be displayed that were considered and contemplated as these designs were being created. Through close collaboration and disucssion with the technical team, we were able to align on a concept for the dashboard.

the map

EVENTS ON THE MAP

In response to research findings, the wildfire map was re-designed in order to increase usability since a major drop off point was identified within this flow. We employed more common interface patterns, tested the language and iconography with target user groups and when needed, created custom iconography to ensure clear communication and accessibility.

When a user selects a layer, certain events are being visually 'layered' on top of the geographic map background (or basemap). This is what is meant by the term 'layers'. In this flow, the user is selecting feature layers which displays different types of events on the map (wildfires, evacuations, area restrictions, fire bans etc.).

ADVANCED LAYERS

One of our biggest challenges was to create a design and flow that was  intuitive for first-time users unfamiliar with this or other map-based products while also offering features that would be desireable to a more advanced user base. Adanced users may work in the forestry industry or a related industry, they may also be users with a deep understanding of wildfire mangement practices and technical weather information. Various iterations of this screen occured in order to find the right solution.

In order to accomodate both groups of users, we created the advanced layers list which lists a number of additional layers that do not display in the featured layers. We added two buttons that would take the user to the advanced layers screen. One button is at the end of the featured layers row because conceptually it is an extension of those items and we wanted to indicate this to the user with it's placement. The other button is below the featured layers and is always on-screen.

the map legend

A DYNAMIC LEGEND

The map legend is a dynamic component that displays when the user selects the 'Map Legend' button. The map legend serves to define any item that is visible on the map. If the user is viewing evacuation information, then definitions for evacuation alerts and orders will display in the map legend with their corresponding symbols or coloring.

THE RATIONALE

In the original design, the map filters and legend were combined and did not contain definitions or descriptions. In the new design, we separated these two functions so that the map filters could be more easily accessed and so that it would be more clear where map legend could be found. This shift received positive feedback from our user-testing group because a significant amount of users did not know where to access these features in the original product.

event details

PREVIEWS AND FULL DETAILS SCREENS

The user is able to select any event on the map to reveal a preview that contained high-level information related to the selected event. A button leading to the full details of the event is included on the preview for almost all events that can be displayed on the map so that the user can learn more about the event. Once on the full details page, the user can scroll to view more information or use the tabs at the top of the page to view other topics of information.

RATIONALE

In the original product, the full details information was contained within what was once the preview and it was difficult to absorb all of the information because of the overly technical language being used. We worked to overhaul the language so that it was appropriate for those who had zero knowledge of wildfire management practices. The preview was re-designed to contain only the most relevant information that was required for a user to understand the event's relevance.

list view

LIST VIEW OF WILDFIRE-RELATED EVENTS

The list view is another way to display wildfire-related events for those who do not wish to use the map to discover events spatially. This view displays wildfires, evacuations, area restrictions and fire bans in a listed format. Events on the list or map view can be filtered by location or specified address. The filters are dynamic and allow the user to search for specific types of fires, evacuations or fire bans.

saved events

PREVIEWS AND FULL DETAILS SCREENS

When the user navigates to the saved events screen, they have the opportunity to add a saved location or to bookmark wildfires that they are interested in tracking. The value of this feature is to allow users a quick way to stay updated on the wildfire-related events occuring near their own location as well as other locations that are important to them (family homes, summer homes, travel destinations). The saved location flow was a net new addition to the existing product that was created to solve for pain points identified during the research phase of this project.

responsive design

SCOPE

Responsive designs were created for the dashboard, the map view and list view. It was outside the scope of this project to create responsive designs for the saved events flow and the full details flow.

DESKTOP LIST

On the desktop list, items are displayed within a table, but when viewing the list view on a mobile screen, each row is turned into a section where the column labels are removed and only the values display. Iconography and tags are added to the mobile view to make scanning the information easier.

DESKTOP MAP

The biggest difference between the desktop and mobile map view is the placement and container of the contextual information. On the desktop map view, the contextual information (map legend, definitions, resource links) is position within a left hand panel that is dynamice based on the type of fire-related events the user has selected.

One exception is that the links displayed beneath the desktop legend do not display on the mobile bottom sheet. Instead these links display on the mobile full details screens.

DESKTOP DASHBOARD

On the desktop view, two sections can display side by side and each section is contained within a card.

On the mobile dashboard, sections stack on top of each other due to the limited screen space and the card background is removed to increase screen real-estate for text content. Thick grey dividers are used in order to separate sections from each other on the mobile view.

It was recommended that the tab design on the mobile view not match the tab design on the desktop view because users were not able to easily recognize the underlined tabs as a way to display a secondary view.

design iteration

SAVED LOCATIONS and EVENTS

Initial Design and Flow

This is an example of how the designs evolved over the project timeline. Initially, the saved events/location page was the first screen that displayed when the user opened the app. The sections of this screen were categorized by wildfires, notices, air quality, weather, and current events.

The initial mockups were a great starting point to encourage discussion and a more detailed analysis of the what it would take from the technical team to make the design a reality. A working prototype was created to put for user testing and feedback was incorporated into the next version of this screen to further improve the design.

SAVED LOCATIONS and EVENTS

Final Design and Flow

As time went on, the business requested a dedicated dashboard that would be suitable for a variety of different users so that people that could find value in the dashboard and landing page even if they didn't have a saved location. Users who still wanted to save locations and events could do so by navigating to the 'saved' node in the navigation bar. Saved locations and events were displayed in a single screen and the user could select a specific location or wildfire to learn more.

Once the user selected a saved location, they would see many of the same pieces of information originally included in the initial mockups with a few updates. The weather section was paired down and simplified and the air quality section was descoped due to technical constraints.

next steps

PREVIEWS AND FULL DETAILS SCREENS

A number of design improvements were documented and passed on to the client in order to be revisted in the future. Many of the topics within the spreadsheet revolve around potential improvements to the way wildfire-related events are displayed on the map. Some improvements to the map view made it into the 2023 year, but many were scoped out due to time constraints and budget. The highest priority items were contemplated and solutioned within the re-design of this product. We also identified that some solutions required changes within the business process of the organization.

FURTHER RESEARCH

In the future, it would be importnat to connect with rural communities and do testing in person with potential users. There is so much more to learn from the various user groups this product is seeking to serve and support. Further research should reach out to talk to first nations groups, recreationalists, backcountry users and people from the media who report on wildfires in order to develop a deeper understanding of the people we are designing for, which will furhter improve the design of this product.

key learnings

SELF AWARENESS

I had the opportunity to work with an incredible designer on this project who valued collaboration and took the time contemplate the more complex problems we were trying to create solutions for. I had been working as a solo designer on a few projects leading up to this and I realized how much I missed collaborating with someone who could challenge me from a UI and UX perspective. I learned that moving forward I wanted to find more projects where I could have the opportunity to collaborate with other designers.

COMMUNICATION AND DEADLINES

Some of the challenges faced during this project included  team communication challenges, the ability to meet deadlines when a design turned out to be more complex, and not having more time for more user research. I learned from this and other projects that most of these issues could be handled with effective communication with my team and that some issues can't always be solved, but should always be acknowledged so that the everyone is aware and realizes that some things are out of our hands.

FINDING BALANCE

It's important to advocate for what's best for the users and that can mean pushing towards better solutions that might take more time, discussion and contemplation. On the other hand, it's important to step back sometimes and realize that there are constraints that can't always be negotiated within the available time frame. Throughout the course of this project, I've learned to strike a better balance between these two mindsets.