A Single Platform: Reimagining Hearst Newspapers

Overview

What started as a redesign of the San Francisco Chronicle in 2017 eventually grew into an effort to unite all of the Hearst Newspapers properties onto a single, flexible platform.

This was a huge undertaking. Hearst has newspapers all over the country. No two newsrooms work the same way, no two audiences expect the same experience, and no two websites employ an identical monetization strategy.

Our goal was to create a single platform that could:

• Improve the reading experience for our users

• Provide better storytelling tools to our newsrooms

• Unify page templates without sacrificing brand expression

• Maintain a profitable publishing business well into the future

Supporting multiple business models

In order to meet the needs of multiple content strategies and business models, we had to approach every element on the page as modular and dynamic: as pieces that can be disassembled and reassembled to satisfy an endless number of conditions.

Some of Hearst’s larger properties are primarily subscription-supported while some are strictly ad-supported, and others fall somewhere in between. So we needed a page model that supported flexibility along two axes: business model (subscription, ad-supported, hybrid), and user status (signed in/out, engagement level, propensity to subscribe).

We’ve begun developing a system that optimizes a page based on both revenue profiles and a propensity to subscribe model.

This modularity required a complex technical solution, but we still wanted to keep things as simple as possible for the editors managing the page. We needed to create rules and systems around shared UI elements to solve for all cases, with minimal manual overrides.

A good example is the masthead, for which I designed a flexible system to optimize what’s displayed based on business model, user state, and page type:

Article page toolkit

The replatforming of Hearst’s sites coincided with a shift in content strategy in many of the larger markets. SFGate paved the way for this transformation with a pivot toward local lifestyle content that resulted in a tremendous lift in engagement.

This was coupled with a pivot toward affiliate marketing to offset declines in traditional display advertising.

To help editors tell these new stories in new ways, and to lend support to an increasingly diverse set of revenue streams, we developed a toolkit of what we called “storytelling utility modules,” which fell into 7 categories:

1. Explainers - Supporting information (text or graphical) that informs the story but isn’t directly part of the primary narrative.

2. Commerce - Any opportunities for a user to purchase something

3. Utilities - Anything that adds functional value to the user experience

4. Callouts - Real-time alerts and updates about the story and the people or things it mentions.

5. Direct engagement - Opportunities for readers and editors to engage directly. We want our users to feel like they are part of a community and that their feedback is helpful and appreciated.

6. Recirculation - How do we encourage a user to continue reading?

Homepage as content experience

In the past, homepages and section pages were viewed merely as engines to drive readers to article pages. But we thought that to better serve our audience the homepage should be a complete content experience in itself. So we defined a list of “consumption moments,” prioritized them, and let that guide the layout of our homepages.

This represented a blurring of boundaries between design and content strategy, so this thinking proved useful in conversations with our editorial teams.

To actually populate these pages we developed a set of story packages, or “collections,” each to solve a different programming need. Some of these were more in service of our lifestyle-leaning sites (which tend to be the non-subscription sites), and some are more in support of our more traditional news sites. But every site has a slightly different audience and a slightly different approach to programming, so all are available to all sites, and automatically inherit brand attributes of whichever site they are placed on.

Theming

With the core design library in place, we still needed to make sure this shared platform could allow for brand differentiation. The design system itself included three themes, which could be further augmented for each market by way of color, typography, iconography, and photo illustration.

Results

We’re still in the process of rolling out this new platform to all of Hearst’s properties, but so far we’re seeing encouraging results. We’ve offered a cleaner experience for readers, a more powerful revenue engine for the business, and a shared platform that doesn’t sacrifice brand expression.

20+ sites have already been migrated to the platform and we’ve seen impressive growth in engagement, retention, and revenue. Over the next year the remaining Hearst Newspapers properties will migrate to this shared framework as it continues to develop. Stay tuned for more!