Project Type
Team project to create a iOS app, Waterfall process
Duration
Fall and Winter 2020 - 2021
Tools
Notion
Miro
Figma
Google Forms
Zoom
My Role
Researcher / Interviewer
Information Architect
Designer
Prototyping
Skills
Competitive analysis research
User flows / Customer journeys
Personas / Storyboarding
Wireframing
Prototyping
Designing
User testing/research
Information Architecture
Presentation
Team
1 Project Manager, Researcher, UX/UI Designer
2 User Testers & Interviewers / Researchers, UX/UI Designers
1 Researcher, UX/UI Designer
*I had a multiple role position of a User Tester and Interviewer, Researcher and UX/UI Designer. Wearing multiple hats on this project allowed me to be part of every aspect of this project, which was a great opportunity and experience.
The Trailblazers Team
Jessica (Me)*
Role
User Tester / Interviewer, Researcher, UX/UI Designer
Bio
Creative at heart, Organized, Optimistic and thrives in challenging situations.
Strengths
Research, Interviewing & Testing, Design, Prototyping
Creative at heart, Organized, Optimistic and thrives in challenging situations.
Strengths
Research, Interviewing & Testing, Design, Prototyping
Sherene
Role
Researcher, UX/UI Designer
Bio
Friendly, enjoys a challenge.
Strengths
Research, Interviews, Testing, Design, Prototyping
Friendly, enjoys a challenge.
Strengths
Research, Interviews, Testing, Design, Prototyping
Adam
Role
Project Manager, Researcher, UX/UI Designer
Bio
Dad by day, designer by night. Loves his family and playing video games.
Strengths
Visual Design, Interaction Design, Building Prototypes
Dad by day, designer by night. Loves his family and playing video games.
Strengths
Visual Design, Interaction Design, Building Prototypes
Elizabeth
Role
User Tester / Interviewer, Researcher, UX/UI Designer
Bio
Optimistic and organized. Enjoys meeting new people and learning new things.
Strengths
Research, Analysis, Ideation & Usability Testing
Optimistic and organized. Enjoys meeting new people and learning new things.
Strengths
Research, Analysis, Ideation & Usability Testing
Overview
Especially at the beginning of the COVID-19 pandemic in the U.S., organized disaster relief efforts were slower to deploy as they had to adjust to the new context. Community-led efforts had to fill in as they could on the ground, setting up shelters, organizing volunteers, and coordinating tasks, mainly through text message and excel spreadsheets.
Requirements
Design an application to coordinate community-led efforts to respond to natural disasters.
Scope
Since there are many types of natural disasters, we decided to narrow our scope to wildfire disaster relief in North America.
Features
Social media integration
Interactive map / mapping
Screens for community organizers to view and manage volunteers and track donations
Screens for community organizers to associate volunteers and donations with needs
A way for people to volunteer and donate
The Challenge
How might we create an app that informs and guides users so that the community is safe and services are provided to those in need during a wildfire emergency?
Sneak peek of the solution.
Discovery
Our primary goal is to understand the current user journey of evacuees & community organizers to identify key opportunities and needs.
Research Questions
We identified 3 key phases
Pre-emergency
How did people prepare for wildfires?
Does the community help prepare?
Emergency
What happens during the wildfire?
What supplies do communities need during an emergency?
Post-emergency
What happens after the wildfire?
What supplies do communities need after an emergency?
We used this as a frame to build our research questions. From there this naturally evolved into our interview questions and script →
The Plan
Research
Tasks Preformed
Competitive Analysis
Screener Survey
Interviews
Personas
Customer Journey Maps
Storyboards
User Flows
KPI Metrics
Mission and Vision Statements
Competitive Analysis
FireWatch
Firewatch has three different profile types for evacuees, volunteers and community organizers. The app has alerts for each profile type to inform of wildfires in the area with a map view. Firewatch has an evacuation checklist, a going home list and resources to help. The app has a way to donate items, money or time as a volunteer. The app has a requirement list that possible volunteers need to complete before they can start helping. The organizer and volunteers have an in app messaging tool. There is also a place for evacuees to request items and assistance, which is completed by a qualified volunteer. The app has a variety of features including air quality index, road closure map, and list of safe location sites.
Calfire
Calfire’s focus is on preventing and preparing communities for wildfires. It provides a list of important items to pack in the occurrence of a wildfire. The site also guides communities with steps to follow to help prevent wildfires. The site also provides guidance on what to do following a wildfire. There are three main keys: Plan, Know, and Act that the site utilizes to provide information. Calfire also has an app that provides alerts and additional information. The site utilizes social media and has many additional resources. However, it lacks a map to clearly show where any current wildfires are. The Calfire site does not offer a way to donate or volunteer.
Fire, Weather and Avalanche Center
The Fire, Weather and Avalanche Center site’s main goal is to show communities where wildfires are currently. It uses a map to provide this information. The site does not provide any information about how to prevent, prepare, or evacuate from a wildfire. The site does not provide any guidance on what to do following a wildfire either. The Fire, Weather and Avalanche Center does not provide alerts or resources for information about wildfires. The site has a way to make a donation, but does not have a way to volunteer.
Oregon.gov
Oregon.gov’s main focuses are on information about current wildfires and what to do following a wildfire. It provides resources to help after a wildfire and insurance information. The site also has information on ways to access food, hotels and pet boarding. Additional resources are a map of where wildfires are, an air quality map, and a road closure map. Oregon.gov does not have a way to sign up for alerts. The site does have a way to donate or volunteer
User Interviews
Key insights for evacuees
Be Prepared - Many evacuees wanted to plan for an evacuation, but didn’t know how and didn’t know what to take with them. They sometimes forgot important items.
Be Informed - The resources that evacuees found online only met a few of their needs. So they turned to social media, news media and their inner social network to get answers on how to prepare and where to go.
Be Notified - Evacuees signed up for emergency alerts were limited. The alerts weren’t frequent enough and/or didn’t provide safety information.
Key Insights for Volunteers
Volunteering - People want to get involved, but don’t know how or understand the volunteer positions, the skills required, and the time commitment. People that have volunteered in the past have found it to be a tremendously rewarding experience.
Connections - Evacuees have a range of needs that can be access to medical attention, resources, or FAQs. It’s important for Volunteers to identify these needs and connect the Evacuees to the appropriate resources.
Sharing the Impact - Volunteers are so busy while helping the community that they often lose sight of the impact they made. Hearing about the level of contribution inspires them to volunteer in the future.
Key Insights for Community Organizers
Manual Tracking - Organizers track supplies using excel sheets or by hand. Due to the manual nature and the need for frequent updates the data may not be accurate. Situations within a wildfire can change rapidly. It is extremely important that supplies and donation funds are accurate and available at a moments notice for the organizer to distribute.
Training - Organizers recruit volunteers that do not have any experience or skills with emergency situations, and they don’t have the resources to train these individuals. Wildfires are dangerous even after they have run their course. It is important for organizers to provide resources to educate the community on common situations they might encounter.
Communication - Organizers communicate with various groups of Volunteers in different locations. Often times updates were not frequent enough to effectively help the community. It is imperative to understand the community’s needs in their time of crisis.
Personas
User Journeys
Evacuee's Main Pain Points:
Not all locations have emergency information
Not enough resources for during and after a wildfire
Doesn't know what roads are closed
Evacuee's Opportunities:
Evacuees should have a list of tasks to complete in order to prepare for a wildfire in the area
Easy access to safety information, wildfire maps and planned routes
Notify friends and family they are safe
Resources with information for preparing for a wildfire, during a wildfire and after a wildfire emergency.
Volunteer's Main Pain Points:
Doesn't know what to do or how to help
Stressed out
Volunteer's Opportunities:
Resources to learn new skills and prepare for emergency situations
Clearly defined tasks to prepare and provide help where needed
Tools to share community’s wildfire emergencies with their social network
Community Organizer's Main Pain Points:
Not having things organized
Lack of communication
Not enough supplies or volunteers
Community Organizer's Opportunities:
10,000 ft view of all resources; volunteers, supplies, and donation money
Tools to easily communicate and delegate tasks to volunteers
Tools to share community’s wildfire emergencies with evacuees and volunteers
Storyboards
Evacuee's Backstory: Zack recently moved to Orange County California. He lives with his partner and 2 pets. He hasn’t experienced a wildfire situation in CA, but hears from his neighbors that wildfires often occur during the summers in CA.
Zack hears from the tv news media that wildfires are starting to occur in his area. Zack is worried. So he texts his neighbors and they tell him about the “Firewatch” app and send a link.
While Zack is on the app, he checks out the county map to see the emergency status and is informed that his family is in the level 1 alert zone “Get Ready”. Zack talks to his partner and lets him know that they are in level 1 alert zone and they need to get ready. Together they look over the recommended wildfire preparation plan and evacuation packing list. That day, they pack some important items and take a few photos of their home. They feel ready and less stressed.
In the middle of night, Zack receives an alert on his phone from Firewatch that informs him they need to evacuate now! The app gives him a list of road closures to avoid.
They grab their go bags and pets, pack the car, give each other a hug and head out of town.
While Zack’s partner is driving, Zack is researching where they can stay and realizes that many hotels are closed. Zack is starting to panic. He looks at the app and finds a community safe location on the app and hopes that this location has a place for them to stay.
Using Firewatch, Zack verifies that there is room for him and his family and reserves a spot for him at the safe location. He sighs with relief. Zack, his partner and their 2 pets arrive at the community safe location.
Volunteer's Backstory: Jennifer is a new volunteer with Firewatch. She was inspired to volunteer because two years ago she was saved from a fire from emergency volunteers. Today at 4pm she received the notification that there is fire and she needs to head to the evacuation site to help out.
Jennifer receives the notification that there is a fire and her services are needed. Jennifer and her husband double check that all their previous preparations are in order before they head out.
When they arrive, Jennifer checks in to the app and receives her first task. The new evacuees are beginning to arrive and she is posted at the entrance. It is her responsibility to greet them, instruct them on where to go and how to receive services they may need.
She meets Zach who isn’t feeling well. She helps the couple to their assigned area and as they walk, she enters his request into the app to ensure that he is assigned to a medical volunteer to get him checked out.
After about 3 hrs of helping Jennifer is feeling a bit overwhelmed. She bumps into Amelia and lets her know that she’s feeling a bit tired. Amelia has her check out of the app to collect herself, to get some rest and check on her own family.
Community Organizer's Backstory: Amelia has been volunteering for decades and now is a community organizer for wildfire relief. She was notified that there is a wildfire in the area and starts preparing safe locations and delegates tasks to volunteers.
Volunteer Jennifer is near Amelia the Organizer and informs her that she is going on a break. Amelia hopes she is okay and is not getting over worked.
Amelia the Organizer spreads the word on social media about the wildfire and the need for donations. Then, she starts using the messaging tool in the app to communicate with volunteers to make sure they take breaks as needed. She is worried about her volunteers just as much as the evacuees.
As requests come in from evacuees, Amelia chooses a volunteer from the provided list of volunteers that can complete the request. (medical attention, items needed, etc.) and will repeat this process. She wants to make sure that more emergent requests are handled first.
As time goes on and people are able to go back home, Amelia has volunteers provide information to the evacuees on resources and steps to take when going home. Such as what to do once they are home, whether the home has no damage or a lot of damage. She feels this information is important for people to have so they know who to contact for help.
User flows
Evacuee User Flow
Volunteer User Flow
Community Organizer User Flow
Mission and Vision Statements
Mission Statement
Vision Statement
KPI Metrics
Values - Simple, Efficient, and Relevant
Value - Simple
Feature Donate
Metrics
1. % of Completed Donations
2. % of Abandoned Donations
Feature Requests
Metrics
1. % of Modified Requests
2. % of Completed Requests
3. % of Cancelled Requests
4. % of Incomplete Request
5. Ratio % of Modified Requests to % of Cancelled Requests
2. % of Completed Requests
3. % of Cancelled Requests
4. % of Incomplete Request
5. Ratio % of Modified Requests to % of Cancelled Requests
Value - Efficient
Feature Manage Donations
Metrics
1. Average Time Managing Money Donations
2. Average Time Allocating Supply Donations to Locations
3. Average Time Allocating Household Items
Metrics
1. Average Time Managing Money Donations
2. Average Time Allocating Supply Donations to Locations
3. Average Time Allocating Household Items
Feature Tasks & Projects
Metrics
1. Average Time to Create Task
2. Average Time to Assign Task
3. Average Time to Assign Multiple Tasks
4. % of Assigned Tasks
5. # of Tasks Reassigned
6. % of Projects Completed
7. % of Tasks Incomplete for each Project
Metrics
1. Average Time to Create Task
2. Average Time to Assign Task
3. Average Time to Assign Multiple Tasks
4. % of Assigned Tasks
5. # of Tasks Reassigned
6. % of Projects Completed
7. % of Tasks Incomplete for each Project
Value - Relevant
Feature Interactive Map
Metrics
1. % of Time pan off Map
2. Average Time using Map
3. Number of People Checked In to Evacuation Site closest to home
1. % of Time pan off Map
2. Average Time using Map
3. Number of People Checked In to Evacuation Site closest to home
Feature News
Metrics
1. # of Articles Read
2. # of Shared News Articles
3. # of Articles Started to Share but Abandoned before Sharing
Metrics
1. # of Articles Read
2. # of Shared News Articles
3. # of Articles Started to Share but Abandoned before Sharing
Feature Alerts
Metrics
1. % of Action Taken off an Alert
Metrics
1. % of Action Taken off an Alert
Feature Review Checklist
Metrics
1. # of Items Checked Off Checklist
2. % of Completed Checklist Tutorials
Metrics
1. # of Items Checked Off Checklist
2. % of Completed Checklist Tutorials
Feature Notifications
Metrics
1. % of Actions Taken off a Notification
Metrics
1. % of Actions Taken off a Notification
Design
Sketching and Ideation
We needed to align on our direction for the overall structure of the application. So we worked together, sketched and generated ideas. We held short sketching sessions, presented and discussed our ideas as a team.
We repeated this process a few times.
We repeated this process a few times.
Once we all felt we had a couple good ideas, we decided to refine the overall site map to support consistent UI navigation.
We approached the work similarly to the sketching session.
By the end of our sketching session, we voted using dots and discussed our thoughts. This allowed us to have a cohesive and consistent structure to use as the foundation of the experience.
We then turned this into a revised site map.
We approached the work similarly to the sketching session.
By the end of our sketching session, we voted using dots and discussed our thoughts. This allowed us to have a cohesive and consistent structure to use as the foundation of the experience.
We then turned this into a revised site map.
Revised Sitemap
Site Key: User.Section.Feature.Subfeature
Example - Evacuee, News section, Share feature > A.5.2
Evacuee User = A
Volunteer User = B
Community Organizer User = C
Evacuee Sitemap
Volunteer and Community Organizer Sitemap
Key Wireframes
Homebase
News
My Requests and Tasks
Community
Branding
Colors
Accents
Fonts
Branding
Prototype
Prototype
Evacuee Prototype
Usability Questions
Evacuee Scenario / Test Script
“Imagine a time you heard about a wildfire in your area. You've just discovered this new mobile application that your neighbor suggested called Firewatch. You are curious about the wildfire in your area and want to find out some more information.”
Step 1. Determine the proximity of the recent wildfire
Leaning Goal: Do they know how to use the interactive map and the different features?
"How far is the wildfire from your home?" “Are you in a danger zone?”
→ All users could tell where the fire was and the different danger zones on the interactive map.
Step 2. Interactive Map
Leaning Goal: Do they know how to use the interactive map menu drawer and the different features?
“From the homebase please open the interactive map. What do you think each title and toggle mean?”
→ All test users understood the toggles were to turn the features on and off. They knew what the heat map was on the interactive map.
All except one test user didn’t know what the road closure icons were on the map until they toggled them on and off. Then, they said it made sense that’s what the icons were.
All test users figured out the house icon was an evacuation site location right away.
→ About 30% of the test users didn’t realize the icons on the map were clickable.
*Having on boarding for the interactive map will help with clarifying that the interactive map icons are clickable for the live app.
Step 3. Locate a recent news article about wildfires
Leaning Goal: Do they know how to find a news article and share it?
"Please, locate a recent news article.” “How would you share this article?”
→ All users knew to go to the News tab and recognized the share icon to complete the task.
→ One test user thought the word “share” with a share icon on the main news page was to share the first news article. They didn’t realize they needed to either scroll down a little further to get a share button under each article card, or click to open the news article and then share from the article page.
*Possibly try changing the wording of "share" to "create post on the top of the main news drawer."
Step 4. Donate money or supplies
Learning Goal: Do they know where to go to make a donation and how to complete the task?
"Now you want to make a donation, how would you use this app to make a donation?"
→ All test users thought donations would be under the community tab, which is the location. Only one test user was unsure if donations were under the requests or community tab. They tried requests first, and then quickly realized that the requests tab was to make a request for assistance of some kind. Then, they went to the community tab and saw donations right away. All test users had no issues with the donation process and finished it very quickly.
Step 5. Register to become a volunteer
Learning Goal: Do they know where to go and how to sign up to volunteer?
“Your next task is to sign up to become a volunteer.”
→ They found the section to volunteer right away under the community tab and had no issues with following the steps to complete the form. They all said it was super easy and quick to fill out.
→ Overall all test users said they liked the app a lot. They felt all the features were important and easy to use.
Community Organizer Scenario / Test Script
“Imagine you are a community organizer with the Firewatch app for wildfire evacuation in your community. You've just discovered there is a wildfire in your area and you need to help spread the word to the community of the wildfire, get donations to help with attaining supplies and assist with setting up evacuation sites.”
Step 1. Find out which volunteers are in different groups from the interactive map.
Leaning Goal: Do they know how to use the interactive map and the different features?
“As a community organizer you need to manage volunteers. Right now you need to find out who is in group 1 in the community, how would you do that on the interactive map?”
→ Test users were able to find the information on the interactive map right away.
Step 2. Find out the financial balance of the incoming donations and the outgoing expenses
Learning Goal: Do they know where to find financial information and how to look up the data?
“Now you decide to check on the finances to see what the balance is of incoming donations, how would you go about doing that?” “How would you view outgoing expenses?”
→ All test users were able to find the financial information right away. They immediately realized this information was under the community tab.
Step 3. Find out how many medical kits are on hand
Learning Goal: Do they know how to find information for items/supplies in stock?
“Now that you know how much money has been donated, you want to check on the supplies. How would you find out how many medical kits you have on hand?”
→ All test users found the information right away. They also figured out how to view what is on hand and what is needed or low / out of stock.
Step 5. View all the volunteers that are available to help
Learning Goal: Do they know how to view and manage volunteers?
“Next, you know you will need the help of volunteers to get the evacuation sites up and running quickly. So, you use the app to view and manage volunteers. You sent out a request to all volunteers to help out. After some time has passed, you are at the evacuation site and you view & manage the volunteers assigned to your location. How do you view all on duty volunteers?”
→ All test users were able to quickly see all on duty volunteers from the community page drawer without any issues.
Step 6. Remove a volunteer from service
Learning Goal: Do they know how to find a volunteers profile and remove them from service?
“People have started to arrive at the evacuation site and you are happy to see that there are a lot of available volunteers. They are all working hard when you notice an argument between two volunteers, which erupted into a fight. This is unacceptable behavior and the volunteer, Leslie Alexander, who instigated the fight must be removed. How would you remove that volunteer from service?”
→ All test users were able to complete this task. One user had technical issues, which caused their focus to be interrupted and required some redirection to get back on task. Once, back on track they completed the task quickly and easily.
Step 7. Assign a volunteer to a request and assign a donated supply item to a request
Learning Goal: Do they know how to assign volunteers and donations to tasks?
“Now that the fight has been cleared up and peace has been restored, you continue to manage the volunteers. There are evacuee requests that need to be assigned to volunteers. How would you assign a volunteer to a task?” “How would you assign a donated item / supply item to this task/ request?
→ All test users were able to figure out how to start the process of assigning a task to a volunteer right away. Most test users, about 80%, were able to complete the task quickly. A few test users lost their train of thought when they went to the step to add items from stock/supply. At that point I re-informed them of their task and asked them how they would go about doing that. Then, they realized right away they needed to click the “box” icon to start the process of adding items from stock.
All the test users then finished out this process quickly and easily.
*Onboarding of a quick tutorial on how to use the app for all community organizers and volunteers would clear up any questions that came up from testing.
→ Overall test users said the tasks were easy to complete. Numerous test users said they liked that the app guided them through all multi-step processes / tasks.
Suggested Next Steps
Revise prototype based on testing results
Second round of usability testing on improvements and additional features.
Design additional features including:
- Interactive Map Time View
- Preparation & Evacuation Flow
- Return to Evacuated Home Flow
- Create a tablet Experience for the Organizer
Conclusion
Since, this is not a live app we do not have real data for our metrics. However, the user testing showed the app overall is intuitive and easy to use. All test users informed that they would use this app for any future wildfires in their area.
Key Takeaways
In the second half of working together as a team we held a workshop to give feedback on each teammate's work style and strengths both individually and as a team. We also shared areas we felt as a team we needed to improve, such as to become more efficient. This meeting helped greatly by increasing productivity and moral as a team.
While designing the app we kept the scope to specific needs that were requirements from the client. However, through research we found additional areas of need. We relayed this information to our client and informed them that this would only improve the original app.
Through research we found the main issue for users was a lack of information on all things related to wildfires. Providing key information in a simplified was our main focus.
User testing showed minor improvements that can be made to the original prototype to make the app an even better user experience.
Keeping a line of open communicate was key for our team, especially since we were remote and in 4 different time zones.
Thank you!
