3 Brands, 1 System: The NBC News Digital Redesign

Moritz Gimbel
Mar 22, 2018 · 9 min read

The full story of our massive, multi-brand redesign for 9 websites and 6 apps.

Image for post
Image for post

TL;DR

  • 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:
NBC News’ multi-brand design system

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

So, here’s what we did

What we want to achieve:

  1. A design system that creates strong and distinctive brands, allowing for scalable and repeatable variation, and best in class user experiences.
  2. A flexible technology platform shared across our news brands.

And the results?

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

Image for post
Image for post

2. ‘Channels’ — the news topics YOU care about

Image for post
Image for post

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.

Image for post
Image for post

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

  • 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.
Image for post
Image for post
Transitioning to a more compact 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.
Image for post
Image for post
Streamlining the color palette
  • 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.
Image for post
Image for post
Standardizing the font family

How we did it

1. Collaborate, Co-Create, Co-Locate

Image for post
Image for post
We converted the former NBC experience store Rockefeller Center into our redesign studio

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

4. Create one stack

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?

  • 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

  • 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

NBC News Digital

NBC News Digital delivers powerful, compelling and visually…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store