Skip to main content

Blog Post

Area Alert: Designing a Drupal Solution for Emergency Sites

by Becky Cierpich
April 20, 2020

Area Alert Drupal distribution logo

In a recent post, Communicating Coronavirus: Planning Your Emergency Response Website, we shared examples of COVID-19 sites around the U.S., highlighting insights we gleaned from our review. Mediacurrent has been using these findings to build out an open source Drupal emergency site, Area Alert. Our goal is to support organizations that are on the front lines, providing trustworthy, timely information during times of pandemic. We’ve partnered with Pantheon who is offering free hosting services—for at least 90 days—to qualifying organizations that join their platform.

Our UI Design Approach 

We took a user-centric approach, as always, mapping the journeys of citizens faced with perhaps some of the most difficult days of their lives—and in some cases matters of life and death.

On a personal note, my user empathy is strong as I am currently quite concerned myself with getting coronavirus/covid-19 information for my family from the city of New Orleans, where we live. I also have first-hand experience navigating another emergency—Hurricane Katrina in 2005. We evacuated, watched our city fall, and spent months navigating life as refugees—suddenly jobless and homeless and in a strange city with no way to return home. Information was vital every step of the way and not always easy to track down in a timely manner.

I may be a part of one or two use cases, but it is important to broaden my personal lens to encompass an appropriately diverse audience, with a focus on the most vulnerable users. User testing is ideal but at this time, at our current velocity, we are relying on our own internal teams, a wider network of experts, and the examples being set on other, similar sites. We will continue to hone the distribution over time.

Dire User Scenarios

While we always engage in mobile-first design, the mobile user seemed the most likely to be in a hurry—if not desperate in an emergency. So we prioritized and put together user scenarios for various difficult situations, imagining them both on mobile devices as well as on desktop:

  • I’m homeless and I don’t have health insurance but I feel very sick. What do I do? Who can I call?

  • I lost my job and I don’t have money for diapers or food for my children. Are there places I can go to pick up donated food and supplies? How do I apply for assistance?

  • I am blind. I use a screen reader to interact with websites and must be able to access the same vital information that impacts my health and safety as sighted citizens.

  • I’m parked outside of a place that has wifi—I don’t have it at home. I only have my mobile phone and I need to find what evacuation route is safe so I can go pick up my family and get out of town as quickly as possible.

Digital Psychology provides us with much applicable insight. Emotion affects cognition. Anxiety—even panic—can limit one’s ability to perform the most basic tasks, like navigating a website or even just touching a button.

While we considered action and information priorities for emergency scenarios, our overall design approach also took the panicked user into consideration. We strove to maximize findability by employing high color contrast, clear type hierarchy, plain language, and classic interface colors (such as blue for links, red for alerts, yellow for warnings, etc.) We allowed for large, clear pointer/touch targets for shaking fingers. We make certain that in the code all menu items, buttons, and other interface elements are clearly labeled for screenreader users.

We took into consideration the fact that the most vulnerable users may not have fast internet, or users may be on mobile data. In an emergency, networks can become overloaded and slow. That’s where Drupal comes in. 

Drupal sites are typically highly performant—speedy. While these emergency sites won’t typically serve lots of large images or videos, when they do, we’ll employ code to prioritize the delivery of information via text, even loading the display font after the data, so info reaches users as rapidly as possible. 

We also decided to make image alternative text a required field. Reading the image description is a faster way to take in the information so the user can obtain it and move on if they do run into situations where their internet is very slow.

We built in an alert system for the very most important and timely pieces of information. Below that, a row of quick-info cards can be used to summarize additional sets of information and options to lead users to the landing pages that they need:

  • Stay At Home Order 

  • Student Lunches To Go 

  • How to Help Others 

We also provided navigation elements that can be used to lead users to landing pages for collections of information relevant to specific personas:

  • Seniors & At-Risk

  • Homeless

  • Undocumented

  • Parents & Youth

  • Unemployed

  • Small Business

Each of these landing pages will contain collections of summaries of additional sets of information and options to lead users deeper into the site’s content and connect them with the local resources they need most.

