Home Page Hero Layouts
The home page of news sites is the equivalent of the front page of newspapers, except this one can be updated as needed throughout the day. In our previous CMS, there was no real customization available, with the exception of breaking news. The editorial teams needed the freedom to highlight different qualities of stories with varying hierarchy depending on the kind of news happening that day.
In designing the customizable heroes, we looked at the competitive landscape of national news outlets and big media names. While we produced content with a very different focus, many of the NewsPublish users are also familiar with the other sites and have developed expectations from high-quality content. We also got some inspiration from new media outlets that wouldn’t typically be considered competition, but they have now grown to grown with staggering traffic. We researched what it was that made their content so successful.
The biggest conclusion that came from the research was the need for options and larger features of content.
Hero 1 (3×1)
This features a day-long event or story (weather, sweeps piece, major story) while also allowing a flow of newer, smaller stories on the side.
Hero 2 (1×4)
One primary story featured with secondary stories underneath with summaries. This design works best for high-quality photos.
Hero 3 (1×2)
Primarily designed for interior landing pages or rare situations with multiple breaking/developing news.
Hero 4 (1×3)
This features a day-long event or story (weather, sweeps piece, major story) while also allowing a flow of newer, smaller stories on the side. This layout is similar to Hero1, but this keeps the secondary stories to the right.
Hero 5 (1×6)
This layout features a main story, a secondary story, and a headline list. This works for days with several news stories.
Hero 6 (1×4 Headlines Only)
This hero layout is a trimmed version of Layout 4 – it removes the story excerpt from the display. It showcases one compelling story and four other stories. This hero configuration works well when all of your stories are on a single topic (Continuing Coverage with breakout elements).
Hero 7 (3×3)
This showcases a top story that is being regularly updated and five recent stories. This layout works best when you’re updating the day’s big story and want to surface more news of the day than allowed with Layouts 1 and 4.
Hero 8 (1×3)
Originally designed for the entertainment theme format, this layout features 3 main images and headlines only. This works well for lifestyle pages because the focus is on the images and not the written story.
The largest of all the layouts with 7 stories total. This works well for days with many good news stories with imagery. It tends to push down other content but engages users more by offering many options with imagery. When this was released, it quickly became the most popularly used hero layout because of the large features. Over 70% of the markets are using this as their new standard.
Breaking News Hero
This hero is designed specifically for breaking news situations. The bright red makes it unmistakably important and unavoidable.
Breaking News Hero
The additions of each of the options came about from assessing the needs of each market. Within days of launching Hero 9, it became the most popular hero among all of the markets. This was a risk for some of our advertising because the high amount of images and headlines pushes down one of our ad slots and the story feed below. After some use, the increased traffic to more stories made up for the placement shift.
The added features of allowing some primary slots to hold a live stream video for breaking news or severe weather also provided new opportunities for highlighting more video in times when it matters most. The variety of options also helps to balance this with the other stories being generated as information comes into the newsrooms.
These are screenshots of editorial teams using them on live sites throughout the country. All content in these screenshots was chosen and written by the editorial teams using my layout designs.