American Red Cross

When emergencies occur, the American Red Cross is there.

  • Responsive Website
  • Social Media Integration
  • Mobile Checkout UX
  • Data Migration
  • WordPress Development

During disaster situations, The American Red Cross provides online and on-location training courses and online contribution avenues to help assist communities in duress. Confronted with a growing mobile audience the American Red Cross needed to upgrade their non-adaptive mobile interface, making it easier on users to find resources during times of crisis. Our primary task was to create an aggregated platform that highlighted the American Red Cross’ breadth of relief services.
Launch Project

Red Cross ui design comp

Creating User Flow for a Disaster Relief Organization

Our primary challenge was to design an adaptive site that catered unique experiences across a full spectrum of devices including mobile, tablet, and desktop. To begin, we conducted a heuristic evaluation of both desktop and mobile interfaces to understand the current user flow and to identify any existing discrepancies between the two.

From these evaluations, it was clear our efforts had to be directed towards simplifying user interactions and limiting the amount of clicks needed to complete a task. Our creative strategists chose to construct a seamless, app-like product to meet the American Red Cross’ needs and ensure the selection process was consistent for the user.

Red Cross wireframe comps

Rapid Prototyping the User Experience

For our initial proposed interface, we relied on early user testing and quick iterations, designed the interface using low fidelity wireframes, and simulated the developed product with InVisionApp. This allowed us to test the interface as a prototype on a mobile device without writing any code. InVisionApp also allowed us to share the proposed interface with the American Red Cross for them to test and provide feedback.

Red Cross Disaster Action Room wireframe comps on tablet

Relief Services, All From a Dashboard

The American Red Cross needed a more consolidated method of keeping the wider public up-to-date as disaster situations occurred. To achieve this, our creative team came up with an all inclusive disaster dashboard that served as a central hub for disaster and support information.

To build this central dashboard for gathering information, we built a feature to fetch content from American Red Cross’s social media accounts within the parameters of the API, and serve those results onto the dashboard as new updates appeared on different sources. By pulling the results into WordPress, the editors had the ability to delete, edit, and publish specific posts and filter the accounts and keywords they wanted to include.

Creating user groups and permissions gave the American Red Cross the ability to filter social media accounts by Red Cross chapters and teams, ensuring that content managers had access to specific disasters and prevent overlapping publications.

Red Cross Disaster Action Room prototype comp

Leveraging Social Media Aggregation

We designed and built a social media platform—including Twitter, Facebook, Instagram, and YouTube—to aggregate current disaster information and display it to the public from the centralized dashboard, via curated lists. This is done in such a way to give content managers editorial control over what posts to publish, as well as preventing overlapping publication updates.

Locate Disaster Resources Wherever You Are

The disaster action dashboard also included a custom built map integrating the American Red Cross’s API with Google Maps, a location-based element directing users to action or helping them find disaster relief. Based on disaster locations, the map visually showcased different American Red Cross services—including emergency response vehicles, shelters, and American Red Cross response sites, which were filtered by each disaster. We were also designed warning systems into the responsive interface to notify visitors when a natural disaster was approaching. This map feature was later extended to mobile as well.

WDG will make your organization mobile.

Start a Project

  • Thank you for your interest in working with us. We are excited to learn more about your project.

    Please fill out the form below and we will get in touch with you quickly.

  • Select all that apply
  • Ballparks are fine.
  • Do you have a timeline requirement?
  • Upload Your RFP / RFI.
    Drop files here or
    Accepted file types: jpg, gif, png, jpeg, doc, docx, pdf, xls, xlsx, csv, txt, rtf.
Created by Zaff Studiofrom the Noun Project