New NBCNews.com focuses on storytelling

By Michael P. Hill February 4, 2014

Subscribe to NewscastStudio for the latest news, project case studies and product announcements in broadcast technology, creative design and engineering delivered to your inbox.

NBC News is readying to launch a complete reimagining of its online home, NBCNews.com, later today ā€” a retooling that focuses on converged digital storytelling, showcasing visuals and new advertising opportunities.

The relaunch, which has been in the works for over a year, marks a key milestone in the split of the MSNBC and NBC News brands online.

“We got our site back!” said NBC News presidentĀ Deborah Turness in a press event Tuesday morning, a statement that reflected the years-long process of slowly splitting the network’s online presences from its now defunct partnership with Microsoft.

Last year, the msnbc.com domain officially become dedicated to the cable network only, with NBC News reporting and show sites moved over to the nbcnews.com URL.

The switchover to the new site is expected to take place Tuesday evening ā€” a launch date that’s designed to allow the network to get the site online before the Sochi Olympics begin. It’s also worth noting that the launch will also, presumably, beat out CNN.com’s new site debut, which was scheduled for November but then delayed to an unknown date.

Julian March, senior vice president of editorial and innovation, emphasizes that the new site is not just a redesign ā€” it’s a retooling of the network’s approach to online journalism and storytelling, including a mobile first approach.

The new site is responsive ā€” and can adjust to varying screen sizes ranging from small smartphone size to larger tablets or huge desktop or interactive TV monitors. It also boasts “infinite scroll” throughout, where more content is automatically loaded when a user reaches the traditional end of the page.

On the editorial site, the network has made strategic investments and changes in the teams that drive the content for both on air and online ā€” with a focus on creating single teams that generate material for all platforms, as well as original video for the Web.

Advertisement

As an example of those Web only pieces, the network showcased two new video features that will be regularly included on the new site ā€” “Show Me,” an animated video feature aimed at giving viewers an easy-to-understand visual way to understand a complex subject, and “Debunker,” where an NBC News personality dispels popular misunderstandings about a current topic.

Behind the scenes, a new content management system driven by a custom API allows NBC News staffers to “publish once” for instant distribution across multiple properties, including the website and upcoming revamped mobile apps. The API also leaves open exciting opportunities for future expansion into new platforms and formats, noted March.

New story pages

nbcnewscom-2

The new story pages, meanwhile, offer the network numerous options for storytelling.

For example, the layout shown above features a large photo with headline and text ā€” a rather typical news page layout ā€” but staffers can also choose from, among others, a photo gallery-centric layouts or, as shown below, one that allows for social content embeds.

nbcnewscom4

Another key element of the new story page design is the “continuous consumption” feature where users, through infinite scroll, are shown related stories automatically when reaching the end of one.

NewscastStudio studio reported on a website design shift to certain NBCNews.com sections last July ā€” a move that was designed to allow the network to test the continuous story loading feature,Ā said March.

The results from that experiment “exceeded expectations” and fueled the importance of this feature in the final layout.

The new look

When visiting the new NBCNews.com, visitors will be greeted with a masonry-style layout of large visual blocks, mostly featuring imagery taken from NBC News video ā€” a key design strategy that the network hopes to use to showcase the powerful visuals produced every day by its journalists around the globe.

The header of the site, meanwhile, is incredibly simplified, with just the NBC News logo, a few links and social media buttons.

nbcnewscom-3

Advertisement

Hovering on the “hamburger” menu icon in the upper left of the screen reveals an expanded navigation menu that uses both text and visual elements to encourage users to explore the site.

Meanwhile, the navigation scheme gives a glimpse into another a strategy NBC News is actively pursuing ā€” content verticals.

The first of these, Latino, is launching with the new site, with others to follow later this year.

Despite the term “verticals,”Ā Gregory Gittrich, vice president of news and product, emphasized that the network is taking an integrated approach to these categories ā€” and will link to this content wherever appropriate from other sections.

Show pages

nn

The new site also includes a new look for individual show pages, such as the “Nightly News” example shown above.

Shows can also have modules on the homepage or section fronts that like to show specific content, a strategy that’s key to emphasizing the well known NBC News brands and personality throughout the site.

Advertising opportunities

Another key element of the new NBCNews.com is the inclusion of new advertising slots ā€” some of which will launch in the coming weeks and months.

In addition to traditional “standalone” banner advertising slots, the new design also allows advertisers to include messaging that’s more closely embedded in the page layouts, including within the masonry style layout.

Plans also call for parallax advertising features that will allow brands to harness powerful visuals that appear to be fixed behind the page as the user scrolls, as well as an advertising component that gives advertisers access to an entire row of blocks and includes animation.

The network also has plans to offer so-called “native advertising” that will allow brands, subject to NBC News standards, include advertorial content directly into the flow of stories and content.

[amzn]

Subscribe to NewscastStudio for the latest news, project case studies and product announcements in broadcast technology, creative design and engineering delivered to your inbox.