The Seattle Times’ latest project, Loaded With Lead, looks at the issue of lead poisoning at shooting ranges. The presentation was so unique that it made my hard-to-impress investigative reporters at the Sun Sentinel stop and share with the team. I knew I had to learn more about it.
Lead digital news producer Katrina Barlow and news web developer Thomas Wilburn take us inside the design and development.
1. There’s no other way to say this: Your project title is badass. How did that idea come to be?
Thomas: We really wanted this project to communicate how insidious lead contamination can be. The dust from guns ends up everywhere, and in some cases range workers even tracked it home and got their family members sick. That’s a terrifying idea! In particular, I reacted very strongly to one of the quotes from James Maddox, who worked at the range in Kentucky. “You’d rub your skin and it would be black,” he said. The quote ended up being cut from the story, but it was such a compelling image that it stuck with me throughout the process and inspired a bunch of the graphical easter eggs.
2. Walk us through the design and development steps to make that happen.
Thomas: It took a lot of hard work and iteration, honestly. I wrote a little bit about this process on our developer blog, but basically we did a lot of brainstorming and prototyping to see what we could do to create an experience of contamination and “dust” on the page. I worked closely with Susan Jouflas, our art director, to try different approaches until we ended up with the wax-resist header.
As far as development goes, the code is actually pretty simple. The background texture is a composite of charcoal and watercolor that Susan put together, and that gets loaded into a fill pattern and painted in via HTML5 canvas. To make it look more organic and less obviously digital, the “brush” is a randomly-generated polygon with a spray of dots around it, which keeps it from having sharp or obvious edges as the mouse moves. Compared to the other prototypes I put together, like the WebGL dust storm, this is really simplistic, but I think that’s part of its appeal.
3. Was there fear that people wouldn’t get that it was interactive?
Thomas: There was. We did a lot of testing with different swipe animations to try to figure out what would work best, but we really didn’t want to have a “swipe here” message clubbing people over the head. It turns out that it’s really hard to interact with the page on a desktop computer without interacting with the header area, so in newsroom user testing almost everyone got the idea (although it sometimes took a few seconds). Honestly, my problem was more that I have to compulsively fill in the entire header every time I see it!
4. On the motion graphic on lead escaping a pistol, how did you balance the graphic & text?
Thomas: Mark Nowlin did a lot of work to get the pacing right, and he’s an exemplar of patience.
5. One of the things that stuck out most to me was how you incorporated longer items that might have distracted from the main project, such as the sidebars or the tall graphic on part 2. How did user experience influence how you designed those items?
Thomas: A big concern with these tall elements is the user experience on mobile. On a desktop, you can run things side by side, but on a small screen they can break up the story in a way that really drags the user out of the text. So I think keeping the sidebars and graphics short by default, but letting people dig in if they want, is an important way of respecting those users.
Katrina: And, even on a desktop, it’s challenging on the eyes to read a 600-word sidebar alongside a longform story. Sidebars make a lot of sense in print, but they’re a headache to incorporate online. I think it does an injustice to put a sidebar on a separate page where very few people will see it and where it’s out of context, but it also can’t distract from the mainbar. This presentation struck the right balance with me.
6. Was there any concern on running the videos so small?
Katrina: These videos were meant to be snippets of interesting, smaller stories, but not an overarching, full-length narrative. So, no, there was no concern. I’d be concerned if the video player didn’t have the “expand fullscreen” button, but with it, it’s very easy to access a larger video experience. Given the ubiquity of online video in the Netflix and YouTube era, I hope everyone knows how to expand a video player. If they don’t, it’s about time to learn!
7. How did you decide which visuals should be static and which should be interactive?
Thomas: We don’t have a lot of development resources, so a lot of our decisions revolved around getting the most out of the great work that our investigative team did. For example, they pulled ten years of blood level tests for gun ranges in Washington state, and also got records for lead inspections across all 50 states. Only a little bit of that can go into print, but online we can use interactive graphics to present the full data set.
Katrina: Sometimes a static image reveals everything you need it to — no sense in making it interactive if there isn’t a fuller story to tell. But, that said, static images are pretty tricky with responsive design. Thomas and I are already scheming about responsive images as a way to rectify that issue for our next project.
8. Did your team do an analytics analysis on how many people read multiple parts?
Katrina: Yes, we did! In past projects, I’ve seen significant drop-offs in traffic after the first part in a series. This time, we saw a dip in page views between Day 1 and Day 2, but the Day 2 engagement time was higher, averaging at times about 7.5 minutes. Day 3 was lower, but I suspect that’s due to the later publish date, a few days after Day 1 and Day 2 published.
9. What is your favorite part of the project?
Thomas: I’m really proud of the “string of pearls” graphic on day two, which took a lot of thinking about how to best present a very messy, complicated data set. But ultimately my favorite part is something most people probably didn’t see: the fingerprints that appear on tablet-sized touchscreens as people scroll through the page, and fade away but don’t entirely disappear. I love the idea that we can use interaction to make people think about what it’s like to be spreading poisonous dust around with a touch.
Katrina: For me, I love highlighting great journalism. You let the text, images, video and interactive graphics tell the story, and just use design to create an experience that’s memorable, in a way that triggers your brain to remember the story later. And to echo Thomas, I also love the fingerprints — try it on a tablet!
[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.]