NBC News App

CASE STUDY

Process

The project began with a large, diverse group of stakeholder from around the news organization including editorial, product, research, development and insights. Our process was a version of the Google Design Sprint method combined with the Double Diamond design method from the British Design Council. Or sometimes it turns slightly sideways, as interpreted here by Pablo Stanley from Blush Studios, which is totally fine too. Sometimes amazing ideas come out of initial chaos.

A diagram of the Double Diamond", which shows how the team gathers and dispurses to work most efficiently while sharing insights, findings to create a common knowledge base.

Non-traditional team members report feeling greater ownership and responsibility when involved in the Design Sprint method. The different perspectives result in very creative ideation.

Hand drawn sketches on paper laid out on a tablet, showing various ideas that are quickly created to determine feasible user journies.

The team participates in describing as many ideas as possible. Then a few of those ideas are sketched showing the ins, outs, interactions, progression and desired results. This is useful in revealing conflicts or process failures.

From sketches came building blocks that would allow editorial a variety of ways to package various story lines, and topics.

A grey-scaled wireframe demostrating the image size ratios we agreed upon for the app.

Image Ratios

The repeatable hierarchy keeps content easily scanable.

a gray-scale wireframe depicting the placement of a link's image, headline and supporting content.

Heroes & Related Links

Large hero cells to support live or VOD videos, with support for related links in a more efficient use of space.

Carousel

A flexible, easy to customize component that can live anywhere on the cover or fronts.

Watch

A component to showcase VOD shows and talent .

Marketing & promotion

The marketing and brand groups added promotional pages as a destination for social referral and on-air call outs.

I started the sizzle reel as a storyboard with rough time marks and cuts. I then created an animated rough in AfterEffects to share across teams, such as Brand to get exact verbiage and marketing to help me select the best background music. Our post-production team took the storyboard and roughs I created and built it out with perfect timing and polish. It is used on the marketing pages at nbcnews.com and was in the AppStore.

Mid point updates, protos and demos

At the mid-point in our sprint, the team converged again to review findings and see rough-in of work-in-progress presentations. We also reviewed feedback from user testing I conducted with our researcher.

All throughout the refinement process I provided rough samples of interactions and behaviors for review and as prototypes for user testing. Ad behavior, swipe interactions, playback scenarios and navigation samples were just a fraction of the samples and tests created to validate design decisions.

Editorial Curation

The layout needed to be flexible to accommodate various news cycles and storylines. It also needed to be quick and easy for a very small editorial team of one. The new content packages were an enormous change from the previous fixed-layout app.

The modular system gave editorial the flexibility to showcase video in a number of ways.
Every package was able to contain any media-type and packages were able to be placed in any order.
Headlines could be overwritten, images replaced and options to show deks, bylines and timestamps were added. The evolution of the app and editorial tools still continues.

Product MVP, evolution and awards

The success of the app was defined in two ways. First, success in meeting and exceeding, the goals we set out to achieve, demonstrating user value:

Monthly conversion to video increased by 100%
Monthly videos watched / “video visits” increased by over 50% 
Monthly video starts increased by 150%

Second, NBCU along with Code+Theory won the Digiday award for Best Mobile Innovation of 2019.

Before: Layouts were fixed, editors didn’t have options to customize content or create alternate packages based on the current news cycle.

The redesign of the NBC News app involved a restructure of the stack, updates to the coding languages, new curation tools for editors and new mobile api. The design language was updated to complement a news design system we called Bento (you can read about it here). The restructuring has allowed editors greater flexibility for any storytelling situation while enabling brands to share content.

1 Product Manager

1 Creative Director

2 Designers

3 Engineers

1 UX Researcher

1 Mobile App Editor

TEAM

GOALS

Increase convertions to video starts
Increase video completion and page depth visits
Increase awareness of the full offering of content and media types
Convert the NEWS app tp the Bento Design System
Create a framework for expantion and scale