3 Brands, 1 System: The NBC News Digital Redesign
The full story of our massive, multi-brand redesign for 9 websites and 6 apps.
TL;DR
We have completed a huge redesign for NBC News Digital this fall. Over the last couple of months we gradually unveiled the complete overhaul of NBCNews.com, MSNBC.com and TODAY.com. In parallel, we created new mobile and OTT apps (soon) for these brands, as well. This is the second chapter of an 18 months journey, read the prequel here.
- All of these new experiences are built on a shared publishing platform and common design system.
- Our 6 smaller sites already use the new stack and look: MACH, BETTER, THINK, Left Field, Know Your Value and Global Citizen.
- For our audience and advertisers this means a more consistent and compelling experience throughout our network of brands. For us it means we can build, measure, learn and innovate faster and more frequently.
- Pulling off such a large, multi-property and multi-platform effort is hard and risky, but it delivers longterm benefits for all.
- Watch a quick overview and read the entire story below:
Here’s the full story…
In March 2017 we started a journey to redesign and re-platform every pixel at NBC News Digital — completely overhauling our websites, mobile and OTT apps for NBCNews, TODAY and MSNBC and creating several new digital verticals like MACH, BETTER and THINK.
Where we came from
Before we started, all of our brands had their own product strategy, visual design, user experience, technology stack, editorial tools, ads and analytics integration. We were often doing things three different ways and we were unable to quickly apply what we learned on one site to another. Our editors, designers and engineers could not cross brand boundaries. And perhaps most importantly, our audience and advertisers could not traverse our sites effectively. In short, nothing scaled. We needed a complete do-over.
So, here’s what we did
Instead of treating each of our brands separately, we created a holistic product strategy for the full portfolio of digital properties. The goal: continue to have clearly differentiated brands, but enabled by a shared technology platform and design system that would allow us to innovate faster and grow our business more effectively. (We actually started with our new digital verticals MACH, BETTER, THINK, as explained back in May last year.)
What we want to achieve:
- A product that offers better discovery and engagement for our audience, valuable solutions for our advertisers, and new tools for our journalists.
- A design system that creates strong and distinctive brands, allowing for scalable and repeatable variation, and best in class user experiences.
- A flexible technology platform shared across our news brands.
And the results?
At our core, we are a visual news organization so we always look to invest in new visual storytelling formats or approaches (as with Stay Tuned or NBC Left Field, both of which launched in mid-2017).
Our new product designs now better reflect this rich visual heritage and will unlock further ambition. We are introducing bolder and more frequent use of images, inline video playback and innovative new features like animated video previews.
In order to make this visually rich experience scalable across all screen sizes and flexible with any layout, all imagery will now be ratio-based. This means every image is a square or number of squares (1:1, 2:1, 3:2, etc). The result is both compelling and functional.
1. Bold new sites that flex with newsflow
Our most innovative feature is the ability change absolutely everything about the layout of our pages on the fly, in seconds. We abandoned fixed page templates in favor of ‘containers’ for a variety of elements. Think of it like Tetris: there’s a structure based on squares, but those sets of squares can be arranged as needed. To manage this flexibility we built our own tool called, appropriately, Curator. It’s a powerful layout and preview tool for editors to arrange page elements, select and place stories, and overwrite elements.
2. ‘Channels’ — the news topics YOU care about
In addition to traditional sections like ‘Science’ or ‘Tech’, NBCNews.com now has ‘Channels’, or broader storylines and themes that reflect the moment. But these sections won’t be static; rather, we’ll be able to frequently refine them based on the news cycle or audience interest. And of course these Channels are not limited to our website. Soon you will be able to subscribe to specific newsletters, mobile alerts and explore them in our new mobile and OTT apps.
3. High value advertising with low UX impact
By designing from the ground up with audience and advertisers in mind, we have achieved a more visually compelling and less taxing integration of content and commerce. Advertising is not an afterthought.
Ratio-based images and ads mean we can weave together a seamless page structure. We have introduced flexible ‘ping pong’ ads that can sit left or right of content and stick as you scroll, all without interrupting the user. Further, we have introduced new ‘immersive’ units that can break a page naturally and reveal an advertiser story. These units have significantly better viewability and produce higher engagement than our legacy placements.
For video ads, we continue to evolve the balance of user experience and advertising demands. To encourage exploration and content sampling, users do not get a new pre-roll every time they start a clip.
And beyond advertising, we have paid content, sponsorship opportunities and commerce integrations. Again, these are integrated into the design, reducing friction while remaining clearly identifiable.
4. Good looks
When you look at our new sites you will notice a visual design that is distinctive for each brand but shares common pallets of colors, fonts, and shapes. We are only releasing the NBCNews.com site today, but here’s a preview of the wider designs system across all sites:
- Logos: We are proud of our family of brands and want them to share a common base. We are using a common font married with the iconic ‘Peacock’ logo.
- Color: We radically simplified our color palette to a primary, secondary and tertiary color per brand. Plus, for NBCNews.com and MSNBC.com, the colors are actually the same but inverted. This underscores the editorial cooperation and shared fixation on the highest quality news coverage.
- Fonts: As with our digital verticals, the major sites all use the Founders Grotesk and Publico font family. Our news sites have sans-serif headlines and serif content fonts, while our lifestyle brand, TODAY, uses serif headlines for a more magazine-like feel.
How we did it
1. Collaborate, Co-Create, Co-Locate
Our digital verticals MACH, BETTER, THINK not only offered a way to test our approach, they also served as a sandbox for how we could resource a much larger project. Our collaboration with the design agency Code and Theory was crucial and so we extended that engagement. Instead of ‘outsourcing’ the work, we ‘in-sourced’ the agency to work with our product, design and engineering teams at Rockefeller Center. We even created a dedicated workspace to work shoulder to shoulder everyday. This enabled more trust, faster iteration, and better longterm sustainability.
2. Design with taste, validate with data
An ambitious reset does not start with data. It’s driven by creativity and conviction. Data comes next. Once we set a new baseline, we can measure success and iterate on the new creation. Throughout the redesign we did multiple user tests with high-fidelity prototypes and real content. Using tools like Principle, we let users test drive the site after every design sprint.
3. Deploy gently
The second half of validation comes with an incremental release. Rather then dropping an entire site (actually 3 sites) all at once, we are deploying ‘gently’. Starting with the article page we released every page type in small steps. This means we can monitor user behavior, ad performance, and segment editorial training. With each step we optimized and then scaled further. The homepage is done at the very end and comprises today’s ‘launch,’ but in truth, we are ‘launching’ since Oct 5, 2017, the first time our new article page was released.
4. Create one stack
As discussed in our previous post, we built an entire new publishing stack on top of our legacy CMS and content warehouse. First, we introduced GraphQL as a unified API layer allowing clients to easily query and consume data from our MongoDB based content warehouse. Second, we broke out the curation and layout of content on covers and fronts from the legacy CMS into a custom React-based app. Third, we built a new web rendering layer, also in React, and on-boarded all our brands and content types onto this layer.
We can now manage all of our brands through our custom curation tool and they all run as one single application. All components are shared and can be used by any brand and any page. Visual styles are used to give each brand a distinct look, but technically there is no difference between any of our sites. All updates and optimizations are now global.
So, what?
Our overall goal of the redesign is differentiation to drive loyalty and engagement in a competitive and crowded online news market. To measure our progress, we developed several indicator metrics that track specific advances, which together add up to broader objectives like ‘loyalty’. Here’s an early glimpse of what we see working so far:
- Audience engagement: the most substantial improvements have been around our video experience. Improved UX, playback performance, automated preview thumbnails and a new recommendation service have driven on average 15% higher engagement across our sites.
- Advertising engagement: our new designs have been created with natural ad integration in mind. Early data of those new ads shows a 14% higher engagement than our internal benchmark.
- Editorial flexibility and effectiveness: probably the biggest change overall has been empowering our editorial team with better tools. They can now re-arrange pages in seconds, and the Curator requires very little training, oftentimes less than 15 minutes. Even the creation of entire new sections or verticals can easily be managed in the tool.
Today’s beta release of NBCNews.com is the first of three major home page releases. Over the next few months we will continue to on-board TODAY.com and MSNBC.com. In parallel, we are also updating our native mobile and OTT apps. The second half of 2018 will be focused on content creation tools. This means changing and augmenting our CMS so that our journalists can write and produce features, data visualizations and real-time coverage seamlessly.
As you can see, this is a major step, but we are far from done! We are always looking for bright minds that want to help make amazing publishing products. If you are deeply passionate about innovating in the media industry, then check out nbcnewsdigitaljobs.com and come join us!
Thanks, Moritz
Credits
This was and still is a huge effort made possible by a dream team. Below are the product managers, designers, engineers, research and editorial partners that have been driving this ambition relentlessly for over 400 days:
- NBC News Product Management: Sarika Dani, Brett Mickelson, Phil Zepeda, Michael Small
- NBC News Design: Shezad Morani, Kriss Chaumont, Julie White, Brett Flora, Maria Fang
- 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 and the entire NOS and Web Operations teams.
- NBC News Editorial: Anna Brand, Matthew Grimson
- Additional NBC News staff: Patrick White, Anna Thomas, Dan Callan, Mary Ryu, Stephanie Eldridge
- 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
