Alertify
Natural disasters are on the rise in the United States, there’s no doubt about this and with that comes the need for a platform to help coordinate an effective and quick response. In desperate times, the RWTC (Ready When the Time Comes) chapters are called upon in the community and stand side-by-side with Red Cross to stabilize the situation. However, most RWTC chapters struggle to communicate with Red Cross due to a lack of time and coordination. From this main problem we discovered where our solution lie, Alertify was formed to lead the coordination. This platform will streamline local led activities and make them more effective as impacted individuals wait for rescue and recovery from organized assistance. Six features will be incorporated into the application design to better fit the users’ needs: Social Media Integration, Interactive Map, Screens for Community Organizers to view and manage Volunteers and track Donations, Screens for Community Organizers to associate volunteers and donations with needs, and a way for people to volunteer and donate. Alertify is truly a one of a kind disaster response website application.
Overview: MUXD Masters Team Project
Roles: UX/UI Design, UX Research, Information Architect, Project Manager
Software: Figma, Adobe Photoshop, Adobe XD, Azure, Whimsical, Uxpressia, Miro
Product: Desktop and Tablet Design
Team: Joshua Hillmer, Sally Kim, Julian Addison, and Ron Park
Timeline: 6 Weeks
“Emergency preparedness is a team sport”
- Eric Whitacre
Evacuation orders can come at any time no matter where you live and you may need to be mobile within minutes of hearing it.
Project Plan Schedule & Agile Workflow
To manage the workflow of our project, we implemented an agile approach in our project plan over course of six weeks, starting from the Discovery Phase, all the way to the finalized prototype and presentation. The project plan was created prior to our first team meeting, and has been updated almost every single week to adjust towards new updates or discoveries during our design journey. However, at the end of our project, we were able to complete our deliverable in the course of six sprints, which we planned in the course of the six weeks of planning and designing. Each sprint included an overall goal to complete and present the findings to the client beginning of every week. The objective of each presentation is to incorporate feedback from the client to adjustor findings in order to stay straight as possible in our goal to design our solution Alertify
Phase 1: Understand
User Interviews
As the main users who will be interacting with Alertify will be community organizers and those who need to respond to an EVAC order, we will split the user interview into two different user types. The community organizer was an individual who personally responded and coordinated the fight against numerous forest fires in Southern California. The survivor user type was a homeowner who had to evacuate their condo when an EVAC order was issued in her neighborhood this past year.
Survivor User Type - Interview Structure
Research Goal — Are California residents truly prepared when responding to the evacuation protocol prior to the event of a wildfire disaster?
Question 1 - Getting Stocked and Prepared
1a) Setup/Area of Inquiry At the very beginning where a community official asks you to get a list of emergency supplies to prepare for an event where a disaster may be imminent, what were your initial thoughts when making an evacuation plan? (Were you scared, nervous, confused at same time, etc)
1b) Laddering Was there any kind of trouble getting any of the emergency supplies you needed?
1c) Segue to Next Question How did you store your emergency supplies where in an event you may have to evacuate quickly and are able to grab your supplies in a fast-timely manner?
Question 2 - Getting to the Safe Zone
2a) Setup/Area of Inquiry When community officials contacted you that a wildfire may be imminent in your area, what directions did they give about your evacuation zone?
2b) Laddering Was there any confusion on which public shelter you are supposed to go?
2c) Segue to Next Question So as you know, public shelters in California actually restrict bringing in pets due to the possibility of exposing other family members with allergies. What protocols have you made for your pets in case when evacuation is in effect?
Question 3 - Contacting for Help
3a) Setup/Area of Inquiry During a situation where you may be confused on some of the evacuation protocols, do you know who you should contact to find clarity?
3b) Segue to Next Question With the overall plans and protocols in place, do you think you have everything you need prior to an imminent disaster if you were to evacuate right now?
Community Organizer - interview Structure
Research Goal — What are the responsibilities of emergency responders in relation to the general population during a natural disaster event such as a wildfire?
Question 1 - Assessing the threat
1a) Setup/Area of Inquiry: What does the general public need to know any immediate threat they faced, and how were they informed about these dangers? How much time does one have when responding to a wildfire?
1b) Laddering: Was there anything that could have been more efficient in terms of informing the public? Did any people have trouble accessing information? Any cases of conflicting information?
1c) Segue to Next Question: What role does a response team play in an evacuation effort?
Question 2 - Agency response
2a) Setup/Area of Inquiry: What did the general public need to know any immediate threat they faced, and how were they informed about these dangers?
2b) Laddering: Was there anything that could have been more efficient in terms of informing the public? Did any people have trouble accessing information?
2c) Segue to Next Question: What role does a response team play in an evacuation effort? How are people managed and what challenges do evacuations present to responders?
Question 3 - Shelters & Recovery
3a) Setup/Area of Inquiry: How are shelters formed and how far might people have to travel in order to reach them? Do people know where they will be sheltering before they evacuate?
3b) Laddering: How many people could be expected at a shelter? If people have animals with them, will animal shelters be located closely to where they will be sheltering?
Survivor User Type - Key Insights
Initial thoughts when making an evacuation plan
Worried, scared from the water and electricity being cut off so people went to the stores to stock up including self N. California (bay area); however found out a lot of information from social media. Panicking about packing up everything in time to prepare for where they can relocate because of Covid-19; another factor to consider with more constraints.
Storing emergency supplies
Though a recommended list of supplies were found, either online or listening to broadcast system, they did not mention quantity of items if the disaster were to be longer term than anticipated. Since living in a small apartment, quantity luxuries were limited due to space, which also means less space to pack everything together to ease evacuation process.
Evacuating their pets
Respondent researched the information from public website; but officials didn’t tell her exactly, just 10 minutes away so people were wondering where to go including self. They didn’t take into consideration that bunnies are prey animals, which means they scare easily. At the same time during evacuation, they need to find a calm and steady environment for the bunnies to be safe.
Who to contact for evacuation protocols?
All research to find any protocols on evacuation were either found online, or broadcasted on television. With television, guidelines were limited and did not know where to evacuate to, what zone, nor what shelter if the disaster threat in the area is high.
Community Organizer User Type-Key Insights
What does the general public need to know about the immediate threat they face from wildfires?
They need to know the threat level in their area. People make assumptions when they buy a home in a semi urban area that they are safe. But that relative safety isn’t resolute.
If you move to an area away from the city center, it means you have limited access to first responders. You need to ask, can a firetruck get up the road safely and you need to consider that you are now closer to potential danger.
They also need to be aware of how to get information and that it comes through different methods
Emergency broadcast system (kind of dated)
Ready. set. Go!
Takes 15 minutes to send the next message.
Having several ways to get info is what people need
Getting the word out rapidly is key.
People should be prepared to heed the warnings and move rapidly. But getting information to the public is difficult especially during an emergency
How were people informed about any potential danger they faced and how much time did they have to respond?
In as little as a few minutes. Paradise was evacuated within an hour (from no danger to EVAC). “Milling” is when people wait to see what other people around them do when told to evacuate. The key is to train people not to mill around after evacuation order is given. If possible people should leave early and not wait for an evacuation call.
Don’t assume you have a lot of time
From survivor to volunteer
Although we initially conceptualized our second user type to assume the role of a natural disaster survivor, we decided to reshape this user type after our interview process. Our survivor user, revealed to us that while in the midst of evacuating the vicinity of a wildfire, there was a lack of communication between survivors, and authorities, volunteer networks, and community organizers which was a major pain point throughout her experience. She also told us that she had decided to take part as a volunteer after that experience was over with. We wanted to give community members a sense of proactivity that can be given back. Building a volunteer base through Alertify provides survivors with a better infrastructure in disaster response.
Pain Points
Not having a dedicated app or platform specifically made for communication
Confusion during a rapidly changing situation
No coordination between volunteers and community organizers
Lack of an area where volunteers can sign up and take training
Persona
What is a persona?
Although personas have come under fire in more recent times. I believe they can still help serve a purpose. While it should be used as a supplementary research tool and not a heavily relied upon one. Personas help to not only create a vision of your ideal user but help to formulate needs, wants and frustrations. They are based on behaviors and motivations of real people we observe or data gathered from actual users encountered in ethnographic interviews. They help to maintain alignment with all members of a team on a website or digital project. They serve the purpose of helping to orient a project and can be used to help make informed decisions when user goals are called into question.
Red Persona/Community organizer
Our application design will focus on our Red Persona, which is our community organizer role. Red’s user flows will be all encompassing, and include the types of tasks that a volunteer would complete as well. Our goal as a team is to provide Red with an efficient, clear, and calm experience with our design.
Phase 2: Define
Journey Mapping & Storyboard
Current State
The customer journey maps gives our team visual perception on not only where the frustrations lie in their user journey, but also how they are reacting to their frustrations and what methods of resolve do they try to accommodate to improve their own satisfaction. In this journey map, we color-coded each phase of the journey, and divided them into smaller phases to root out the phases that depict the user’s frustration. We will then focus on those phases and surrounding phases to decide how our solution will help improve their customer experience.
StoryBoard
The following storyboard depicts the two users of community organizer and volunteer actively coexisting for volunteer training under Red Cross. As the community organizer recruits the volunteers through their company, the volunteers respond by signing up for an Alertify volunteer account. As each volunteer signs up for a course to be trained under Red Cross, both organizer and Red Cross will approve the appointment after conducting initial background checks. The organizer will monitor all volunteer status through their organizer portal, be alert 24/7 if and when Red Cross makes a call-to-action alert to be deployed for wildfire response.
Phase 4: Design
Wire Frame
First Round of User Testing & Task Flow
Community Organizer User Task Flow: Volunteer Recruitment
Keith (Organizer)
Community Organizer User Tasks
1. Recruit a new volunteer (Pass)
2. Create a call to action (Fail)
Community Organizer Results (Round 1)
Our testing resulted in two out of three user tasks being completed. The third task was nearly complete, apart from the user navigating back home and accessing the messaging feature. Xintong’s overall level of satisfaction was recorded as an 8/10.
Additional feedback: The user gave us insight that our navigation was not quick or seamless enough, and that labelling our volunteer network page as “Members” was confusing.
Volunteer User Task Flow: Donation Drive Participation
Xintong (Volunteer)
Volunteer User Tasks
1. Sign up as a volunteer (Pass)
2. Confirm response to call to action (Pass)
3. Donate to drive and message team (Fail)
Volunteer Results (Round 1)
Our testing resulted in one out of two user tasks being completed, with not enough time for the plan of three tasks total. Keith’s overall level of satisfaction was recorded as an 5/10.
Keith noted that the wording of “Team Management” was confusing and would not lead him to think it was a portal for his volunteer network. Additionally, he stated that the process was not well-suited for those under stress or quick and simple enough.
Round Two Testing (Desktop Prototype)
User Tasks
Sign up for training (Pass)
Recruit a new volunteer (Pass)
Create call to action (Pass)
Donate to donation drive (Pass)
Results (Round 2)
Our testing resulted in four out of four user tasks being completed. The user had a much easier time understanding the layout and only had a few minor points of contention. Keith’s overall level of satisfaction was recorded as an 8/10 which is a 40% increase in satisfaction.
This time around, Keith’s feedback was more positive. He noted that our volunteers and community organizers should have a sense of how long a deployment might last. His only concern was that users would need a little more information on screen when it came to being deployed.
After improving upon our prototype and changing the device format from mobile to desktop, we saw a 30% increase in overall satisfaction. Additionally, we saw a 50% increase in rate of task completion.
From Mobile First Approach to Desktop Screens
Our initial approach for Alertify was to focus on designing screens and a prototype for mobile devices to accommodate potential high mobile traffic. Our first round of usability testing incorporated a mobile prototype for our users.
Our test results revealed key flaws in our design approach though. Firstly, due to an excess of information necessary to display on screen, we noticed our users missing key points of information, especially when it came to initiating or responding to a call to action. Secondly, we saw navigation issues occur when it came time for our users to jump from one feature to another.
We decided to shift gears and reincorporate our site architecture into a desktop format so we could focus on neatly laying out key areas of information, display a constant source of site navigation for certain key features, and better accommodating users under stress. As a result, we noticed a significant increase in user satisfaction and task completion rate.
Deciding on UI
Typography
Icons
Color
High-Fidelity Mockup
Overall Site Architecture
Upon logging into Alertify, our users will have access to five key navigation areas: personnel, messages, donation central, training, and schedule. On top of that, our community organizers will have access to a call to action feature, which enables them to deploy their volunteers to specific Red Cross centers should their communities find themselves in need.
Phase 5: Final Version
Final Ideation and Validation
Before and After Portal Home Screens
In our Before Home Screen, the user didn’t give a solid reaction when they first saw the mobile version of Home. Although there were not necessarily any issues with the screen itself, there was one text that the user responded very negatively, which was “Team Management.” Before on the mobile version, all contacts and call-to-action feature would be in Team Management. Since our team now realized that wording can be very confusing, we switched the name to “Personnel” and got positive feedback in return.
Before and After Call-to-Action Screens
On the Before Screen, was represented during the first usability test, before our executive decision to switch devices. Besides the size of the screen, the major change was the step-by-step numerical indicator, which acts as a guidance to show the user where exactly in the task they are. Also, we designed the After Screen to be more aesthetically pleasing by adding more visual graphics to the experience. As a result during the second usability test, the user responded more positively and enjoyed the journey much more than the first.
Before and After Call-to-Action Response Screens
The user responded again positively to the new and improved screens for the Call-to-Action. The only comment he suggested was to add the length of time on tour when engaging the Call-to-Action. Unlike Red Cross team members, volunteer members in the “Ready When Time Comes” community chapters volunteer for Red Cross part-time and will need to know how much of a time commitment will the Call-to-Action be. With the estimated time on tour added, the user can now have a visual perspective on whether or not he can confirm the response or not.