The International Committee of the Red Cross had a tough mission – create a rich media microsite as a compliment to their report on war in urban environments that would be an engaging piece of visual storytelling for a broad audience, while at the same time serving as a top-of-funnel experience for more focused policy workers. 
The source report was a heavily researched, 65 page long pdf on refugees in Syria, Iraq, and Yemen. The ICRC knew that these types of papers don't often generate a lot of causal readership. We worked with the them to pull out salient points and structure the story, as well as providing a visual environment in which the story could come alive and convey a sense of the drama felt by the victims of the crisis.
Our initial thoughts of the UX landed on making a series of "scenes", lightly animated, that drew in the user and revealed more parts of the stories. Since so much of the intended audience would be viewing the piece on their phones, we had to think mobile-first.
We knew we wanted SVG animations to be a big part of it, so we started experimenting immediately with what was possible.
We leveraged assets the ICRC had — dramatic photos and video clips. We selected assets that moved the story forward while at the same time conveying the extreme weight of the situation. Finally, the piece started to come together.
See how the final piece turned out here: cityatwar.icrc.org

Also check out:

Back to Top