Redesign of DirectRelief.org

Direct Relief is a humanitarian aid organization, but also embodies many of the qualities of a news media organization. Its staffers turn on a dime in response to health crises, producing content at a rapid pace to document crises and the organization’s response. On a moment’s notice, DR must launch humanitarian and disaster relief landing pages complete with donation requests and updates from the field. Our goal for this project was clear: to revamp directrelief.org, matching this well-honed physical operation with a modern design and online editorial workflow for curation and publishing.

The Direct Relief homepage with a headline and image, displayed on a laptop screen

The Context

On a bright spring day in Santa Barbara, California, our team stepped inside a warehouse belonging to Direct Relief, an award-winning nonprofit that provides critical health care, supplies, and monetary support to people facing poverty and emergencies in the wake of disasters around the world. 

We were astonished. Stacked high along lengthy aisles, pallets stood ready with emergency medical supplies. A forklift glided by, its operator readying product for a waiting tractor trailer. A bank of refrigerators cooled life-saving drugs. And above us all, a series of monitors kept track of the complex operation — shipments going out, products coming in, where aid was being delivered across the globe at that moment

A woman listening to a gesturing man in a large warehouse in front of many shrinkwrapped orange boxes with the Direct Relief logo on them

A Service Organization and a Publisher?

Direct Relief is of course a humanitarian aid organization, though it also embodies many of the qualities of a news media organization. Its staffers turn on a dime in response to health crises, producing content at a rapid pace to document the organization’s response and impact. On a moment’s notice, DR must launch humanitarian and disaster relief landing pages complete with donation requests and updates from the field. 

Mobile views of the site with images, large headlines, and a learn more button

The Ask

Our goal was clear: to match Direct Relief’s well-honed logistics with a modern design and editorial system for its web presence.

We began our work with a day-long discovery workshop where we learned about Direct Relief’s organizational values and aesthetic, walked through the arc of disaster fundraising and communications, and unpacked the needs of site visitors. We took a look at the organization’s existing presence, and worked together to create a road map for where we might take the site.

Two men with their back to the camera with orange and black Direct Relief backpacks on

The Solution

Deeds, Not Heartstrings

A key part of Direct Relief’s approach to disaster assistance is empowering folks in affected areas, rather than imposing outside aid and perspectives on other cultures. When it comes to sharing the resulting accomplishments, the organization believes in showing the ways it has helped others increase their own resilience and capacities. 

A headline and image displayed on a tablet screen

The nonprofit wants to earn your trust by showcasing empowerment. Our design evokes the confidence of Direct Relief’s expertise and the streamlined focus of a team on a mission. Clean sans-serif fonts and a simple color scheme of black and orange amplify Direct Relief’s brand. The site’s visual design doesn’t compete with DR’s action-packed photography, yet provides a sense of energetic anticipation — DR can spring into action at any moment. We integrated subtle microinteractions into button and link designs, reinforcing the reality that DR is always moving something to someone, somewhere.

We customized DR’s installation of WordPress to facilitate this, providing settings to easily foreground specific relief efforts, aggregate written and multimedia content, and add or remove donation calls to action. The system is modular and easy for staff to use.

Data Revealed

Not everyone gets to see DR’s behind-the-scenes operations as we did. To convey the ever-expanding scope of their work, we developed an Aid Tracker that updates daily to report on the full scope of the organization’s yearly distribution of aid to communities and health care providers.

The Direct Relief aid tracker with large bold statistics updated "at 5 am today" - $1,144,166,259 in medical aid, 157,898,978 doses of medicine, 8,020,943 pounds of medicine and supplies, 28,237 deliveries, and 3,038 healthcare providers supported

A Clear Voice

When you’re on the staff of an international relief organization, the direction of your days and weeks can change rapidly. As we approached launch, communications staffers were facing a tight deadline. They needed to travel abroad ASAP to document urgent Direct Relief efforts, but they also needed to get landing pages on the site rewritten and reorganized for launch, to match the new content structure. We offered assistance with the task. 

Three articles on the Direct Relief page, each with a large image, a bold headline, and a brief paragraph or sentence of information

Leveraging our editorial expertise as newsroom veterans, Alley took a journalistic approach to rewriting landing pages that detail Direct Relief’s response to multiple disaster scenarios. We collaborated with communications staff to create landing pages synthesized from stories in years’ worth of blog posts. This allowed the organization to better showcase its approach to multiple types of disasters around the world. We wrote more than 30 individual disaster landing pages, including more than 41,000 words about Direct Relief’s efforts across hurricanes (e.g., Hurricane Katrina), earthquakes (e.g., the 2011 Japan earthquake and tsunami), famines (e.g., African famine response), outbreaks (e.g., Zika and West African Ebola viruses), and wildfires.

We were so proud to be able to use our journalistic talents to help the organization tell its story effectively at launch — while freeing up the staff to document events happening in real time. 

Four men in helmets pushing a pallet labelled emergency medical supplies into a large black Navy helicopter
The main page of Direct Relief with navigation, featured article, and additional content