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.
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.
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.
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.
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.
If you enjoyed our case study on The American Red Cross and want to learn how WDG can implement a successful user experience to better your mission online, connect with us at [email protected].