Building a system and a style guide at The Marshall Project

  • May 26, 2016
Society for News Design

Winning SND’s World’s Best™ is no easy task and according to this year’s judges, “The Marshall Project has nailed every. Single. Thing.” That’s high praise.

And consider this — The Marshall Project, a non-profit news organization, launched less than two years ago in late 2014. The design/product team of managing editor Gabriel Dance, director of technology Ivar Vong and editorial designer Andy Rossback doesn’t take the praise lightly. If anything, my conversation with them in early May showed they’re fired up and ready to tackle the next set of questions.

What seems to set The Marshall Project apart — something that the World’s Best™ judging team of Brian Boyer, Matt Mansfield and Isabel Meirelles pointed to in their judge’s statement — is the holistic visual philosophy and user experience that runs deep across all the individual projects and platforms. Dance said that from the start the team was focused on building a system, “a philosophy dictating how the site would work as a whole.” Whether that manifests in colors, templates, and typography or UX and content management, there is consistency.

Take the much lauded “The Next to Die” project, which is the result of partnering with news organizations around the country to track upcoming executions. Much of the work was in the backend, creating a process for cooperating organizations to submit information. By combining the reporting of partner organization and data from the Death Penalty Information Center, The Marshall Project built a database.

NextToDie

With data at its core, the project’s design is simple by intention and magazine-like. It incorporates a countdown, stark silhouette and background color that changes as an execution draws near – all chosen, the team said, to bring visual weight while focusing on the humanity of the process. “To achieve that simplicity is a long process, having fewer things if often the harder thing to do,” Rossback concluded. And yet, even with this obvious shift in presentation, the project still feels tied to The Marshall Project as a whole due to its use of color, typography and structure.

The team built the site and its CMS from scratch, from the onset seeking solutions that would work in many iterations (including one-off projects). Dance, Vong and Rossback left room to evolve templates and style guides over time as new experiences, like the card-based system on the homepage or “The Record,” were introduced. The team handles both product and editorial. Vong notes, “it’s a force multiplier having us think about both sides.”

An example of how that came together is The Marshall Project’s newsletter, the first product that the team launched out of it’s internal aggregator tool. Dance points out that both the newsletter and later “The Record” evolved out of a simple proposition: “We realized very early on that we had smart reporters who read a lot. If we could harness what people are reading, what can we do?” It wasn’t designed to drive traffic but rather be a product in itself.”

SND judges took notice: “The newsletter isn’t just well-designed, it’s an excellent example of the kind of publishing that we all should aspire to – brief and useful, with way-pointing to deeper dives if needed. The email hosts cover their beats, not just their stories. It’s great to read, and informative even if you don’t click a link.”

The team acknowledged early on that their audience is narrow and often mobile, and focused on page-load times and cross-platform presentation from day one. For the newsletter that meant no images to help improve the email’s load time, and design that enabled the email to be as scannable as possible. After initial templating, the newsletter now self-formats as the editor selects the day’s stories. Because the project’s articles often have few or no visuals, much of the style guide relies on typography.

TheMarshallProject-iphone

The team designs with a mobile-equal philosophy. Rossback says he designs with the least amount of code to switch platforms, resulting in a fluid experience for the user wherever they are. “It’s hard to design mobile-first and have the experience look good on desktop.”

Our conversation returned again and again to design in terms of process and structure. Dance, Vong and Rossback say those systems contribute to better user experience.

The World’s Best™ judges picked up on that too: “The publication has an incredibly strong design language that works in every place it manifests itself … The Marshall Project is urgent and respectful, insightful and contextual. This is audience-first design, at its best, and in service of great, important, difficult journalism.”

Read the SND Digital World’s Best™ criteria and the full judge’s statement here: http://www.snd.org/2016/04/snd-digital-marshall-project-quartz-judged-worlds-best/.