Google Fire

Added feature to Google Maps to track wildfires and evacuation statuses

Cover page (4).png

Project Overview

MY ROLES

  • User Research

  • UX/UI Design

  • Prototyping

  • Usability Testing

TOOLKIT

GoogleFire (1).png

TIMELINE

4 weeks, approximately 80 hours

BACKGROUND

Google’s mission is to organize the world's information and make it universally accessible and useful. Google is dedicated to making life easier for people.

As someone born and raised in California, I am no stranger to wildfire season. Understanding the dangers, I want to explore adding a feature to Google Maps to provide information for evacuations and other fire danger related features.

THE PROBLEM

Wildfires are dangerous and users lack a platform to access updated information on evacuations and wildfires near them and their loved ones.

THE SOLUTION

I created a feature that gives users a platform to find information on wildfires near them and loved ones. It needed to be integrated seamlessly into Google Maps, the well-known and popular app to 4 billion users worldwide.

Disclaimer - I do not work for Google Maps, and the views in this case study are strictly my own.

Design Process

RESEARCH

Discovery & Immersion

Biases & Research Goals

I not only outlined the research goals, but my assumptions and biases too. I grew up in California and know the dangers wildfires bring. It was vital to have a reference sheet as I move forward in this project to make sure decisions were stemmed from research, not my experiences.

Market Research

I took a three step approach in conducting market research to maximize usability for Google Maps, those are:

  1. Analyzing the UX of Google Maps today

  2. Comparing Google Maps to its competitors

  3. Learning about current wildfire resources

Google Maps Key Learnings:

  • Used by 4 billion people annually and has a great UI

Wildfire Resources Key Learnings:

  • Maps were not easy to find or understand. User has to look on numerous websites for various information

  • Ability to opt-in for text alerts, and share pages with loved ones is valuable

  • In California, 480,000 people were evacuated in 2020.

Empathy Map

After completing my research, I synthesized the qualitative data gathered from user interviews and curated an empathy map to identify patterns across users, uncover insights, and generate needs. These all pushed me towards creating a product that reflected each of these ideas.  

I discovered that no matter how experienced an individual is dealing with wildfire season, there is a certain type of uneasiness that occurs. People find it difficult to think clearly when trying to find information during stressful situations for themselves or loved ones.

User Persona

With the data gathered from market research, I created two user personas to represent two very different types of individuals that will use Google Fire.

Joe represents a large percentage of the user base. When it comes to wildfire season, Joe cares deeply about others, but is quite complacent when it comes to his own evacuation preparedness. Having experience with wildfires his entire life, he believes he knows what to do in the moment in case of an evacuation.  

On the other hand, Casey has a lot of anxiety when it comes to wildfire season. To help her feel ready, she prepares evacuation bags for her and her loved ones well in advance of wildfire season.

Both Joe and Casey are working to accomplish the same goals: prepare for wildfires, find updated evacuation information, and feel safe.

Journey Map

Now to bring this all together, I analyzed how Casey uses Google Maps today to further develop who she is as a user. I developed a journey map to understand two areas more in depth:

  1. What steps Casey takes to get her daughter to a soccer game and her son to a lacrosse game at the same time

  2. Google Maps existing processes to help maximize future designs

If Casey feels sad, anxious, uneasy, annoyed, hopeful, and happy for a simple journey to get her children to their games on time, how will she feel in a stressful wildfire situation? Understanding the touch points and emotional state of Casey in this flow gives me a solid understanding of who she is and emotions she may elicit in wildfire season.

DEFINE

Strategy Development

Goals, Defined

Identifying the overlap of user and business goals was crucial for directing product development while maintaining stakeholder alignment. These goals will help clarify what is needed in the product to blend seamlessly with Google Maps.

The important takeaway here is, this feature needs to help users feel safer during unpredictable wildfires by preparing users for evacuations and providing helpful information for any location they care about.

Product Roadmap

These product features are sorted into three categories, including Must-have (P1), Nice-to-Have (P2), and Surprising and Delightful (P3) features. The Product Roadmap is supported by user research and not only infuses the project goals, but also ensures we prioritize the most important features in the development cycle.

Although there are two personas for this project with very different approaches to wildfire season, I will be creating designs that address both of their needs (preparing for wildfires, finding updated evacuation information, and feeling safe.)

IDEATE

Interaction Design

Site Map

The Navigation Menu (blue) and Existing Features (grey) are outlined to show how Google Maps looks today. New Features (orange) help outline where the Google Fire functionality would be placed. And lastly, App Considerations (yellow) are other areas of the current Google Maps that will be effected with the wildfire functionality implementation.

To create a truly seamless integration I chose to put the new features in locations that created minimal friction for the user. The evacuation map is placed under “Map Types” because Google chose to hide all maps under that menu bar. For all other app considerations, I challenged myself to think about how Google Fire would effect Google Maps.

User Flow

Thinking back to Casey I created this user flow and drew up the 4 tasks she wants to accomplish. Those being: 

  • Looking for evacuation status

  • Looking for evacuation packing list

  • Customize wildfire alerts for saved addresses

  • Navigating to a nearby shelter

Developing these paths helped me determine how many pages are needed, what order they should appear in, and what components are required for the user to complete the tasks successfully.

DESIGN

UI Design & Prototype

UI Kit

After getting the overall architecture nailed down, I did the same with the interface elements. The wildfire information column was crafted with Google's style and design guidelines. This document serves as a reference sheet for all design decisions throughout the app.

Final UI Designs

Although our persona’s, Casey and Joe, take very different approaches to handling wildfire season, the Google Fire designs solve both of their needs with:

  • Clear evacuation statuses for numerous locations

  • Information about wildfires (air quality, distance, wind direction)

  • Ability to navigate to nearby shelters for user or their loved one

  • Customized alerts for locations the user cares about

  • Emergency checklist based on how quickly the user needs to evacuate

After creating these designs I conducted usability testing with 4 participants. Each participant was able to complete the given tasks and found the interface to be consistent and seamless.

Fire Icon Placement

After finishing the UI Designs, I went back to assure all of design decisions accomplished two main areas:

  • The shared goals of users and the business

  • Blends seamlessly with Google Maps

One decision in particular took a bit of deliberation. I decided to compare the pros and cons of having the fire icon on the homepage. After listing this out, I came to the conclusion that the fire icon is not necessary on the homepage because it conflicts with Google Maps business goal to provide navigation. In the final designs, to access the wildfire information the user will need to select the “map type” icon.

Aligning with future developments listed in the product roadmap, placing the wildfire icon on the homepage will be helpful to remind users to pack an evacuation kit before wildfire season begins.

REFLECTION

Final Thoughts

Conclusion & Reflection

This project was meaningful and made me realize the responsibility we have as designers. We hold the power to influence a lot of people (4 billion in Google Map's case) and create value for users in stressful situations by using a delicate touch. Adding a feature to an existing an app was challenging because it needed to flow seamlessly with the current architecture and design.

I'm particularly proud of this project because of the emotional depth I was able to reach with users. I learned a lot about Google's design patterns and how to leverage user data to create something meaningful.  

Take a look at my other work ⬇

Exhale Case Study

Exhale Case Study

Justified Case Study

Justified Case Study

DesignHub Case Study

DesignHub Case Study

Previous
Previous

DesignHub An online community to help designers grow professionally

Next
Next

Exhale Mobile app focusing on mental health