Beginnings

Q. For Amusement Only was released a couple of weeks after Snow Fall shook up the web journalism world, but your piece was clearly in the works before that started. How did the project begin?

Laura June, writer: The project began last spring when I started looking around NYC for arcades and realized how hard they are to actually find, even in New York City where niche things can flourish. We’ve been doing really detailed layouts for our feature stories since we launched in November of 2011. Some examples: Cyborg America: Inside the Strange New World of Basement Body Hackers, Condo at the End of the World, and The Dream and the Myth of the Paperless City. Our Vox sister publications, SB Nation and Polygon, have also done innovative longform writing and design over the past 12 months.

While I do think the Times piece is really great, it didn’t shake up our web journalism. Places like ESPN and Pitchfork have been doing great work like this too, long before the NYT did its piece. Nieman Journalism Lab wrote about all of us in November in The Future of the Feature.

Q. Why did this story in particular seem to fit this type of treatment? At what point in the development of the story did you decide to pursue it in this way?

LJ: We knew very early on that we wanted to convey a particular feel for the piece. The specifics of that changed a bit over time as the piece grew in length, but we always discuss and work on detailed designs for our long pieces as they’re developed. We’ve set the bar high for ourselves and are always trying to push it.

For me, the most important thing was that the layout not overpower the text. It’s long, so we felt like breaking it up with large images and quotes would give scrolling readers the space to breathe. When I look at it, it’s very roomy and simple. I think that is my favorite part of the layout: we didn’t overdo it.

Scott Kellum, designer: As someone who is too young to really remember arcades I needed a bit of a push in the right direction. I was exploring some early video game aesthetics as well as some old trade journal style designs but Josh [Topolsky, editor-in-chief] had a vision that had a little more of a carnival feel to it. I took this idea and ran with it making sure the whole site popped. With a non-responsive site, my biggest design challenge is breaking the box and making the feel of the piece fill the whole window, not just the column it is in. We have a number of technical tools for features to add points of immersion by taking over backgrounds and adding text effects.

Workflow & Collaboration

Q. Did the workflow for this project work similarly to other pieces you’ve produced?

LJ: It was the same—a collaboration between the writer (in this case me), the video team, the designers, and the editors who gave feedback along the way. We’re all very directly involved in every aspect of the production.

SK: Yes, absolutely. We work constantly to streamline our feature design workflow. Our technical tools include a collection of code “snippets” that include different layout components as well as a Sass editor that has numerous available mixins to help ease the creation of fancy effects like gradients and tweaking every aspect of the feature pages. As with any big feature we tackle, a single feature designer takes on the feature for about a week and reviews that with the feature editor, Thomas Houston, and the author.

Q. Laura June got the official byline, but the end credits include a whole team. How did the team work together?

LJ: We try to organize our feature stories through the editing team and have several other leads—in design and in video—who coordinate the project over the course of however long it takes. For pieces like this, constant communication is the most important factor, but it’s also important to trust that the people you’re working with are talented enough to do their work.

SK: Design wise our incredible intern, Tracey Chan, took a lot of the infographic and timeline stuff off my plate. As a designer, layout is already a lot to focus on and art direction and graphic creation can eat up a lot of that time and focus. Delegating these tasks made it a lot easier for me to focus on experimentation with the layout.

Q. Design work aside, how long did it take to report and edit this story, and to handle any bespoke tech elements? How many of these kinds of projects do you have under development at once?

LJ: Work began in earnest on the piece in late August and finished at the beginning of December, so about three and a half to four months. Almost all of that was really spent in research, interviews, filming, reporting, and writing. The design elements and layout took about a month. The piece was almost 100% finished a month before it was published, but scheduling was given priority to another large, timely project on America’s Doomsday Obsession tied to the Mayan Apocalypse and then to the Consumer Electronics Show.

We are generally working on two to three very large projects like this at The Verge at one time, sometimes more. In the case of this one, from August through December we published at least a half a dozen in the time that we were working on the arcade piece.

TB: What Laura said is true across Vox’s sister sites, Polygon and SB Nation, as well. We’re always producing several of our standard feature length pieces at once. We have been doing these for over a year and have been successful at developing tools and process to make these more efficient and more innovative. We are serious about making a sustainable and repeatable model out of this type of work.

Tech & Tools

Q. How did you account for different browsers and devices in the layout of this story?

SK: The foundation of the site is already well tested and the additional effects weren’t really that technically complicated. We were originally playing with gradient text masks but it had some browser issues so instead I applied a subtle halftone background over the text. The parallax stuff isn’t complicated either, it’s just ‘background-attachment: fixed’ on those quote boxes, which is supported on every browser we support. As a result of our code snippet system, which is already well tested, we don’t have to worry about testing on most features. The only cases where we might need to test are when we go outside the box.

Q. What technologies did you use to create the final project? Did you have to create anything that didn’t previously exist?

SK: Chorus, the publishing platform for The Verge and all Vox Media websites is the most instrumental tool. It is where our whole process comes together. You can read more about it here. We can preview the site on both desktop and mobile. Sass and Compass are used extensively within Chorus for features, and we can draw on all of the styles, variables, and mix-ins that were used to build the sites.

Q. Was this project created within your site’s standard CMS? If so, could you describe how you overcame any challenges with that approach?

