How We Did It: Economic Stimulus 101 on Amherst Wire

This post is a behind-the-scenes look at how the Amherst Wire team produced Economic Stimulus 101, an example of deep-information journalism in an online multimedia format.

>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

Economic Stimulus 101At 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.

1. Preparation

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.

Video editing

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.

Sketch 1 Sketch 2
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.

Banner design

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.

Organizing clipsUltimately, 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.

4 comments

  1. Andrew says:

    Great post Jackie. It was really interesting to read about the process into putting something of this scale together. Also gave me a chance to explore your site more: it’s a good one.

    I’m really impressed by the amount of work that the paper put into this. The videos, editing, design, etc. are all tremendous coming from a college newspaper.

  2. Well done. I look forward to working my way through the final result!

  3. Excellent perspective into developing a public resource, Jackie. I love seeing news sites focus on being informative cohesively. Often news sites, especially the online versions of my local newspapers, serve up news articles which are merely updates, as if to serve as a cohesive whole when these countless articles are collected together. This style may have worked on a newspaper press where space is limited, but it is not the way of the web and I’m intrigued to see news outlets embracing the web for the web rather than making it behave like another media outlet.

    I’m curious though, for your video previews, did you consider inserting the Vimeo player after a click? For example, if the user were to hover over a thumbnail, have an overlay with a play button in the center and some text, like “Click to play”. When the user clicks, rather than loading a different page, which many users might view as an obstacle, use a client-side script to insert the video player on the fly. Spice it up with some Ajax feedback (rotating something or other to let the user know the computer hasn’t forgotten about them), and you’ve got the best of both worlds–shorter barriers between users and your content.

  4. [...] We’ve also spoken with Jackie Hai and Richard Caesar of the Amherst Wire for a podcast, and Jackie wrote a post about their economic stimulus coverage. [...]

Leave a comment

You must be logged in to post a comment.