Case Study: Waze SOS Mode— Real time updates and resources during natural disasters
Written by: Jeseth K Griffith, Mai Moua Vang, Victoria Chang, and Maria Stiller
This design won first place in a one-week UX design challenge sponsored by Adobe XD and hosted by UX Wizards in November 2020.
The design challenge
Prompt: Design a product or service that helps victims of natural disasters, such as fires or hurricanes.
UX/UI designers: Jeseth K Griffith, Mai Moua Vang, Victoria Chang, and Maria Stiller
Timeline: One month: one week for the challenge (initial prototype); three weeks for testing and iterations (finalized prototype)
In the aftermath of severe flooding, we often wonder why so many victims do not evacuate their homes and flee to safety, even after multiple warnings are given. Our research showed us that victims underestimate the situation especially in areas where flood events may be rare. They simply do not feel the sense of urgency and as a result, some lose their lives and much property is lost.
For this project, we decided to design a product that would help users throughout the life cycle of a flood event with the goal of mitigating preventable loss of life.
Early research from official sources taught us that in the event of a mandatory evacuation, staying informed and knowing where to go are not just highly important, they’re also the best types of storm preparation. With that goal in mind, we knew the product we were setting out to design would have to:
- Convey an accurate sense of urgency
- Help users navigate to safety
- Offer real-time updates of flood zone information
Researching comparative services
No existing products on the market currently achieve all these goals but some do handle our design points individually. From those, we pooled the most relevant features that could best serve our potential users. Some of these tools — Twitter, for example — were even cited in our later interviews as frequently used means for users to keep tabs on the progress of a storm.
An add-on feature: meet users where they are
In considering a platform, we decided to design an add-on feature to an existing app for two reasons:
- Individuals in a flood crisis are likely to feel highly stressed, be pressed for time, and may or may not have an internet connection to research and download new digital products.
- A stand-alone emergency specific product might be underused, but an add-on feature allows us to meet users where they are both digitally and emotionally.
Waze + disaster services = Waze SOS Mode
Waze is the #2 most popular navigation app with over 130 million active monthly users globally. It is a place users look to for local community reporting and real-time updates when driving. We could leverage both its wide usage and this established user behavior in our designs.
We named our add-on feature Waze SOS Mode because SOS is an internationally recognized symbol for help used during times of distress. We wanted our add-on feature to help people in distress get to safety.
Conducting user research
To better understand the problem space, we conducted two interviews with victims of unusual natural disaster flooding. We asked questions about their familiarity of evacuation centers, flood readiness, and overall flood experience.
Based on the interviews, we found three key insights. Our interviewees were:
- Skeptical of the severity of the storm despite news reports
- Extremely worried for their family’s safety during the natural disaster
- Miserable, anxious, and tired when they finally found a place to stay
Each of these insights tied back to a pivotal moment that all victims of flooding ultimately face: the decision to stay in their homes or to evacuate.
Should I stay or should I go?
Our interviewees relied on using some combination of mobile technology and live television reports. Generally they did not feel they had a clear enough sense of how their area would be affected. When they decided to leave their home, they were confronted by more stressors that made it harder to find safety.
Meet Nicole, the Wonder-Mom
We synthesized our research into one persona who will be the focus of our design decisions.
Nicole uses Waze SOS Mode to guide her family to safety
Before jumping into possible solutions, we began the design phase by creating a storyboard to visualize Nicole’s journey through a flood event with Waze SOS Mode. This helped us empathize with our user by considering external factors that could influence her experience with our product and possible moods that could affect her overall experience and expectations.
As UX/UI designers, how might we help Nicole?
Now that we were aware of our persona’s needs and past experiences, it was time to combine that with what we learned about the flood preparedness problem space and design solutions for future users. We used three “How Might We” guiding questions as our framework to brainstorm features for Waze SOS Mode.
Early design points of Waze SOS Mode
Based on the information we’ve gathered so far, our team participated in a Crazy 8 session where each of us sketched out 8 different screens of our main design points and narrowed them down to possible screens presented below:
Color-coded flood zones
By color coding flood zones and projecting expected flood severity onto the users GPS, threat levels can be quickly assessed.
Official FEMA warning
We decided to reserve the top portion of each screen for a warning from official sources. In this way, it is distinguished from the local reporting of other Wazers.
Evacuation centers
Knowing locations of closest evacuation centers is listed as a key step in emergency preparedness on official guides from FEMA. Our interviewees were more inclined to go to evacuation centers if they knew about amenities available.
Creating UI for Waze SOS Mode
Designing an add-on feature to an existing app meant we would have to create iconography and copywriting consistent with Waze’s friendly and welcoming branding while still communicating the urgency of the user’s situation.
Nicole’s user experience with Waze SOS Mode
Our user flow illustrates Nicole’s journey through the Waze app. It shows the screens she would interact with while Waze SOS Mode is enabled.
Presenting our initial prototype to UX Wizards
Our original prototype addressed each of the goals we set out to design. Although the kind folks at UX Wizards and Adobe XD rewarded us with the grand prize, we weren’t quite ready to walk away from our project just yet and decided to test our prototype.
Summary of user test results
Using our How Might We design questions as a framework, we created tasks for five volunteer testers to complete. As they interacted with our screens, we tested their experience to see if our UI design elements met our original goals:
- Create an appropriate sense of urgency
- Help users navigate to safety
- Show real-time, local flood zone updates
To supplement the usability test, we chose to use an exit survey to help us capture other useful attitudes and preferences. We then synthesized all findings in an affinity map and chose a rainbow diagram to visibly assess the effectiveness of our design solution.
Many wins from our testers
We met all of our design goals based on the results from our usability test shown in our rainbow diagram:
- All 5 tasks were completed by each tester
- Testers were immediately responsive to the visual color coding of the flood zones in relation to their GPS location
- Testers were excited by the live chat feed of local reports from other Wazers
- Testers liked seeing the amenities at each evacuation center
- Each tester achieved a sense of urgency while going through the tasks
Additional work on UI elements
Although all tasks were completed, our testers still had trouble understanding some of the Waze SOS Mode icons, the UX messaging for the amenities, and flood zone colors.
Creating an icon based on empathy
A consistent pain point was users’ inability to clearly understand the evacuation center icon and what it represented. In addition, testers were often confused by the “% Full” on each evacuation center. Without a clear point of reference, it was difficult to interpret.
Since evacuation centers can be a number of different types of buildings — from local schools to sporting venues — we redesigned our icon by shifting the focus away from a representative building and instead to the experience of an evacuee.
The evacuation center icon now displays safety after distress by using a recognizable shelter item and considering the emotional state of a natural disaster evacuee.
Re-organizing information that matters most to users
The exit survey helped us better understand our testers’ priorities when evaluating an evacuation center. In order, they are:
- Amenities
- Distance from current location
- Evacuation center capacity
As amenities were most important we added the icons for the on-site services on Waze’s standard pop-up window to quickly show users what’s available at the center. We moved the capacity meter from the evacuation center icon to its profile page and reordered a few other UI elements there for visibility. We decided to define the percentage of capacity in terms of number of beds available at the center.
Revamping flood zones for granularity and clarity
We received feedback from the UX Wizards mentors and our testers that helped us improve the Waze SOS Mode home screen. The mentors noted the flood zone colors may not be suitable for users with vision impairment. We also didn’t have a legend to help explain the colors and other icons displayed on the map. A tester commented that the flood zone shading was a bit confusing and stiff.
For the final iteration of the color overlay, we drew inspiration from the UI designs of weather systems, specifically Doppler radar technology. The design uses more nuanced colors to visually help the user understand in greater detail what is happening in their area. We also added an information “i” icon where users can tap to view a legend detailing the UI elements displayed on the screen. These elevated visual components not only incorporate feedback, they add legitimacy to the screens and strengthen how we convey an accurate sense of urgency.
Voila! Our finalized prototype of Waze SOS Mode :)
UX roadmap
To ensure the safety of all users, we would need to build out user flows for varying levels of danger — for instance, when it’s best for users to shelter in place. This would ensure that only the most at-risk households are directed to an evacuation center and unnecessary road travel is prevented.
We also need to expand the experience of the up-to-date flood maps and real-time reporting so users can interact with these tools for their unique needs throughout a flood event. Some users may need to check other family members’ addresses, hotels, or their workplace as they decide on their safety plans.
Long-term potential for Waze SOS Mode
We see our design solution proving useful with far-reaching benefits for multiple stakeholders:
- Victims of severe flooding — more real-time, accurate information about their local area and more confidence in their decision to evacuate or shelter in place.
- Disaster relief centers and nonprofits —gain exposure through Waze platform to better serve community during crises.
- Waze —enhance community engagement by partnering with government agencies and non-profits to assist local driving communities during crises. Waze can leverage these new partnerships to create additional sources of revenue.
- FEMA — aggregate the hyper local data reported by Wazers to update their flood maps. This may be especially important as the effects of climate change introduce weather phenomena inconsistent with historical data.
Thank you to UX Wizards !
Thank you UX Wizards for creating a design challenge with such real world significance and offering your expertise to make our design stronger!
Kudos to all the design teams that participated in this challenge. They came up with seriously creative design solutions!
About the designers :)
We are unapologetic BIPOC research method nerds who often joke about using design thinking to redesign our dating and social lives. We are at varying levels of transitioning into UX and UI design and are always looking for resources for job searches, portfolio building, and finding our professional niches. Thank you for spending your time with us today. Stay fascinated!