SK:We hesitate to call Chorus a CMS as it is the publishing platform that powers all of our websites and content—our modern media stack. It provides so many fantastic tools. Chorus has code highlighting and everything needed for really digging in and creating compelling features.

Q. For writers and designers, how does the experience of using Chorus differ from other publishing systems? What elements does a “modern media stack” need to include?

Trei Brundrett, VP of Product and Technology: Chorus is different from other publishing platforms because it was designed from the ground-up with the storytellers and communities who use it. A modern media stack integrates rich storytelling, real-time news coverage, advertising and sponsorship, robust community, an emphasis on video and organizes it all around structured data to present it seamlessly across platforms and distribute it wherever our audience is. There are myriad tools for the editors, writers, moderators, ad operations, and of course, the users, to connect with each other over premium content and interesting conversations.

SK: The article/feature editor is not too different from other CMSes in that it has a text area with both WYSIWYG and HTML modes. However, the feature editor has “snippets” that can be used in both modes. Text and images can be flowed into these templated code chunks. If an editor wants to stay in the WYSIWYG mode and not touch code he/she can do that and still create compelling layouts. For some of the more complex features, code-savvy designers jump in and use the same tools in HTML mode.

I also haven’t seen a CMS with a stylesheet editor built into the editor panel. In Chorus, we have a built in SCSS editor with full Compass integration. The editor has access to all of the custom variables and mixins used to produce the site as well as custom mixins to aid rapid design of complex features. It’s really only there for designers to style things, not for editors, but anyone who needs to write a quick style has a dedicated place to put it.

Design & Content

Q. So many of the initial comments on the story marveled at the layout. What has struck you most about the reaction? Has the reaction differed at all between regular readers and readers drawn to the site for the first time?

LJ: People are always ecstatic about our layouts. I do think this is the best one, graphically, we’ve ever done, but there are a lot of other examples of great work we’ve done over the course of the year since we launched. I think this is an evolutionary step in our designs. It’s always nice to hear that we’re doing good work.

SK: It’s what I live for as a designer/developer to see work being appreciated. It’s also great to see the focus on what a great and well written article it was. So much effort was put into the writing, video, and other aspects of the piece and the point of good design is sometimes to be invisible and let the content really shine. Many of the comments mentioned how nice the page looked, noting that it enhanced the legibility of the piece. It’s great to hear that and makes me feel like I accomplished my goals.

Q. The post includes a short video documentary, could you talk about the role of video as a counterpart to the written story?

LJ: The video tells a slightly different narrative than the written piece. Both can stand alone, but, if you’ve read it, most of the people quoted in the piece also appear in the video. It’s really important for us to do different things in our videos than we do with our writing. Because video is a long process, we began shooting last August, when I was still in my research phase of writing, so in some ways, the interviews we filmed informed the entire piece.

Billy Disney, video director: I like to think of the beginning of the filming process as the first real-world test for what a feature is trying to say. We have a nugget of a story idea and now we’re suddenly in its natural habitat. When we ask a question, are we getting the answers we’re really fishing for? How does the location color our understanding of the subject? Do our ideas still feel authentic?

Our initial batch of interviews was all before a first draft of the written feature even existed. From there, the video and the written piece were developed in parallel. Laura’s editorial perspective helped shape the video’s narrative, and the video helped inform the written piece by initiating face-to-face interviews and journeys to places like a warehouse full of decaying arcade machines that—while great for b-roll—was also a great place to go and really reflect on what has happened to arcades over the last 30 years.

Q. We noticed that this feature has a TOC, which some of your earlier big features didn’t—are you finding ways to make other usability improvements as you go?

LJ: The Table of Contents has been used as far back as May of 2012. It first appeared in our Scamworld feature.

TB: We’re always looking for ways to create a better ways to tell stories and give the reader a more immersive experience - including designing our features to be responsive on Polygon and SB Nation.

What Next?

Q. These very designed, often multimedia longform features have been with the Verge (and other Vox Media properties) from the start. How did your team decide on that approach? (And does the increase in attention to the format after “Snow Fall” open up any interesting opportunities?)

TB: These kinds of longform features were important to us from the get go across all of Vox Media. We’re able to produce a good number of these because weve learned to do it efficiently through collaboration and custom designed tools in Chorus that we’ve honed based on our experience.

We’ve found that they’ve really helped grow our audience and have a real appeal to advertisers. They draw an appreciation and awareness to the content that illustrates that our media properties are serious about premium storytelling online. We invest in these features because we believe the design and layout should support the quality of the writing and video.

What’s next? Will we see more stories like this? Will the response to this story inform work across the Vox Media network?

LJ: This story wasn’t that different from most of the longform work we’ve done. We’ve done huge layouts with a lot of text and long videos over the past year and a half.

We have a good track record for doing these types of stories, and the reaction to them has been overwhelmingly positive, so the plan is to continue doing them and to try to find new ways of telling stories. We have a very organized process for working on them at this point, so we’ll just keep going with them. The other Vox sites, Polygon and SB Nation, have also done great longform design work. Polygon just published a beautiful feature on finding the voice of Disney’s original character Oswald.

SK: We are constantly evolving our features and this is just the latest. We have had great features in the past, and we are constantly building our toolset to make it even easier to build these kinds of compelling features. You will definitely be seeing more of this kind of work from Vox Media.