How NBC News designs digital products with the audience in mind

Over the past couple of months, a number of news organisations have announced they are redesigning their websites – The New York Times has been working on a redesign system called Vi, aimed at supporting faster publishing and a cohesive user experience across devices, while HuffPost (formerly The Huffington Post) is betting on visual, tabloid-style splashes.

On 31 May, NBC News also launched a redesigned version of its two newer digital verticals, MACH and BETTER, making them more flexible, visual and video-centric.

MACH, which focuses on science, innovation and 'big ideas', went live as a pop-up vertical in November 2016. BETTER launched in February to provide health, wellness and finance tips to readers.

As opposed to starting a redesign with its bigger brands, that are more well-known and have a larger audience for user-testing, NBC News decided to take on the verticals first and partnered with design agency Code and Theory. The entire process took about 16 weeks, including the development.

"I'm a big believer in designing with taste, vision and ambition but then validating that with data and qualitative and quantitative research," Moritz Gimbel, head of product and design at NBC News Digital, told Journalism.co.uk.

"If you're just doing it based on research alone, you often end up with a very narrow way of evolving a product."

When MACH and BETTER launched, under the old design, the idea was to get the newsroom going with content production and finding out what stories and formats worked with the audience.

The team knew from the get-go they wanted the redesign to focus on articles, video and slideshows. Templates were dropped, and each article page is now considered "a container" with different modules that can be moved around freely in the CMS.

They also had specific goals in mind that aligned with the editorial and business mission of NBC News: developing compelling video experiences and being able to measure the number of video streams; creating "depth" so that people who come to MACH and BETTER consume more than just one story; and, over time, building loyalty.

"If you look at an article page, whether it's an article, video, recipe, listicle, slideshow, it's important that it can be discovered in search and social, because sometimes people might only find content through search and then land directly on an article."

One of the minimum viable products NBC News is testing now is a feature that sends readers directly to the homepage when they scroll down on an article page, which allows people to "see the full breadth of content" available in that vertical.

"A lot of people use the homepage as click-through, so we usually put a bunch of headlines on the page and the intention is for the user to land and click something to go to a story.

"We want to add to that, especially for the very loyal homepage audience – we are going to explore ways of telling stories directly integrated into the homepage, so people will see more content without having to click through to it."

Designing based on just research can work if you are changing an existing product, Gimbel added, but the approach is different for newer verticals. The teams at NBC News and Code and Theory spent "a lot of time thinking about design in isolation", he said, while for a more mature product, it's wiser to "do design and development closer together."

"We had multiple versions of the design and we would review it with people on editorial, marketing and advertising, as well as engineering staff, but we didn't start building anything until we had a stronger consensus on what it should look like."

User-testing a product or even a story is an important part of the process, as feedback from readers can be useful to tweak and change features before the final development phase is complete. But being as specific as possible about the action you expect people to do – for example, interacting with a drop-down menu – often provides better results than just asking them to play with an interactive or give feedback on the entire look and feel of a news app.

Gimbel said NBC News uses its Specials section, which consists mainly of longform stories but with different user experiences, to test how people interact with a video for example, or an animation. The Specials team is a small group of developers and designers who "work quite autonomously" and experiment without "being constrained by scale".

"When you need to do something that can work across multiple products, everything has to be managed by the CMS, tracked with analytics, and have ad integration.

"So the specials are a way to tell really great stories and choose, and sometimes build, the right tools to tell those stories.

"Often, we will discover something that works for our audience that we then put into the wider design system and CMS."

The organisation is now monitoring how the redesigns are performing and how people are interacting with them, and using that to expand them further and to inform the upcoming redesign of its other brands, such as MSNBC, NBC News and Today.

"In news especially, our shows such as Morning Joe, Meet the Press, they have a very strong brand and we don't want to squash that.

"We want to empower them to have their own identity, audience and to play to their strengths," Gimbel said.

"That's a lot harder for creating consistency in design and efficiency in technology so we are trying to build a network that can accommodate all these larger and smaller, older and younger brands, in a way that they each can shine. That's the biggest challenge for us as a product team."

Free daily newsletter

If you like our news and feature articles, you can sign up to receive our free daily (Mon-Fri) email newsletter (mobile friendly).