[The Guts] Andy Rossback on designing The Marshall Project
The Marshall Project, a non-profit, non-partisan news organization dedicated to covering America’s criminal justice system, launched late in 2014. Here, editorial designer Andy Rossback takes us behind the scenes of building the site from scratch and developing the design styles that would set the right tone.
1. Where did you start when designing a site from scratch?
AR: Back in June, the team decided to build a content management system — now known as EndRun — that would that align with our editorial goals. We knew there would be a range of content — daily stories of different sorts, longer investigations, photo essays, interactives and a daily email newsletter to manage. We needed a CMS more flexible than what was out there.
Once that was rolling, Gabriel Dance, who leads our team, reached out to an awesome design firm called morel to begin sketching out the site. Keeping all our content considerations in mind, morel did an incredible job helping us solve a lot of the UX and really shape the personality of the design. They came up to New York a few times to workshop with us. They gave us a lot of great ideas for features we hadn’t necessarily been thinking about, which made it a very fun and collaborative process.
Once we finalized the design, Ivar Vong, our director of technology, and I spent about two months working with Gabe to build and integrate the front-end with EndRun.
We knew it was a bit risky building our own CMS, but ultimately decided it was worth it if we kept it very finely tuned to the needs of The Marshall Project. In that way EndRun is like a finely tailored suit. We’ve only started wearing it recently, but it fits great and has all sorts of thoughtful features.
2. How did you settle on your color palette and fonts?
AR: morel came up with the idea of inspiring the flavor of the site from the era of Thurgood Marshall, our namesake and the legendary Supreme Court justice. So, the feel comes from legal documents and stationery from the 1950s and 60s. We went through a lot of type configurations but eventually landed on Miller, Utopia and GT Pressura. The latter has a typewriter vibe while remaining very readable. The color palette (just barely off-black, shades of gray and Electric Red) stuck from the beginning. It feels serious and fits with our content.
3. Your site is very dependent on thumbnails, as are a lot of news sites these days. Did you have concerns about content coming in without art?
AR: For sure, criminal justice is a visually limited topic. We’ve actually done a lot better than we had originally imagined. That credit goes to Lisa Iaboni, our art director, who finds some pretty incredible art for stories that initially don’t seem very visual. That said, we’ve run a few stories without images. Our goal from the beginning was to build a site with beautiful typography that could carry the story when pictures couldn’t. We’re also interested in illustration but we’re holding out for the perfect story.
4. Why did you choose to put the story text on the right side of the screen?
AR: It’s consistent with the rest of the copy on the site — the stream at the bottom of stories, etc. I think the tendency on the web has been to flow the copy on the left and dump everything else (i.e. the ads) out of the way on the right. The right sidebar is where things go to die. Without any ads, we saw opportunity in having a sidebar to the left and putting it to use. It gives us a place to add small details like annotations, images, charts that might otherwise be an interruption to the reading experience or left out on the right.
5. Does your CMS allow for photos to be inserted into the story easily? aka Can a reporter or producer do it without a developer?
AR: We have seven different photo placements that producers can easily use but we can also create custom placements pretty rapidly. The CMS uses Markdown throughout. We use shortcodes for photo placements and pull-quotes, among other things. We’re constantly working to add more shortcodes to make formatting text and images easier. We also put HTML and SCSS into posts to quickly create one-off design solutions. Over time, these custom designs are extracted to shortcodes.
6. You have a ton of content at the bottom of your story pages. Walk me through how that idea came to be.
AR: This is what we call the “stream”: You can get to any story on the site from the homepage or any article page. As you finish a story, you enter the “stream,” a lazy-loading, reverse chronological list of all stories. Each of which, you can click to expand the story without leaving the page. There are a number of configurations for how a story can look in the stream based on the type of content it is or whether or not it has an image.
7. I love the fade animation that happens when you select a story under Features. How important were those small touches?
AR: So important that we spent many days building and rebuilding them. Luckily, Gabe has a really great sense for perfecting those details. They add some fluidness and personality but we tried to be careful not to over do it.
8. Are there design developments you plan on implementing in the future, maybe something you didn’t have time to get to before launch?
AR: The site is an agile product — we control our technology stack because it is a critical piece of our journalism. The technical team is all on the editorial side. We’re committed to pushing the software as our newsroom evolves. We’re constantly doing special treatments for stories and building new tools as we need them. There’s a lot of big stuff in the works, too. Stay tuned.
9. How did you plan for mobile users?
AR: From the start, we anticipated that about half of our traffic would come from mobile — and that’s held true. We wire framed and tested everything for mobile from the beginning. We continue to do so for custom presentations or graphics. That’s crucial for us.
10. What is your favorite part of the site?
AR: Coming up with ridiculous code names. We now have important features named after Taylor Swift and Michael Jackson songs. But really, the flexibility to write code into EndRun. It’s going to let us tell stories in ways they truly deserve and that’s pretty cool for our readers.
[See an awesome design project and want to know more about it? Send it my way! You can email me at email@example.com or find me on Twitter.]