How We Did It: Economic Stimulus 101 on Amherst Wire
>Why deep-information journalism?
The Internet is awash with information that is, too frequently, miles wide and only inches deep. News organizations add to the problem when they bombard readers with commodity news (only the “facts and updates,” says the AP’s 2008 study on news consumption, as opposed to depth and breadth).
Deep-information journalism is one way to balance out shallow coverage by providing context, background and analysis for topical issues. BBC’s Special Reports accomplishes this with a clean design that encourages exploration. News wikis are another promising development that would achieve a similar goal if implemented well.
Economic Stimulus 101: The project
At the Amherst Wire, we wanted to turn an analytical lens on the federal economic stimulus bill that passed last month and capture various aspects of the questions and debates surrounding it. We also hoped to frame the topic in a broader context including historical parallels and general economic theory distilled into simple terms.
To do so, we interviewed six professors (five in economics and one in entrepreneurship) from UMass Amherst and Mt. Holyoke College, edited the videos into short clips, and arranged them by subject in an online guide.
We did extensive research and planning before setting up the interviews so that we would know the right questions to ask. This was particularly important when tackling a topic as complex as the U.S. economy — we had a lot of ground to cover, but at the same time, didn’t want to stray too far afield.
During the preparatory stages, we compiled a FAQ about the stimulus package from students blogging for a journalism class. This gave us an idea of what college students were wondering about the bill and shaped some general themes that ended up in the final project.
2. In-person interviews
To land interviews with professors, we simply scanned department contact lists and sent e-mails to faculty whose areas of expertise lined up with our topic. Out of maybe twenty professors contacted, six replied saying they were interested. We sent our questions in advance to give them time to prepare, and then conducted the interviews in their offices over the course of two weeks.
Each interview lasted 30-45 minutes and covered areas the professor was most familiar with. We didn’t follow a strict Q&A format or ask the questions in any particular order, but let the interview unfold more like a discussion. We would be reorganizing everything in the editing room later, anyway.
3. Video editing
This was the most time-consuming part of the entire project. After capturing about 3.5 hours of raw footage in Final Cut Pro, it took approximately three all-night sessions between three people to cut the interviews into short clips for the web. The average length of each clip was 1-2 minutes, with no clip longer than 5 minutes. We intentionally kept the clips short and to the point, catering to the attention span of most web users.
Once exported, the clips were uploaded to Vimeo along with some basic metadata (professor and subject in the title, pull quote in the description). We chose Vimeo for their high video playback quality and because they have one of the cleanest embedded players around.
Around the same time we were cranking out video clips, I got started with designing the page layout.
4. Layout and design
I always begin my web design process with some sketches on paper. My first thought was to build something like a mindmap, grouping clips by topic and sub-topic in a nonlinear format.
But the information might be too hard to find that way. So we came up with a dashboard of sorts at the top of the page that would let users jump to the sections they’re interested in, using simple anchor links.
At this point, I usually open up Photoshop and start playing around with graphics, because once I have a banner in place, the rest of the page’s design and color scheme tends to fall into place.
The layout itself was hand-coded in CSS and HTML, using a single-column WordPress page template as the base. All editing was done from the WordPress admin panel, with copious amounts of page previews and refreshing to test the design before it went live.
5. Putting it all together
The final stage of the project was to plug all the videos into the page layout. This turned out to be easier said than done, as we ended up with more video clips than we knew what to do with.
Ultimately, we came up with a decidedly low-tech solution to organizing the 70+ clips into the proper categories and questions: cutting up little strips of paper, writing a clip’s title on each one, and moving them around on a table until every clip had a home in the final presentation.
From there, it was simply a matter of going from section to section, copying the embed codes from Vimeo into the source code and adding thumbnails and pull quotes.
We used the Shadowbox JS plugin, which supports multiple types of media, to achieve the lightbox effect for launching videos.
A note on usability
In the project’s initial release, the thumbnails were actually embedded videos that could be played on the page without needing to launch a full-size version. Vimeo’s elegantly designed video embed options made this possible, and we all agreed that this was a very cool thing to include.
Unfortunately, within hours after launch, we received reports that our feature was causing browsers to freeze up on slower computers. Loading dozens of embedded videos on one page was too resource-intensive for a large percentage of our audience, so we had to scale back to simple image thumbnails.
Lesson learned: usability and accessibility always trumps coolness factor. It’s a good thing to keep in mind for any multimedia journalism project on the web.