Kay Dianne: NBC News Redesign is On Its Way

NBC News is getting a new design! Read all about it! There are so many young people who may never get that joke, unless they like watching period movies. Well, much like humor itself, NBC News is moving with the Times (sorry), and building themselves a whole new design system, in conjunction with the external design agency Code & Theory.

The current NBC News site remains untouched, which gives us time to grab some good before and after screenshots. The new design system is currently being tested on two sub-sites — or “verticals” — called Mach, and Better. And I have to say, it’s looking good.

Like many other sites, NBC News is leaving behind the classic newspaper-esque visual theme in favor of something more modern. In fact, the new design system goes further than the tech-tabloid (techbloid?) style recently embraced by Huffpost, and straight into tech blog territory. Perhaps it even stretches into design blog territory.

The Current NBC News Site

Their new style places a stronger emphasis on imagery and video than the old one, presumably out of a desire to give context to every headline (and get more clicks). But no, they really doubled down on the video as well: they straight up developed their own HTML5 video player for use on their sites.

The Mach Vertical

Additionally, they have embraced a touch of asymmetry on both the desktop and mobile versions of their sites. They’ve gone for a streamlined and pixel-perfect variation on the increasingly popular “collage” look. In the meantime, they’ve actually toned down their traditional branding a little in favor of making each sub-site look like its own thing. This is largely accomplished through the heavy use of accent colors that are different for each vertical. That in itself is a nod to the peacock logo, but it also serves to separate their properties. The tech-minded vertical “Mach” goes for the classic deep blue, while the self-improvement and health-focused “Better” is accented in green. I find myself compelled to suggest a nice depressing brown for their political section, when they get around to it.

The Better Vertical

The typography is solid, and designed to scale to all screen sizes. The headlines are set in the beautiful Founders Grotesk Condensed, and the body text in Publico. These typefaces were chosen for legibility, and as I have yet to encounter any issues, I’d say they got it right.

The really big thing about the design, however, is that it’s meant to be modular, instead of relying on strict page templates. They want to be able to put any kind of content pretty much wherever they want to while maintaining consistent branding and style, so flexibility was a priority. Given the sheer variety of content a large news agency might have to include on their site, this is important.

They didn’t just update the look, they updated their whole process for putting news where people can see it

Now, does this design system live up to its aspirations? Well, like all design systems, it’s probably going to need some iteration, which is why NBC News made the very smart tactical move of testing it out on sub-sites. Still, looking at Mach and Better, and reading the stated goals for the design system in their Medium post, I’d say they got awful close. (Incidentally, they talk about their tech stack in that post; they use Drupal.)

The longer I look at it, the more I realize that the visual refresh is, perhaps, not the most important part of the redesign. They didn’t just update the look, they updated their whole process for putting news where people can see it. That said, I do love the new look. I might be biased, given how similar it is to some design and tech blogs, but I do.

I think this revamp is going to work out for them.

Sketch App Essentials (2nd Edition) – only $14!