We got a phone call on the evening of June 20 letting us know that Ezra Klein had landed a 40-minute interview with Hillary Clinton and that our design director, Kainaz Amaria, would be flying out to make photos. We took a deep breath and set a publish date two and a half weeks later, knowing this call was the start of the first project for Vox Media’s Storytelling Studio. This article is a peek at what went into this collaboration and what we learned.
First, take a look at the project:
- The interview transcript, with annotations
- Ezra’s essay about Hillary
- The Instant Article for the transcript (open it in your Facebook mobile app)
- The Instant Article for the essay (open it in your Facebook mobile app)
- The AMP version of the essay
- The video
- Ezra’s podcast
What were we aiming for?
Before we could begin on the work, our teams needed to establish a shared understanding of the story. What we had was an in-depth 40-minute interview with Hillary Clinton. One that existed outside the current political campaign. Ezra’s goal was to understand the Hillary Clinton that her colleagues and staffers know. Our goal was to create an integrated experience that achieved this.
We needed to draw the user in, guide them to dive deeper and make them feel like every piece of content was thoughtfully crafted, curated, and presented—and never dropped in as an afterthought. The design should support, and not distract from, the narrative. Every visual asset needed to move the narrative forward.
To that end, we treated assets deliberately and tapped into platform-specific capabilities on Facebook Instant Articles and Google AMP, so we could present a native experience to the user.
The process
Doing projects like this are hard. Locked-in deadlines. Embargos. Many contributing reporters. Design and development. Photography. Video. Podcasts. Multiple editors. Multiple platforms to consider. Process isn’t the sexiest thing to talk about, but having our ducks in a row was part of what made this project shine, and launch on time.
Being involved from the start. Our Storytelling Studio wasn’t handed a story after the reporting was done, then asked to package it up. We defined our goals with Ezra and team before they flew to Raleigh. We then reevaluated our goals once the reporting was done. We had Kainaz in the field. We talked every day, not just about the presentation layer, but about how the design, images, text and video moved the story forward and never tripped up the user.
Doing daily reviews. The Storytelling Studio and Vox.com held daily morning status and review meetings. We shared iterative design and build progress in each meeting to facilitate full transparency and accountability. We knew it was important to avoid "big reveals" with gaps in between, which tend to increase the chance of surprises and misunderstanding. In addition, all decisions were made in this meeting and circulated in email and Slack. The Storytelling Studio team then regrouped every evening to review work in progress, flag any blockers, and identify goals for the next day.
Building a strong design system. Knowing that copy wouldn’t be finalized until a few days before launch, we aimed to create a flexible system that captured type, color and mood, not a pixel-perfect locked-in design. Doing this allowed us to put the pieces of the puzzle together around the content, rather than having to rebuild from scratch to match a new story.
Thinking early about navigation. In addition to the main essay, we had video of the full interview, the interview transcript and several supporting stories. Rather than build a central spot where all the content was collected (such as a hub or homepage), we wanted the essay to stand alone as the central piece. Working with the Vox.com team, we leveraged a robust social media and marketing plan to promote the various components and linked smartly to keep the focus on the essay.
Designing for user flows. Even though we wanted users to dive into the essay, we knew we had to provide a way for users to navigate from the essay to the transcript—in case they wanted to dive deeper into the story, or perhaps read the transcript in lieu of the essay. This essay-to-transcript flow was an important one, and we wanted to prioritize it. After finding that text links were rarely used in select high-performing Vox.com features, we decided to create a more visual link design (pairing the headline with an image) for the essay-to-transcript path. And it worked—while text links from our past feature stories were rarely used, roughly 12% of views on the transcript started with an essay view, which fell in line with our goals of wanting to provide a route while still keeping the bulk of users within the essay experience. Our takeaways—identify and prioritize important flows, optimize links to support those flows, and know that not every link (or any component, really) needs to be treated equally.
Being incredibly organized. We had editor Susannah Locke project manage the editorial pieces, and Katie O’Dowd project manage the design and build. Together we set daily action items, outlined all deliverables upfront, and assigned roles to each task. Splitting this work enabled us to be efficient and focused, and Katie and Susannah kept in constant contact to ensure transparency and avoid duplication.
Trust. Checking egos at the door. Arguing for what’s best for the story and the user. Making sure everyone is heard. Defining roles and accountability. All of these are essential for collaborative efforts like this, because in every project there are dark existential moments of shear terror. Are we making the right call? Will this really come together? Are we thinking of everything that will go wrong? Will anyone care about this story? It’s natural, it’s part of the process and everyone makes it out okay - that is, if everyone trusts each other.
What did we learn?
Writing to the visual elements - whether they be images, graphics, video - is important. We didn’t just plop videos into the piece as supplemental assets. They were a part of the entire narrative and helped shape the final copy - like in this example.
Supporting many platforms is hard. We have to be deliberate about which ones we choose, and find ways to systematize and scale that distribution.
The essay far outperformed the transcript. In terms of sheer traffic volume, on our own platform and on other platforms. Of the more than 1M content views on- and off-platform to the essay/transcript, about 93% of users went to the essay and the average time on page (across all platforms) was around 10 minutes.
