CT Insider App
Problem
In early 2020, CT Insider was conceived as a way to elegantly weave together content from all of Hearst’s 15+ local Connecticut newspapers. It quickly became clear that Hearst’s existing app platform, which powered the apps in its 4 largest markets, would require an overhaul in order to meet the needs of this new, more complex product.
This presented an opportunity to audit the existing platform, identify key pain points, and make improvements that could benefit all of Hearst’s news apps, while standing up a brand new product along the way.
The original Hearst apps offered what was essentially a flat feed of stories, which left editors struggling to create compelling packages of news content.
Goals:
Consistency with website content packaging
More programming flexibility
Provide a level of customization for people who want news from specific areas or newspapers
Create flexible solutions that can continue to evolve as the product does
Benefit ALL Hearst properties
Solution
Story Cards
Hearst’s existing app solution did not support content packaging that corresponded to what was found on the websites. This had created a disconnected experience for users of both platforms, and headaches for the small newsrooms who were attempting to program content in both places simultaneously. This felt like a huge opportunity for improvement, and became one of my top priorities in designing this new product.
The first step was to redefine the atomic elements that make up a story:
Using those elements I then assembled a new set of core story cards.
Knowing that certain elements may become redundant depending on how a collection of stories was grouped, I opted for a “kitchen sink” approach whereby each card was designed with its maximum number of elements. From there, things could collapse as needed.
Collections
The next step was to assemble these cards into collections. A collection is a group of story cards plus a header. I determined that a collection can be organized in one of 4 ways: by publication, by topic, by publication and topic, or by neither. Depending on the organizing principle, certain elements of a collection’s cards would be shown or hidden.
When organized by publication the attribution badges become redundant, and are removed. Likewise, when organized by topic, the section headers (kickers) on each individual story are redundant, and so those elements become hidden.
Brand Badges
As Hearst’s first news aggregator app, CT Insider needed a way to indicate the source publication for a story. Since each publication’s logo followed distinct and incompatible design rules, I opted to create an abbreviated badge treatment for each brand. The intention was to provide just enough information to identify a brand, but not enough to disrupt the hierarchy of the UI.
Customization
One of the most notable ways in which the CT Insider app departed from Hearst’s other apps was in its ability to support customized news feeds.
I designed a “local” page, which prompts a user to select up to three newspapers to follow. This allows a user to toggle between the home experience, which includes more statewide news, and the local experience, which includes news specific to their municipality.
Results
The app has only been live for a short while, but early signs are encouraging. 42% of users who used in the first month returned every day, representing a lift in Hearst’s average app engagement.
Many elements of the CT Insider app have already been applied to Hearst’s other news apps, including a new navigation UI and a number of editorial curation tools.