Pack & Evac BC – App Overview
Pack & Evac BC is a wildfire evacuation preparation and planning tool, made to empower local residents facing the threat of active wildfire. From assessing risk to providing direction, Pack & Evac BC was designed to be ready with situationally relevant guidance and support, during any and every stage of a wildfire.
Project Type
Case Study
Timeline
8 weeks
Tools
- Figma
- Invision
- Canva
- Google Slides
My Roles
- UX Researcher
- Design Strategy
- UX/UI Designer
- UX Copywriter
“There’s a lot more fire in the future and we better get used to it.”
– Forest Fire Researcher Mike Flannigan
Problem Space
In Canada, there has been an increase in the frequency and severity of active wildfires. As a result, there has been dramatic stress on emergency services and resources and the local communities in the affected areas.
Each year, more and more people must evacuate their homes to escape an active wildfire. Finding ways to improve the efficiency and safety of wildfire evacuation benefits everyone.
Approaching the problem…
I grew up on Vancouver Island. While they do experience wildfires, none have come near my home. Because I have no experience dealing with this issue, I knew that I would need an open mind, free of bias. In order to focus my approach, I wrote a hypothesis and research objective statement, and I mapped out my assumptions.
Hypothesis Statement
I believe that there is a need for the design of a centralized evacuation and preparation tool, to support and guide the locals of an area under threat from an active wildfire. I believe that this tool will reduce stress and panic, increase community coordination and conserve emergency resources.
Research Objective Statement
Through primary and secondary research, I hope to gain more understanding of the challenges faced by locals during a wildfire evacuation. My goal is to learn more about the experience they had and how they prepared themselves to evacuate. With this knowledge, I am hoping to design a tool to streamline the individual evacuation process.
Assumptions
I believe that locals of an area under threat from a wildfire…
Secondary Research Findings
Fort McMurray, Alberta – 2016 Wildfire
In 2016, Fort McMurray was devastated by a wildfire. This fire forced more than 80,000 residents to evacuate the city and burned approximately 2,400 homes and buildings. About an hour after the evacuation was announced, the fire reached the city and blocked one of the two main routes out of the city. There were no fire-related deaths, but two people lost their lives in a car accident during the evacuation.
One study conducted three months after the Fort McMurray wildfires found:
- 29.1% of the participants had a probable PTSD diagnosis
- 25.5% experienced depression
- 43.6% experienced insomnia
The Fort McMurray wildfires were considered Canada’s most expensive natural disaster at the time, with a $3.58 billion cost.
Primary Research
After gathering secondary research data, I wanted to better understand the individual wildfire evacuation experience. Reaching out to my social network, I found three volunteers willing to be interviewed by phone.
Interview Participant Criteria
- Between the ages of 18-65
- Has lived in the evacuated area for at least 1 year
- Active on a minimum of one social media platform
- Uses a mobile phone
- Evacuated from a wildfire within the last 3 years
- Willing to discuss and share their experience
Participant 1
- 43-Year-Old Female
- Evacuated Cranbrook, BC.
- Evacuated by truck
- Lives with partner, son and 3 dogs
- Stayed at hotels and with friends
Participant 2
- 35-Year-Old Female
- Evacuated Santa Rosa, Cali. USA
- Evacuated by car
- Lived alone at the time of evacuation
- Stayed with friends in nearby county
Participant 3
- 33-Year-Old Female
- Evacuated Sunriver and Terrace, BC.
- Evacuated by van
- Lives with husband, 2 kids and dog
- Stayed in hotels and with family
Interview Insights and Key Findings
Upon analyzing the interview data, I was able to distinguish 4 main themes:
Packing & Preparing
“I started to panic and then I had no idea what to bring.”
Lack of Leadership
“Nobody knows what you’re supposed to be doing. There are no instructions.”
Evacuation Hazards
“If anything had fallen on the road, we would have been trapped.”
Fear-induced Brain Fog
“I started to panic and then I had no idea what to bring.”
Key Theme Identified – Packing & Preparing
After their immediate survival, the main management of material possessions became the main concern. Knowing what would be most essential for survival and gathering irreplaceable items was a major stressor for all three participants. Out of the three participants, two had evacuation kits prepared in advance and only one thought to close interior doors and windows.
After looking at the research, I could define the design challenge with a how might we question…
How might we..?
How might we help to prepare and notify local residents of the best time and way to evacuate from a wildfire, in order to protect the affected community and the people within it?
Pack & Evac BC Persona
Who is the type of person who would use this app? To answer this question, I created a user persona.
User Experience Map
What is the target user’s current experience like? How does it make the user feel? Could it be better and if so, how? In order to recognize opportunities for improvement, I created a user experience map.
User Stories
After creating my user persona and mapping their experience, I took key findings from my primary research and wrote user stories. I used this design tool to help keep the app’s features reflective of my user’s needs.
| As a local facing a wildfire, I want to… | so that… |
|---|---|
| know what I can prepare ahead of time | I have a plan if I have to evacuate. |
| feel like I’m prepared to evacuate | I can reduce stress and anxiety. |
| know the most important items to pack | I can leave quickly if I have to. |
| know what to do if a wildfire is approaching | I don’t panic and traumatize myself. |
| feel like I’m packed and prepared | I can focus on the approaching tasks. |
| know as much as I can about the fire | I know the best evacuation route to take. |
| easily access updates and news | I can stop imagining worst-case scenarios. |
| be aware of the fire’s size and location | I can adjust my evacuation plans. |
| know what I should be packing | I don’t overlook something and regret it. |
| share my plans with friends and family | we don’t worry about each other’s safety. |
Main Epic Identified – Planning Ahead
In total, I wrote 24 user stories and separated them into 5 main epics. From there, I used the main epic ‘planning ahead’ to create a user task flow.
1. Feeling
2. Knowing
3. Evacuating
4. Planning Ahead
5. Connecting with others
Task Flow
Epic: Planning ahead
Task: Create an evacuation packing list for the first time
Persona: Local resident living in the path of an oncoming wildfire.
User Story: As a local facing a wildfire, I want to know what I can prepare ahead of time so that I have a plan if I have to evacuate.
UI Inspiration Board
Considering the task that my user wants to accomplish, I researched existing mobile app components, looking for UI functionality inspiration that would help support the overall goal.
Sketches
Once I had my inspiration, I used my task flow to begin sketching different exploratory ideations. After sketching multiple concepts, I chose these designs to refine for my app.
Wireframes & Grayscale Prototypes
Once I was satisfied with my sketches, I used Figma to create low fidelity, digital wireframes, and an interactive prototype.
From there, I conducted user testing with 5 volunteers and made iterations based on the feedback. To ensure the functionality of the new iterations, I conducted a second round of user testing with 5 new volunteers. I took this information and made my final design iterations.
Initial Prototype
Revised Prototype
Final Low-Fidelity Grayscale Prototype
User Testing Sessions
In order to explain my design changes, I would like to present the user testing data from each session, followed by the design prioritization matrix.
User Testing – 1st Round Results
For the most part, the test participants could complete the tasks; however, many clicked around before finding the right places. There was a general theme and reason behind every error: the test subjects rarely read written text; this extended from titles to buttons, subtext, and fine print.
1st Round Design Prioritization Matrix
User Testing – 2nd Round Results
The final round of user testing validated the design iterations as each participant completed every task. However, despite the fact that the design was functional, the feedback was that it wasn’t as intuitive as it could be.
2nd Round Design Prioritization Matrix
Brand Identity
To begin the process of developing my brand, I created a list of adjectives that represented the feelings that I wanted to evoke within my users.
I expanded the list to include metaphors and phrases and keywords that represented the spirit of my brand.
In addition, I made a ‘more A, than B’ list to help narrow down the brand personality.
Mood Board
From there, I compiled the images and keywords into a Mood board.
Exploring Names
I explored various names and decided to name the app ‘Pack & Evac BC’. I chose this name because it is scannable and essentially explains the app’s purpose; as an app that is meant to guide a user through a wildfire evacuation, letting a user know its purpose by name is good branding.
Wordmark Inspiration
I collected inspiration for my wordmark, sketched some ideas, and made various iterations. I wanted to find a way to eliminate characters within the spelling, without affecting name recognition.
Pack & Evac BC Wordmark
To create my wordmark, I began by vector point copying a map of BC to create a silhouette image. From there, I played with the vector points on the font ‘Goti’; expanding and changing the serif of each letter. Then, I put it the BC silhouette map in the center of the name. This does two things:
- Replaces 3 characters, effectively shortening the name and making it easier to recognize at a glance.
- Adds brand vibes
Brand Colours
When it came to exploring brand colours, I began with my mood board. Then, I looked at commonalities within all the provincial services websites; noting the colours, fonts, and styles that brought a sense of familiarity. I felt that it was extremely important to take provincial branding into consideration as a lot of my apps function works in conjunction with provincial services. Plus, in an emergency, a user will rely on standardization, as well as recognition rather than recall.
Typography
Typefaces Used: The primary typeface used in this product is Open Sans.
Accessibility
This app is designed to help support people during a life-or-death situation; that is not a time when they will be able to focus on using an app with precision. To improve accessibility, I included ‘speech to text’ functionality wherever possible.
This feature was intended to be useful for everyone, not just for those with dexterity and mobility challenges. After all, who couldn’t use an extra hand during an emergency?
When choosing brand colours, I tested different colour combinations for WCAG Accessibility Standards. I used the WebAIM tool to double-check contrasts, keeping accessibility in mind.
High Fidelity Prototype
I transformed the final iterations of my grayscale prototype into a high-fidelity design through colour and imagery injection. I made a few minor adjustments to the design aesthetic to improve the overall user experience.
Marketing Website
Anyone who would use Pack & Evac BC would not do so because they want to, they would sign up because they have to. For many people around the world, the threat caused by wildfires is a terrifying fact of life.
The marketing of this app has nothing to do with sales, products, or idea promotion; it’s about letting users know that there is a new tool in the toolbox.
Key Learnings
- User testing and peer critique can show you ways to improve the design you already have, give new ideas, and spark a higher level of inspiration.
- Figma has some awesome plugins that can help take a design to a whole new level.
- Mood boards are an extremely useful tool for moments when you hit a design block.
Next Steps
- Adding more task flows, specifically ones that showcase the functionality of the app during an emergency.
- Expand the design to include other places. I would start within Canada and then expand to other countries.