[This is part of “The Guts” series, where I’ll be finding cool projects and tracking down how it was made. This series will reach across all platforms, so if you see an awesome design project and want to know more about it, send it my way! You can email me at rschallom@gmail.com or find me on Twitter.]
ProPublica recently published “The Military is Leaving the Missing Behind” — a story about the Americans missing in action from World War II, Korea and Vietnam who are considered recoverable. Sisi Wei handled the design and development, and she took us behind the scenes to see how it came together.
How long did you spend working on this project? What were the most challenging parts?
I’d estimate 1-2 months of full-time work were required to both design and develop all the small- and medium-sized graphics, page design, as well as the timeline interactive that published alongside the story.
Interestingly enough, the most challenging part was not working on the main article, but rather the design and user experience for the timeline: Bud’s Story, From the Records. Early on we knew we’d be dealing with a high volume of primary source documents — some with multiple pages and some hand-written — and we needed to figure out how to incorporate such rich but usually supplementary content into the project. The final design was based on giving readers full reign to explore each element in the timeline, without the timeline itself getting in the way of the content. In the end, I designed it so that no element is ever hidden, readers can select ticks on the timeline to navigate, or they can simply scroll down and only use the timeline as an indicator of where they are on the page.
How did the idea of tracking the missing persons via the stars on the side come to be? I love that it puts web design to work — not only does it look great, but it adds information to the story in an illustrative way.
Ever since seeing this creative Lost World Fairs site, I’ve been extremely drawn to taking advantage of scrolling as not just a way to transition readers through a story, but as a way to actually tell the story. I’ve seen some great projects use it to show physical depth or help readers keep track of location, but I knew the technique wouldn’t have to be limited to literal analogies.
So I had all this in the back of my mind, and this year I started working on MIA. Originally, I was going to show how many service members were still missing by drawing a large block of stars that spanned the entire width of the page, that would be positioned at the very top of the story. Quickly however, I realized that while it would be effective, that type of placement and design was way too dominant. That’s when the elements fell into place for me, and I realized I could use the natural scrolling that comes with reading the story as a way to communicate how many MIA Americans were still missing but recoverable.
Have you seen a lot of people using the pre-written tweets function?
So far I’ve only seen a handful of organizations use pre-written, inline tweets, but we originally got the idea from a New York Times SNL project, and first tried it out on our Tylenol project.
What I haven’t seen anywhere else however, is our takeaways box, which compiles the major takeaways from the story and provides them to the reader using an easy to read list, each with its own custom tweet. This original idea debuted in the Tylenol project and is the brainchild of Amanda Zamora and Eric Umansky.
How complicated was it to make the countdown feature that tracks time in real time?
The code behind this isn’t too complicated, but because we had used it before, adapting it to the MIA project only took a few minutes. The clock feature was conceived by Amanda Zamora and designed and developed by Lena Groeger and Al Shaw. I simply adapted it to work for MIA.
What was your favorite part of putting this project together?
I don’t know how rare it is outside of ProPublica, but working on a project here usually means that you are in the weeds and doing the design and technical implementation for every single aspect of the project. So after getting to know the story, I was selecting photos, designing page layouts, making the small explanatory graphics, and then programming everything out.
For me, it really wasn’t until the very last minute, when we had the final version of the story, and all the design elements were placed according to the content, that I actually got to see and appreciate the project in its entirety, as opposed to seeing placeholder text and temporary positioning.
How did working at ProPublica make this project possible? What types of projects do you want to do in the future?
This is an interesting question, because I don’t think this project is impossible for other newsrooms to do. However, I can say that this project was certainly made possible because of two reasons: First, ProPublica invests the time and money necessary to do great investigative journalism. Second, the journalists on the news applications team can really depend on support from one another, as well as the support of the wonderful reporters we work alongside of, to make these projects happen.
As for what kind of projects I want to do in the future, that’s a pretty easy question to answer, because the answer is the same as what ProPublica holds as its mission: In the future, I’d like to investigate, analyze, design and develop projects that “expose abuses of power and betrayals of the public trust.” Can’t really say it much better than that.
Society for News Design
Society for News Design