Mother Jones Goes Open Source

Welcome to the new Mother Jones. With any luck, you won't have much more of a reaction at this point than "Oh, that's nice." You, dear user, are blissfully oblivious to the hand-wringing, bitch-slapping, hair-pulling, and general angst that goes into a redesign. But perhaps you'll find it mildly amusing to learn why we decided to do what we did—and how you might get a better user experience out of it.

Why did we relaunch? The first answer is obvious—the look and feel of the site had worn out its welcome. We were sick of it, and we're pretty sure you were, too. At a deeper level, its constraints didn't match the extra reporting and blogging firepower we've built up over the past two years as we've dramatically expanded our in-house investigative team, including an eight-person Washington bureau. What you're looking at now is cleaner, less cluttered, and, we hope, far more inviting—a much better vehicle for the volume of fresh content we publish every day. It also has a more efficient software back end, which means that people here can spend more time on journalism and less on clunky code.

We also built it open source—in Drupal, specifically—which means that the basic code that runs Mother Jones is available to anyone, anywhere; we'll also put some of our custom work back into the public domain so other people can use it to build their own projects. That's a cool thing, and we think Mary Harris Jones would have liked it. (And if any of you Drupal coders wanna build an app for MoJo, that'd be beyond awesome.)

But we've gone beyond design and code improvements and tried to imagine a whole new way of using our journalism. Our aha moment came a year and a half ago, when we ran a story called "School of Shock," an exposé of an "educational" institution for children with mental and behavioral problems that uses painful electric shocks as punishment. As it happened, we'd just added very rudimentary comments functionality to our articles. Undeterred by the hideous interface (no threading, no paragraph breaks even), hundreds of readers registered outrage. You dug deep into the primary documents we'd posted, pulling out details from page 63 of some obscure court brief. Some of you defended the school; many more wanted to find a way to shut it down. And then you did something we'd never seen at a news site: You began to use the comments to post ideas about what to do, about how and where to take action. With no prompting or assistance, you organized. Before we knew it, investigations were launched in three states.

That's when the lightbulb went on. Whenever we've done surveys, one thing has always jumped out of the data about our reader demographics (you're a little more gender balanced than audiences of other political magazines) and lifestyle habits (you love wine and cats). And that is that you get involved—at a level that's far above average, whether by volunteering for community organizations or by actively participating in national politics.

We've shied away from playing to this trait directly—first, because that's really not the role of journalism, and second, because we believe you don't want to be told what to do; you want the information, and you'll take it from there. But "School of Shock" showed us another option. How about giving you the possibility of doing something about the stories we report on, not by hectoring or preaching, but simply by making the tools available?

The result is our new community system. It's a 2009-worthy commenting system—the ability to thread responses, to vote comments up (but not down, haters), to trick out your profile with an image/avatar as well as MoJo "flair" (want to brag about being a subscriber? We thought you would)—but with a truly unique twist: You can tag a comment as a "solution" or a "result." So, for example, if you think state regulators should investigate the School of Shock, you can let others know via the "solution" tag; if you've contacted the attorney general and gotten a response, you can post that as a "result." This will help readers separate action items from opinionating, and, in addition, we'll report on the suggestions you make and the results you get.

In the future, we'll be offering more options and privileges the more you interact with the site and other users. This is a group experiment, and how we build it out will depend on how you use what's there now and what you ask of us. Want social networking tools? The ability to chat? To add bookmarks or baby photos to your user profile? To aggregate the comments in some way we haven't thought of? Let us know. This is your tool. We can't wait to see what you do with it.

Okay, so that's probably as much as you need to get going. But for those of you who love to know the ins and outs of design decisions, now, as the consultants say, we get granular:

The crisp look of the site is the creation of Steve Lyons, a San Francisco-based designer who teaches at the California College of the Arts. He came up with the pencil logo at the top left (isn't a pencil kind of retro, you say? Yes, that's why we liked it) and picked the typefaces throughout: The nav bar and section headers are done in Relay, the body in Verdana, the headline in Georgia. Steve also coded the CSS (cascading style sheets) throughout the front end of the site. The back end, as well as the comments functionality, was built by EchoDitto, a Drupal-loving DC-based development shop that was started by a bunch of folks who helped put together Howard Dean's seminal Web operation in 2003-2004. Our in-house Web team—multimedia editor Laura McClure, developer and Drupal diva Céline Nadeau, webmaster Robert Wise, and producer Young Kim—was led by our media architect, Nick Aster, who was the CTO at TreeHugger and prior to that worked for Gawker Inc. It was Nick who spearheaded the project and found the outside designers and developers, and whose vision for how journalism can become solution-oriented drove the project.

Together, we took inspiration from a lot of other news sites—The New Yorker's crisp and gorgeous design, Slate's useful architecture, NPR's and the New York Times' clean presentation of massive amounts of content, as well as many blogs and aggregators. We asked whip-smart illustrator Harry Campbell to do the header illustrations for our blogs. We built a wide top story box that can accommodate the gorgeous illustration and photography we like to assign, as well as a new layout for our signature photo essays.

If you look at the top nav bar, you'll notice our three main news sections—Politics & Current Affairs, Environment & Health, and Media & Culture—are each associated with a color, and those colors are used throughout the site to show which "channel" you're on. On the home page, we've built sections to highlight individual contributors, in-depth investigations, interviews, and multimedia content.

On the right side of each page—and this gets back to our news-you-can-interact-with model—is a module called "Re:action," where you can see what other users are interested in—the most visited and most commented-on stories—take part in a featured conversation, sign up for our (awesome! free!) newsletter updates, and support Mother Jones' mission of nonprofit investigative journalism.

Because, in the end, that's what this site is really about. Journalism that you support. Stories that you want to take action on. How that happens is what you're about to show us.