It was noon on Wednesday, and development had just begun for the online component of “Make It Stop,” the Globe’s editorial statement on gun control that was set to run in Thursday’s paper.

Or so it seemed.

In reality, the newsroom development team had put in countless hours of work well ahead of time building tools and refining workflows to create a system that allowed for (extremely) rapid development. After what amounted to a 13-hour hackathon on Wednesday, we pushed the project to production at 1 a.m. on Thursday.

We’ll share some of the prep work that made this project possible, and we’ll talk about why we made the choices we did and what was left on the cutting room floor.

The Apps Environment

The story starts in late 2014. We built a project called Chasing Bayla that we were very proud of, but we found that we were spending a ton of time customizing and overriding features for it in our web/print CMS, Methode. We also had to continually update the project after publication as changes were made to our base article template.

The solution was to have a separate environment (“Apps”) that could pull content from Methode, but stand apart from it. The new Apps environment also allowed us to build a custom framework that would streamline our development process. And combining Methode compatibility with Google Docs (using ArchieML) allowed us to provide easy access for reporters and editors to make text changes. We also ported over and refined key pieces of our infrastructure from the main site, including image handling, analytics, and business needs such as ads and page metering.

Apps also includes a small, handy library of custom helpers for Stylus, the CSS preprocessor we use. It includes mixins, functions, and frequently used variables that we’ve added and iterated on over the past few years that help us with everything from typographical scales to vertical centering, to grids. Having these components in place gives us the mindspace to focus on the structure of the project, while automating the minutiae.

The templates and workflows of Apps have drastically improved our efficiency for custom projects. Without Apps, a project like “Make It Stop” would have been a more like a week of development for us. Instead we were able to create it in a single day.

From Idea to Execution in One Day

Our first step was to divide the work among the four of us. We knew that there were a few basic elements that we needed to design and build, and the Apps environment allowed us to develop each piece separately and then assemble them in whatever order we chose. We fired up the Apps generator and went to work.

The opinion/editorial team was beginning to flesh out the main points they wanted to make. Broadly speaking, they were: “How did we get here? Who is responsible? What can I (the reader) do?” As the plans for the print edition took shape, we thought and talked a lot about how we could answer these questions online in a succinct way.

A print reader could “browse” the entire print edition at her own pace, but the online presentation would necessarily be a more linear experience. This forced us to edit the information more tightly for online and think about different ways of telling the story.

A timeline, the first idea.

We decided on four main sections: a timeline, a brief explanation of the economics of the gun industry, a representation of how much damage an assault weapon could do, and the editorial statement.

Our first idea was to present a full timeline of events since the assault weapons ban expired.

Elaina began to implement the design, which was similar to what we ended up using in print. But the more we thought about it, the more we felt like the timeline was going to slow down the pace of the piece too much. We began to brainstorm about a more succinct way of summarizing the events that brought us to this point.

That’s how we came up with the first by-the-numbers animation:

Most of the animations in the piece were triggered to begin when they entered into view. Our earlier work paid off again as we used a simple JavaScript library that we had created months before for a (considerably less serious) project, “Star Wars by the Numbers”:

The second element, the comparison of gun revenue to the size of the Boston Public School system’s 2015 budget, mirrors what appears in print—although we again omitted some information to keep the pacing brisk.

(And yes, we knew there was a good chance we’d end up being featured on accidentalboobcharts.tumblr.com.)

Next came the bullet counter. In print (above), we used 45 bullet images that stretched across the two-page spread to represent the number of bullets that can be fired from a semiautomatic weapon in a minute. We felt we could create something more engaging online, and Gabriel came up with the idea of counting the number of bullets that could be fired in the time since the reader had opened the page.

The final, and perhaps most effective, piece that ran above the editorial itself was the presentation of six senators who could make a difference in gun control legislation by switching their votes.

We were originally going to introduce the senators before the editorial, then put the corresponding email/tweet buttons afterward. But we wanted to make it as easy as possible for readers to respond, and it felt more effective to let them take action earlier in the piece, even if they hadn’t read the editorial yet. It seems our thinking was correct: we estimate that readers generated at least 8,000 tweets through the buttons on the piece.

Once we had all the pieces in place and had received approval from our project leader, Katie Kingsbury, we were ready to push to production. Meanwhile, a certain senator from Massachusetts had already scooped us:

This is the cover of the @BostonGlobe tomorrow - & they are 100% correct. #filibuster #holdthefloor pic.twitter.com/wO1CicfoWk

— Elizabeth Warren (@SenWarren) June 16, 2016

We had an hour to test out the piece before we began promoting it at 2:02 a.m., the time when the Orlando shooting began. Our social media editor, Matt Karolian, had scheduled a series of tweets highlighting the names of people killed in mass shootings to begin at that time as well. There were no major problems, and we all went home to grab some sleep before the morning rush began.

The next day was a whirlwind. We watched traffic spike when a Boston native known for his role as “Captain America” tweeted:

This is important. Take the time to read it. https://t.co/wDb9PyQV1e #MakeItStop

— Chris Evans (@ChrisEvans) June 16, 2016

The #MakeItStop hashtag was used more than 11,000 times and climbed as high as No. 3 on Twitter’s U.S. trends list. On Facebook, #MakeItStop was the 19th most talked-about topic worldwide.

• Share on Twitter
• Share on Facebook