WGBH News: Building a modern digital newsroom

WGBH News is a public media outlet serving Boston, New England, and the world across every medium imaginable. Isovera built a custom Drupal site to support their unique and growing news department where television stories end up on radio, radio pieces add a video component, and nearly everything is published online alongside even more web only content.

The Client

With 50+ full-time journalists and broadcast technicians that work across television, radio, and digital platforms sharing content and ideas, WGBH was looking to build a new platform for their news department that could be customized to support their cross-platform workflows and adapt to their changing needs over time. As a world class editorial team for public media, WGBH News needed something that would highlight and support the high quality content they produce, and be able to deliver the great range of content being produced by their partners at PBS, NPR and APM.

Eric Westby, Director, Digital Content at WGBH says that the news organization wanted to make sure the new site was something that would meet the needs of the editorial team with the following overarching goals;

  • Easy to use but full featured content authoring toolkit;
  • Allowed for editorial flexibility while maintaining brand and style integrity;
  • Performed well on a wide range of devices, network speeds, and could handle even the largest traffic spikes.

The heart of the story

As a media site the story is at the heart of what they do. Isovera worked with the editorial team to find a balance between flexible content creation and a clean consistent feel throughout the site. A solution was developed using a combination of existing Drupal functionality along with custom developed features that allowed editors to create content in a quick intuitive way.

Since stories can come from TV and radio we made it easy to place video and audio files front and center on the page. And because stories can evolve over time switching between media types is no problem.

Other key features that add to the flexibility of the publishing workflow include:

  • For peace of mind, post are automatically saved while editing so work is never lost.
  • Every update to a story is tracked so you know when changes were made and can always get back to an older version if needed.
  • A  publishing approval process that makes sure new stories are ready to go before they are published.
  • Scheduling allows stories to be published automatically at any time in the future.

Little tiny templates

On a modern responsive website, it is really hard to give content creators full control over the layout of a site. The range of different screen sizes in use today makes this a difficult task. Even if it was easy, it doesn’t always have the desired effect. All too often time is wasted “laying out” a page that in the end doesn’t contribute to the story being told or just does not look good.

At the same time, stories are no longer just a bunch of text with some images added to round things off. From video and audio, to image slide shows; embedded tweets, facebook, and instagram there are a plethora of parts needed to compose a modern story.

With that in mind, Isovera focused on making it simple for editors to add a range of interactive elements right into the rich text editor. By giving content authors a set of highly specialized “content templates”, they can now mix and match these templates to build pages. It is this kind of approach to breaking up stories into small chunks of content that The New York Times R&D Lab is calling “particles”.

Currently there are 7 native templates that are styled to match the design of the site. This means the overall design of the site can maintain a consistent look and feel. On top of that there are around 20 different types of embed codes from around the web in use. Putting those in their own little container simplifies the authoring process and reduces frustration often associated with getting them to show up right.

This differs from the common extreme approaches of letting people directly edit HTML markup on a page, which requires a deep understanding of HTML and Styling. This solution prevents breaking the entire page, or providing rigid page-level templates that require expensive rearchitecting when changes are introduced.

Making a site that works for everyone

Now that we had the content in place, we wanted to uphold the designer’s vision for the site while at the same time build something that was flexible enough to adapt to the broad landscape of devices in use today. This component based approach to creating content lay the groundwork for the site design. Each piece of content could be styled to look good on almost any device, even with a wide range of different components. This made both the designers and the editors happy.

But responsive design is not just about making it look good, you also have to make it load quickly on slower connections, and make sure the site stays up when breaking news hits. The Isovera team made sure we built the site with speed and efficiency in mind, using the latest technologies to keep load time to to a minimum.

More than just a website

Isovera leveraged Drupal and its extensive community developed module ecosystem to build a modern publishing platform that could deliver on WGBH News’ goals with room to grow. The development team partnered with design firm, Grey Market Digital to flesh out WGBH News organizational goals, design ideas, and workflows. The result is more than just a website. It is a multimedia authoring tool; It ingests and synthesizes content from around the web; It is an advertising delivery system; And it does this on any device for users around the world.

Key Modules Used: ParagraphsParagraphs ExtraMigrateFocal PointGarlic

Key Systems Integrated: NPR APIPMP APIDoubleclick for PublishersDisqusGoogle CSEGoogle Tag Manager