Today’s Civic lunch featured the digital team from the Boston Globe, led by Jeff Moriarty, VP of Digital Products. He was joined by Chris Marstall, Marck Chang, and Grace Woo. They’ve just launched a new standalone site for the Globe, spinning off from the Boston.com portal and its ubiquitous popup ads. It’s not a redesign — they got to design a newspaper site from scratch in the year 2011, and the benefits of having a blank slate are evident in their award-winning design (here’s more background on that design from some of its designers).
Like most things in Boston, the Globe has a rich history with many innovations throughout the years. Moriarty begins with Charles H. Taylor‘s prototypical content innovations in 1873, when the Globe added sports coverage, stocks, and many other sections that we now consider essential to a modern, family newspaper (and sections we may not expect today, like a separate section for women).
Boston.com launched in 1997, and is one of the largest regional websites in the country. BostonGlobe.com launched in 2011 to great accolades for its use of modern code and responsive web design.
The new design also came with a new paywall. The Globe’s strategy has been closely watched to see if a regional paper can convince online readers to pay for content (versus the New York Times’s success as an international brand). Three months after going live, the newspaper has acquired 16,000 digital subscribers, making it the most successful paid website launch yet in the United States.
Traffic on the new Globe site is much higher than anticipated. They’re seeing actual usage of over 1 million users a month, and two
distinct audiences have emerged. The newspaper audience skews older, with traffic spikes in the mornings and evenings as people sit down to read at length. Boston.com, meanwhile, is visited primarily by members of Generation X, who check it throughout the day, and is geared towards more page views, with photo galleries split across ten pages.
John Davidow of WBUR notes that there’s currenlty only one ad on BostonGlobe.com. It turns out that the Globe sold out of all of the available ad positions in their first quarter. Demand and pageviews have each been higher than anticipated.
A Portal or a Newspaper?
Before splitting the newspaper from the portal, Moriarty’s team researched customers’ brand awareness. Boston.com and the Boston Globe are both considered up to date, local, and community-focused. But readers like the Globe to be authoritative and serious, with a traditional journalistic mission, while Boston.com users expect a more dynamic, personal, and entertaining experience. For almost fifteen years, one website strained to reach both audiences. Many Boston.com visitors didn’t even know the Globe was associated with the site.
This led to the development of a two-brand strategy, culminating in a standalone site for the newspaper with its own paywall, which went up in November of 2011. Sports and other features are still free on Boston.com, but the 300 professional journalists in the Globe newsroom generally publish behind the paywall.
Surveys showed that paying readers wanted curation from editors, not a livestream of endless content. The hierarchy of news is important to paying customers: we pay for newspapers because someone else has done the thinking of what’s most important each day, and printed it on the front page in the appropriate size font.
But what happens to the portal?
Boston.com is also evolving: it’s still free, and still heavily advertised upon. Some Globe content still gets “unlocked” on Boston.com, especially sports news. Boston.com now features a Groupon-style Deals section and more e-commerce. Since the newspaper split off, they’ve expanded their selection of content to 50 additional sources other than the Globe. But Boston.com is still trying to figure out the new normal, now that the Globe has split off. What role is their for a regional portal site in 2012?
Responsive web design
The site was designed from scratch with the understanding that mobile is our future, and new designs and websites should adapt naturally to whatever size screen you’re using. This design movement was sparked by Ethan Marcotte (AKA unstoppable robot ninja) and his manifesto on the changing nature of web design.
In the Globe’s case, responsive web design meant building 6 different versions of the site, starting at 1200 pixels, and working down through traditional monitor sizes, the iPad, the Kindle Fire, and mobile phones (Report: 90% Of Waking Hours Spent Staring At Glowing Rectangles). The easiest way for a rookie to understand responsive web design is to go to the Globe’s website, grab the diagonal corner of your browser window, and drag it back and forth, watching the content magically realign at your whim.
The site also detects and allows for your device’s unique features like swipe capability and offline storage features. The goal is an app-like experience within the browser. The benefit is a single codebase to rule them all, not to mention that all of your traffic is going to the same URL, which has proven great for search engine optimization.
“So why doesn’t everyone build sites like this?”
It’s more difficult, still an emerging concept, and advertisement blocks pose challenges to the dynamic resizing. Like Google, the Globe team has placed their bets on the browser winning over apps in the mobile space, and HTML 5 has made more things possible.
Few sites have implemented responsive design this aggressively, so the Globe team came across some new challenges. They had 6 months and two development teams, Filament Group and Upstatement (and many working weekends). It’s still the most aggressive implementation of the responsive web design concept.
Future plans include making the site feel more app-like, and making offline use feel more natural. The Globe team feels like the browser lets them do most of what they want to do, as they don’t need deep integration into the device’s operating system.
The goal across the site is to let the journalism shine. They show us some nice shrinkable galleries and 360 degree exploratory tools, none of it using Flash.
A Playlist for News
The Globe team paid close attention to how users acted on the Globe website. They noticed that people have a habit of opening many tabs of stories they want to read, and then progressing through them, closing them as they go. This discovery informed the design of My Saved, a sort of playlist for news content. Users have saved 60,000 stories across the site so far.
My Saved was built using the somewhat obscure Erlang programming language and Mnesia database, which allowed for high performance across every page on the site. Facebook Chat was built using the same languages.
Social Media
The company’s collection of Twitter accounts, including Boston.com, the Globe, and its reporters, have grown from 300,000 to 600,000 followers in the last year. They send out 30,000 tweets a month, and using TweetReach, they estimate they reach 20 million accounts each month.
Two genres of tweets have emerged at the Globe. First, there’s people following reporters because they’re interested in the beat. Then there’s the tweet-of-the-moment at live events like the Whitey Bulger proceedings inside the courthouse, where cameras weren’t allowed. They sought to capture details of the experience, from what kind of shoes he was wearing to the nature of his interaction with his establishment brother. News reporters outside the courthouse ended up reading the Globe’s tweets on air.
The livetweeting genre has posed new questions about what’s appropriate for a news outlet to write, for example, at former Mayor Kevin White’s funeral. The procession might be fair game, while a tweet from inside the service would trigger a #toosoon tag.
Man, or Muppet?
Another transparency solution to courts barring television cameras comes from WOIO in Cleveland, where they’ve used puppets to re-enact transcriptions from trials. This leads to the obvious conclusion that we need a Bulger puppet, and likely a whole series of open sourced public figure puppet designs (see also: NMA News, Bradley Manning puppet show, and BBC’s The Hour). In some seriousness, Ethan notes, puppet lampoons work because it’s really hard to do TV reporting without video. You need actualities to be able to report an event, or it doesn’t get reported. Pastel court sketches don’t do very well on TV these days.
Data Journalism
Reporters like Matt Carroll have helped lead the Globe into the open data era. The Globe has produced data-driven investigations like Boston’s Worst Towing Spots. In a feature like this one, an investigative team might spend weeks on a story, where some of that time is spent developing the dataset. What starts with public government data might develop into Carroll doing a stakeout in Allston.
Another data-driven news feature is the Globe’s timeline of neighborhoods fragmented by public school divisions. As a parent in Boston, choosing a school for your child can be a stressful affair, as we previously learned from Nigel Jacobs at the Mayor’s Office of New Urban Mechanics. NUM’s approach was to dramatically improve the school lottery website, while the Globe built an interactive feature showing the radii of school districts with a neighborhood map overlay.
Other interactive pieces include an interactive audio piece where visitors can try their hand at a school spelling bee, and a timeline of occupy protests. The aforementioned paywall has made finding and linking to these features burdensome.
Competition Between Government, Journalists, and Civic Hackers
This brings up the question of partnerships, fragmentation, and who maintains civic apps once they’re built. Nick Grossman, Managing Director of Civic Commons, points out the Discover Boston Public Schools app built by Code for America, and wonders who will sustain the app. The Globe team responds that, as a newspaper, these questions generally interest them intensely, but only for a short period of time, while Boston.com and the government have different needs. The Globe is, however, hosting a hack event together with the Office of New Urban Mechanics in April or May. They’re also building their own MBTA app using the public data, and expect it to be one of the best available.
Metrics
The Globe also uses data to make intelligent decisions about content placement on the website. They have a tool that overlays clickthrough rates on the site, and as one might expect, their editors closely monitor these numbers throughout the day to determine which stories should get promoted. It has become “one of many data points that goes into the editor algorithm.”
The team lives by testing early and often. The My Saved feature came about this way, and user studies have shown that because BostonGlobe.com looks so much like a newspaper, visitors are often unclear that it’s being updated frequently.
Continuing Innovation
The website is live, but the Globe team is focused on innovating up, down, and across the chain of news gathering and distribution.
beta.boston.com showcases some of these experiments.
The Globe is planning a Hack Day Challenge with Mozilla, Harvard Business School, the Department of Urban Mechanics, and others in town. And, like other newspapers, they are welcoming relevant startups to make use of their surplus commercial real estate, with 10-15 free desks. “The more smart people we get in the room, both who work at the Globe and who don’t, the better.”
Realtime News
The overarching goal is to be ubiquitous across Boston, no matter what screen you’re looking on, in real-time. Chris shows us some realtime visualizations of Boston, some of them built by Grace Woo and the Viral Spaces group here at the Media Lab.
Grace also works in the Globe Lab. She took a real time feed of geotagged Instagram photos and gets them to pop up over a map of the city. The result is a very raw, honest window into Bostonians lives: People don’t necessarily know that their pictures are public when the submit them to Instagram. Tools like this replace the editor, and we see people’s self-reporting of their lives rather than breaking news: their new pants, their latest meal, live events.
The Instagram map has to account for the fact that people in different areas of the city produce realtime data such as Instagram photos at varying rates. The MIT section of Cambridge, for example, uploads far more frequently than less tech-driven areas of Boston.
The Globe team has also built what they call “tweets on a pole.” Six screens on a pole display what their people are discussing, what their competitors are saying, and so on (like Festivus, the pole sometimes displays grievances).
The team is looking at various kinds of data they can use to tell the story of Boston in realtime. They’re curating Twitter lists for individual events, such as a Patriots game. There are roughly 200 people in the newsroom, including a social media editor, who curates these lists.
Ethan brings up SwiftRiver, a system that tries to deal with multiple information streams when you have a rapidly breaking event. This platform is designed for an event in Syria with no one on the ground and 200 semi-anonymous incoming streams. How do we take the flood of information and weight and prioritize them?
The Globe teams imported Cascade from the New York Times Lab (the Times owns the Globe). It shows how tweets and other content proliferates across the internet. You see a tipping point where sharing explodes; “It identifies the needle of influential tweets from the haystack of mentions.” The Globe is starting to apply these features to advertising products, but they can’t go into detail on that yet.
More Fun Projects
Another project, Shim, allows you to load and view the same page on multiple devices at the same time. Node.js acts as a proxy that lets you take a bunch of devices and connect them all to one access point. They all stay in sync with one browser (click on a link on one, and all seven go to the link). As you may have guessed, this project was developed while building the six versions of the new website. It lets news producers quickly see how a layout might work on, say, an iPhone.
Given the significant advances they’ve made in the emerging field of responsive web design, someone in the audience asks if they’ve though about open sourcing the design. They have, and, as a for-profit enterprise, they’ve also considered commercializing it.
Paper Eye lets people share articles with their phone by taking a photo of the physical newspaper. You take a photo of the print headline, and it fetches the digital link for you to share. Grace tells us that Optical Character Recognition actually performed very poorly, so they’re simply matching the headline against a finite database of headlines. The New York Times is using Paper Eye now as well. It could defeat the ugly QR code, and serve as an in-between technology, for those Sunday mornings when you’re actively avoiding your laptop while you read the paper, but still want the link to the article you just read. I can’t find it online, but Grace has built similar technology with Travis Rich, Stephanie Yu, and Andrew Lippman with NewsFlash.
Journalists as Jacks of All Trades
Like other content industries, the news business has seen enormous fragmentation in devices and reading habits. Someone asks how the Globe manages where stories appear. On the production side, reporters are now writing stories with a web-first mentality. By default, stories now must include metadata and geo-coordinates. The first version of history is now written as a blog post, and may or may not go to print.
The editors have tried to divorce content creation from its final destination. At this point, that means ensuring that a traditional news article needs to have useful metadata, like location. Reporters now have to tweet, take video, write a story or blog post, and essentially act as jacks of all trade. The Globe has hosted trainings on individual skills as well as trainings on how to integrate all of these demands into your limited bandwidth at the scene of a story.
Local Expert or Global Citizen?
As a native Bostonian, growing up with the Globe every morning, I’m excited when I see the rest of the world linking to its content. By far the most common feature I see linked to elsewhere on the web is The Big Picture, the Globe’s high-resolution photoblog. But otherwise, the trend among newspapers is to focus on local content at the expense of global coverage (see, for example, this Media Standards Trust paper, which found that international reporting had decreased in every measurable way, while overall newspaper content doubled).
Bennie confirms that the pressure is on the side of writing for a more local audience. When information is available a tab away, are people going to turn to their wire story on Russia? Big Picture was an anomaly, as it was so early, and so good. The blog receives comments from around the world instantly after publishing a new post, as it features very global content
Ethan notes, from experience, that while it’s very hard to start up a global news service, the local space is also extremely competitive. But, he asks, don’t you lose anything in the long run by focusing mainly on local content?
Bennie responds that the world is a big place, and that “New England is big enough for us.” The Globe’s readers trust them to curate and deliver what they need to know. A traffic jam at six o’clock will be a big headline on Boston.com, but not BostonGlobe.com.
The Globe has withdrawn from foreign bureaus, and now considers their Washington bureau their best stab at contributing to international press coverage. They focus on areas of core strength, like former Massachusetts Governor (and now GOP presidential frontrunner) Mitt Romney.
Does it come in pulp?
The team says that the print edition of the Globe is here for the foreseeable future. Digital products have good margins, given that they’re not shipping dead trees around town, which is why the Christian Science Monitor moved entirely online. The Times and Globe still see demand for a print version, but may need to price it differently to account for the cost of delivery. The extremely recent shift in people being willing to pay for apps and websites is an encouraging development (their words), and one that might hasten the demise of the print edition (my words). As baby boomers pick up e-readers and tablets, print subscriptions might fall off beyond the point of profitability. The Globe saw 2 million visits from iPad users in January, representing 5% of Boston.com’s traffic.
(updated with a correction about the Globe’s Twitter followership)