Design note: despite the highlighting of urgent needs, and cognizant of the fact that we will sometimes be showing “red alert” messages to people who are potentially in states of intense stress, we strove to design in a task-oriented manner. The user interface itself should not inspire panic. Quite the opposite; it should reassure the user that help is on the way—the situation is as under control as it can be. 

Messages we want to convey include: Survival is possible; Here is the latest information; Here is what you can do; Here is what we—your city, organization, etc.—are doing. We built in areas that could be customized and suggested optimistic content for them in our mockups. For example:

  • A large image at the top of the page of the city skyline or perhaps the facade of neighborhood houses and the suggested message “We’re in this together” to play on emotion to inspire an immediate sense of unity and hope. A sense that there is a bigger entity the user is part of that is taking care of things. A picture is worth a thousand words and a good slogan goes a long way to provide grounding and comfort.
  • A spot to display data with the suggestion to show charts highlighting how many have recovered compared to died (as recoveries is always the larger of the two numbers). Little touches like this can subliminally shift focus from bad news to the bigger picture.

Area Alert Drupal Distribution mock homepage

Our goal for defining user pathways was to provide multiple ways for users to find relevant content by incorporating concise titles and offering summaries of information leading to easy-to-follow step-by-step instructions, clearly defined options, and lists of resources.

Our next priority was to provide the latest data or at least a way to point the user in the direction of reputable sources of data. Our design suggests a separate component to aggregate charts, maps, and apps to aid the user in navigating the crisis.

We also included an area in the footer that can be used for links to suggested, reputable info sources such as the CDC or NOAA.

Next we prioritized the latest news and updates from the city, college university, healthcare organization, etc. as well as a spot for the latest social feed if there is frequent activity on a platform such as Twitter.

Site Builders & Content Editors

While the majority of website users will be end-users, those who produce and publish the website are a crucial link in the chain. A Content Management System (CMS) must take these folks and their specific user journeys into account as well. These users will be spending their time building out pages and putting specific content into the set of containers (also known as “components”) the system we are building provides. These components must do their jobs flexibly. They must display a wide range of critical information clearly, offering content editors the right set of tools for their job: to provide end-users with the help and the resources they need in a crisis.

We wanted to build a system flexible enough to accommodate not only a wide range of emergency scenarios but the many potential competencies and quantities of personnel that would be resourced to make this vital information available to the public.

For large cities, universities, or organizations, they may have the resources to maintain the website with all the needed updates,  but what about a small town with a very limited number of staff members? We considered the various scales and skills for potential content administration teams and not only leveraged some great out-of-the-box features, but baked a flexible content strategy—complete with hints—into the system. This gives those entering information a sound roadmap to getting crucial content to the citizenry.

We’re here for you

We’re continuing to make improvements to our open source emergency website, Area Alert, to provide organizations who are communicating timely information during this pandemic the best framework for their site. If your organization is in need of help with your COVID-19 website, we’re ready to help. Contact us now to learn more about our open source solution for emergency websites.

Meet team member, Becky Cierpich

Complemented by an academic background in computer science and communication, Becky brings 15 years of web and graphic design experience to her role as a UX/UI designer at Mediacurrent. Driven by her belief that design has the power to make the world a better place, Becky tackles digital challenges with creativity, innovation, and a user-centered design approach.

Becky began her graphic design career creating gig posters for shows at New Orleans clubs like Tipitina's. Some of her poster art was featured in the 2005 exhibit, Graphic Noise, at the Atlanta Museum of Design. She later co-founded a New Orleans-based web design agency that branched out into custom application design. During her time at this agency, Becky spent 15 years honing her user experience, creative design, and web development skills while gaining experience with agile processes and teams. Seeking greater design challenges, Becky joined Mediacurrent.

Away from her desk, Becky and her two sons enjoy New Orleans’ many parks, festivals, and restaurants, participate in the local Lego Club, watch anime, build worlds in Minecraft, and travel to visit family and ride roller coasters together.

 

Learn more about Becky >

Related Insights