— Joshua Hillmer is a Los Angeles based Product Designer specializing in human-centered design, UX/UI best practices, user testing and research.
Afinal.png

Alertify

A desktop and tablet design to help first responders and volunteers.

 

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.

 
Alertify_Playbook.png
 

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

 
image.jpg

The Problem

In order to meet the increasing demands of disaster response, the national organization, American Red Cross, calls upon the citizens to form “Ready When Time Comes” chapters for aid. Even though most citizens have the desire to help, they struggle with the lack of coordination and time to organize a response team to help Red Cross stabilize natural disasters.

 

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.

 
Screenshot 2021-03-04 141312.png

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.

 
Screenshot 2021-03-04 141226.png
 
Screenshot 2021-03-04 142223.png
 

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.

Screenshot 2021-03-04 142253.png
 
Screenshot 2021-03-04 142318.png
 

Phase 4: Design

 

Wire Frame

Screenshot 2021-03-04 141059.png
Screenshot 2021-03-04 140853.png
 

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.

Screenshot 2021-03-04 153323.png
 

Volunteer User Task Flow: Donation Drive Participation

Screenshot+2021-03-04+153259.jpg
 

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

  1. Sign up for training (Pass)

  2. Recruit a new volunteer (Pass)

  3. Create call to action (Pass)

  4. 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

Screenshot 2021-03-04 174534.png

Icons

Screenshot 2021-03-04 174916.png

Color

Screenshot 2021-03-04 174605.png
 

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.

 
Screenshot 2021-03-04 175214.png
 
 
Screenshot 2021-03-04 175712.png
Screenshot 2021-03-04 175846.png
 
 
Screenshot 2021-03-04 175922.png
 

Phase 5: Final Version

 

Final Ideation and Validation

Before and After Portal Home Screens

 
Screenshot 2021-03-04 194741.png

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

Screenshot 2021-03-04 194803.png
 
 

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

Screenshot 2021-03-04 194859.png

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.