Project Overview
For over a year, Code and Theory colocated with the NBC News team in order to quickly and efficiently meld ideas and iteratively push work out the door. With a blended product, strategy, design, and technical team, we were able to rethink and evolve existing paradigms.
Our efforts started on a small patch of digital real estate, and continued to grow as new ideas were either proven or scrapped along the way. We piloted this new approach with the launch of 3 new premium verticals: Mach, Better, and Think. Here, we were tasked with creating a novel design approach and visual language. The output served the multifaceted purpose of a premium aesthetic, intuitive functionality, and a space to house innovative advertising products. With such a scalable system in place, NBC News then had the ability to quickly spin up new verticals, like their original documentary site, Leftfield, in less than two weeks.
With our core concepts proven out, we expanded the design system to meet the even larger needs of NBC News’ flagship sites: NBCNews.com, MSNBC.com, and Today.com. We worked with the same range of disciplinary teams across each property to create and implement a shared future vision for each brand that, while unique, incorporated the same common system that had evolved from the three verticals. After the success of implementing a fresh design language and strategy, we turned our efforts to NBC News’ Snapchat Show, “Stay Tuned,” the first daily-news program of its kind.
Project Commissioner
Project Creator
Team
Code and Theory: Moritz Kettler, Sarah Ozdamar, Paul Simoneschi, Chenta Yu, Nicole Gavrilles, Marc Rabinowitz, Rafa Torres, Joe Crook, Chris Ewen, Juan Cortes, Adam Cantwell, Eric Willenson, David Whitely, Ben Berenston, Berkeley Bethune, Melissa Kim, Zvi Epner
NBC News Product Management: Moritz Gimbel, VP of Product & Design, Sarika Dani, Brett Mickelson, Phil Zepeda, Michael Small; NBC News Design: Shezad Morani, Kriss Chaumont, Julie White; NBC News User Research: David Torchiano, Jessica Mailloux; NBC News Engineering: Stephen Baldwin, Wayne Warner, Max Peterson, Michael LaBue, Kaitlyn Reese, Alex Fiuk, Imran Ansari, Anthony Baker, Joby Joseph, Walker Malling, Wilson Wang, Peter Symuleski, Jeremy Fletcher, Yasin Ali, Didarul Amin, Chaz Cheadle, Rohini Radhamanalan, Geetha Muthyam, Lakshmikanth Nagarajan; NBC News Editorial: Anna Brand, Matthew Grimson Additional NBC News staff: Patrick White, Anna Thomas, Dan Callan, Mary Ryu, Stephanie Eldridge
Project Brief
Create a highly flexible set of storytelling tools that highlight NBC News’ strong editorial voice and asserts their ability to deliver engaging and immersive original content to users.
In close collaboration with the NBC News teams, we stripped the existing editorial toolkit to its bare essentials and built it back up within the system we defined. Through this process, we created a modular system with a library of necessary page components that adhere to core storytelling and packaging needs. This approach enabled us to shift our focus to be solely on the narrative, and allowed NBC News’ editors to focus more on their writing and less on the execution.
In the belt-tightening world of journalism, monetization pathways take on renewed importance. To ensure we’d be keeping the proverbial lights on, we made a point to create variable monetization integrations that would enhance our design system without overpowering it. Examples of this can be found across our ad implementations, such as the Ping Pong units on the front pages, which switch dynamically from left to right on scroll, helping to combat ad blindness. We built everything with an eye toward a responsive future, complying with IAB standards while remaining compatible with legacy guidelines.
In the end, the onus of our broad strategic framework rested on re-kindling audience connection with NBC News as a bastion of news in the 21st century, thus providing a future proof, simplified system that grants the everyday stories of our world a new spotlight.
Project Need
As the media landscape continues its long march toward digital, we need to reconsider why, when, and how people consume their news. With the ever growing supply of bite size content consumption options available, we needed to simultaneously restate our value while capturing readers’ attention amongst competitors both old and new.
After working alongside stakeholders and digging into business requirements, the path forward led to a visually evolved system that was at once both striking and engaging, yet flexible enough to create a distinct look for each of their properties. To accomplish this, we had to create a system of functional building blocks that could elevate their extensive library of existing assets and evolve our understanding of how advertising could become an integral part of their storytelling.
With the goal of eventually expanding the project to account for all NBC News digital properties, we had to ensure our system would be scalable and flexible enough to adapt over time to the more intensive and custom needs across NBC News’ larger ecosystem.
The building blocks of this system consist of a robust central library of all the shared page elements and modules across NBC News’ digital properties. In creating each of these blocks, every design decision considered the implications of the various destinations and breakpoints across the spectrum. In order to be scalable at the onset, this system had to allow for a seamless delivery of updates, optimizations and new technology for years to come.
User Experience
Our main goal for the user was to create a visually stimulating interface that would path through all of NBC News’ offerings, increase page hits & impressions, and ultimately surface exciting content that may be missed otherwise. One of our biggest contributions came in the form of a personalized, cross-platform recirculation module that draws together all of NBC News’ digital platforms.
The redesign is distributing more traffic across all NBC brands within our news portfolio and Internal NBC News Digital internal sites referrals has increased by triple digits (+110%). More than 1M+ additional visits across all 3 NBCNews.com, Today.com and MSNBC.com
These referrals are also driving more video consumption with MSNBC visits driving 2x-3x the number of video consumption on NBC News than legacy site.
NBC News and MSNBC homepages are driving higher levels of video consumption on and off the homepage. MSNBC Homepage is converting more users to watch video on the homepage (+7%) and off of the homepage (+6%). NBC News Homepage is converting more users to watch video on the homepage (+30%) driving more video views off the homepage (+16%)
Project Marketing
N/A
Project Privacy
N/A
Digital - News & information
We all rely on digital services that broadcast or diffuse news and current affairs both locally and globally, keep us up to date with important information such as weather, warnings and hazards and allow us to quickly access information and reference resources.
More Details