NBC News App
(a few points about the decision making process, which is by no means a complete list)
THE PROBLEMS:
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 restructure allowed editors greater flexibility for any storytelling situation while enabling brands to share content and ads to be placed in smart, constructive areas. A brief case-study covers two different product launched - overhaul of an antiquated system and the next release to add features users had been requesting.
SCOPE
The redesign of the NBC News app involved a complete restructure of the tech stack, migration to modern coding languages, the introduction of new curation tools for editors, and a new mobile API. The design language was updated to align with NBC News’ new design system, Bento (you can read about it here).
GOALS
- Increase video starts and conversions
- Boost video completion rates
- Increase awareness of the full breadth of content and media types available
- Fully transition the NBC News app to the Bento Design System
- Establish a flexible framework for future expansion and scale
TEAM
- Product Manager
- Creative Director
- 2 Designers
- 3 Engineers
- UX Researcher
- Mobile App Editor
THE ACTIONS:
Highlight & promote NBCU’s expansive video content library. Allow editorial to package contents thematically with flexible visual presentations using the new layout system. Provide convenient localization features for end-users. Build a brand agnostic system that can be implemented across multiple properties.
Before
- Editorial curations limited to couple key areas
- 2 page templates for information display
- Few entry points to video
- Dated design language
- No real marketing plan
- Limited revenue opportunities
After
- Editorial Flexibility with content, layout and overwrites
- Multi-page templates to best showcase content types and enhance storytelling
- Featured videos with dedicated sections to represent shows and live coverage
- Design language and atomic system in sync with web and OTT platforms
- Marketing can key in on specific users, events, and topics
- Audio for broadcast shows and NOW channel
- Ads embedded in content, and as pre-, mid- and post-roll in a new video player
THE PLAN:
Ideation:A mature org knows that good ideas come from anywhere.
Multiple teams (product, marketing, engineering, data insights) gathered to pitch ideas, make sketches and kick off a direction we believed would have merit. The data insights team provided market research to help form our direction and resolve conflicting opinions.
The best of intentions:
Our process was a version of the Google Design Sprint method combined with the Double Diamond design method from the British Design Council. Occasionally the process would turn slightly sideways (as interpreted here by Pablo Stanley owner of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of initial chaos.
Reminders are always good.
The top feature inspired thinking about notification cadence, frequency, and inboxing. When mobile users are facing notification burn out, how do you determine “breaking” vs. “important” vs. “vitally” important. A push service that specialized in geo-targeting, and delayed sends kept the app from being a nuisnance.
Reminders are always good.
The top feature inspired thinking about notification cadence, frequency, and inboxing. When mobile users are facing notification burn out, how do you determine “breaking” vs. “important” vs. “vitally” important. A push service that specialized in geo-targeting, and delayed sends kept the app from being a nuisnance.
Pain Points
We interviewed editorial to learn what their current pain points were for the existing CMS. The list was massive, but it came down to layout flexibility, overwriting content (while retaining the originals) and selected automations.
Wires & Proofs
Using a few different methods across multiple sessions, we gathered ideas from various team leads to determine which features we should be moving forward with. The sample below shows sketches on notifications. Beyond push notifications, how might we introduce notifications in-app, and what would they be based on? From previous insights we gained on other features, I knew that relying on a user’s active personalization would not yeild consistent results. So a combination of active and passive personalization was preferred.
Initial ratio list (was expanded with input from Art and Editorial depts.
Examples of how image size and repeatable elements can set hierarchy.
Examples of editorial flexibility when displaying video content, a high priority for the new app.
Mobile CMS
Internal tools were built for the mobile app, none existed previously when 90% of the content was auto-fed by mobile APIs. The new internal CMS allowed editors to change layouts, overwrite copy, reorder and pin, and choose whether a component would be auto-fed or 100% manually curated.
User Testing
We tested across TODAY Show and NBC News app users. 78% of News app users responded overwhelmingly positively with the increased video access, and 62% were very satisfied that they could find everything about a storyline in one place. Both cohorts appreciated bigger images, and better organization. Users very regularly (in this case 87%) request customization and personalization. In future releases we began adding points of active personalizations, and found <20% of users actually used it at all. With this knowledge, we opted for passive personalization using ID tokens, history, and activity.
Marketing
Previous to the official launch we worked with Marketing and Brand teams to create an promotion sizzle reel. It was used at media events, with press releases, and as a Preview asset in the app stores.
The initial beats on the storyboard
Marketing sizzle reel
(audio is muted in this sample)
THE RESULTS:
+25%
Increase in avgerage videos viewed per video visit in NBC News app
+51%
Video starts across the mobile app portfolio increased from 9M to 13.6M
+20%
Increase in Monthly Active Users, from 920M to 1.1M
Hello!
I’m Lisa Wilkins, a user experience director, designer and product strategist. The Sonoran Desert is my home, and it inspires me everyday with it’s beautiful simplicity and underlying complexity. I’m adaptable, resilient, and nerdy which are qualities I weave into everything I do. I’m most proud of raising a son full of gratitude, training various equines, and spoiling a very good dog.
Let me know how I can help your organization.
Persuading pixels to achieve their maximum potential
NBC News App
(a few points about the decision making process, which is by no means a complete list)
THE PROBLEMS:
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 restructure allowed editors greater flexibility for any storytelling situation while enabling brands to share content and ads to be placed in smart, constructive areas. A brief case-study covers two different product launched - overhaul of an antiquated system and the next release to add features users had been requesting.
SCOPE
The redesign of the NBC News app involved a complete restructure of the tech stack, migration to modern coding languages, the introduction of new curation tools for editors, and a new mobile API. The design language was updated to align with NBC News’ new design system, Bento (you can read about it here).
GOALS
- Increase video starts and conversions
- Boost video completion rates
- Increase awareness of the full breadth of content and media types available
- Fully transition the NBC News app to the Bento Design System
- Establish a flexible framework for future expansion and scale
TEAM
- Product Manager
- Creative Director
- 2 Designers
- 3 Engineers
- UX Researcher
- Mobile App Editor
THE ACTIONS:
Highlight & promote NBCU’s expansive video content library. Allow editorial to package contents thematically with flexible visual presentations using the new layout system. Provide convenient localization features for end-users. Build a brand agnostic system that can be implemented across multiple properties.
Before
- Editorial curations limited to couple key areas
- 2 page templates for information display
- Few entry points to video
- Dated design language
- No real marketing plan
- Limited revenue opportunities
After
- Editorial Flexibility with content, layout and overwrites
- Multi-page templates to best showcase content types and enhance storytelling
- Featured videos with dedicated sections to represent shows and live coverage
- Design language and atomic system in sync with web and OTT platforms
- Marketing can key in on specific users, events, and topics
- Audio for broadcast shows and NOW channel
- Ads embedded in content, and as pre-, mid- and post-roll in a new video player
THE PLAN:
Ideation:A mature org knows that good ideas come from anywhere.
Multiple teams (product, marketing, engineering, data insights) gathered to pitch ideas, make sketches and kick off a direction we believed would have merit. The data insights team provided market research to help form our direction and resolve conflicting opinions.
The best of intentions:
Our process was a version of the Google Design Sprint method combined with the Double Diamond design method from the British Design Council. Occasionally the process would turn slightly sideways (as interpreted here by Pablo Stanley owner of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of initial chaos.
Reminders are always good.
The top feature inspired thinking about notification cadence, frequency, and inboxing. When mobile users are facing notification burn out, how do you determine “breaking” vs. “important” vs. “vitally” important. A push service that specialized in geo-targeting, and delayed sends kept the app from being a nuisnance.
Reminders are always good.
The top feature inspired thinking about notification cadence, frequency, and inboxing. When mobile users are facing notification burn out, how do you determine “breaking” vs. “important” vs. “vitally” important. A push service that specialized in geo-targeting, and delayed sends kept the app from being a nuisnance.
Pain Points
We interviewed editorial to learn what their current pain points were for the existing CMS. The list was massive, but it came down to layout flexibility, overwriting content (while retaining the originals) and selected automations.
Wires & Proofs
Using a few different methods across multiple sessions, we gathered ideas from various team leads to determine which features we should be moving forward with. The sample below shows sketches on notifications. Beyond push notifications, how might we introduce notifications in-app, and what would they be based on? From previous insights we gained on other features, I knew that relying on a user’s active personalization would not yeild consistent results. So a combination of active and passive personalization was preferred.
Initial ratio list (was expanded with input from Art and Editorial depts.
Examples of how image size and repeatable elements can set hierarchy.
Examples of editorial flexibility when displaying video content, a high priority for the new app.
Mobile CMS
Internal tools were built for the mobile app, none existed previously when 90% of the content was auto-fed by mobile APIs. The new internal CMS allowed editors to change layouts, overwrite copy, reorder and pin, and choose whether a component would be auto-fed or 100% manually curated.
User Testing
We tested across TODAY Show and NBC News app users. 78% of News app users responded overwhelmingly positively with the increased video access, and 62% were very satisfied that they could find everything about a storyline in one place. Both cohorts appreciated bigger images, and better organization. Users very regularly (in this case 87%) request customization and personalization. In future releases we began adding points of active personalizations, and found <20% of users actually used it at all. With this knowledge, we opted for passive personalization using ID tokens, history, and activity.
Marketing
Previous to the official launch we worked with Marketing and Brand teams to create an promotion sizzle reel. It was used at media events, with press releases, and as a Preview asset in the app stores.
The initial beats on the storyboard
THE RESULTS:
+25%
Increase in avgerage videos viewed per video visit in NBC News app
+51%
Video starts across the mobile app portfolio increased from 9M to 13.6M
+20%
Increase in Monthly Active Users, from 920M to 1.1M
Hello!
I’m Lisa Wilkins, a user experience director, designer and product strategist. The Sonoran Desert is my home, and it inspires me everyday with it’s beautiful simplicity and underlying complexity. I’m adaptable, resilient, and nerdy which are qualities I weave into everything I do. I’m most proud of raising a son full of gratitude, training various equines, and spoiling a very good dog.
Let me know how I can help your organization.
Persuading pixels to achieve their maximum potential
NBC News App
(a few points about the decision making process, which is by no means a complete list)
THE PROBLEMS:
This brief case-study covers two different product launches - an overhaul of an antiquated system and the next release to add features users had been requesting.
The overhaul 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 restructure allowed editors greater flexibility for any storytelling situation while enabling content sharing between brands. Feature users requested were prioritized and of course ad revenue opportunities added in to help keep the lights on.
SCOPE
The redesign of the NBC News app involved a complete restructure of the tech stack, migration to modern coding languages, the introduction of new curation tools for editors, and a new mobile API. The design language was updated to align with NBC News’ new design system, Bento (you can read about it here).
GOALS
- Increase video starts and conversions
- Boost video completion rates
- Increase awareness of the full breadth of content and media types available
- Fully transition the NBC News app to the Bento Design System
- Establish a flexible framework for future expansion and scale
TEAM
- Product Manager
- Creative Director
- 2 Designers
- 3 Engineers
- UX Researcher
- Mobile App Editor
THE ACTIONS:
Highlight & promote NBCU’s expansive video content library. Allow editorial to package contents thematically with flexible visual presentations using the new layout system. Provide convenient localization features for end-users. Build a brand agnostic system that can be implemented across multiple properties.
Before
- Editorial curations limited to couple key areas
- 2 page templates for information display
- Few entry points to video
- Dated design language
- No real marketing plan
- Limited revenue opportunities
After
- Editorial Flexibility with content, layout and overwrites
- Multi-page templates to best showcase content types and enhance storytelling
- Featured videos with dedicated sections to represent shows and live coverage
- Design language and atomic system in sync with web and OTT platforms
- Marketing can key in on specific users, events, and topics
- Audio for broadcast shows and NOW channel
- Ads embedded in content, and as pre-, mid- and post-roll in a new video player
THE PLAN:
Ideation:A mature org knows that good ideas come from anywhere.
Multiple teams (product, marketing, engineering, data insights) gathered to pitch ideas, make sketches and kick off a direction we believed would have merit. The data insights team provided market research to help form our direction and resolve conflicting opinions.
The best of intentions:
Our process was a version of the Google Design Sprint method combined with the Double Diamond design method from the British Design Council. Occasionally the process would turn slightly sideways (as interpreted here by Pablo Stanley owner of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of initial chaos.
Reminders are good.
A good reminder from data insights was that breaking news is still the most important feature to be refined. It inspired thinking about notification cadence, frequency, and inboxing. It also helped us narrow our focus on a set of features that would have the most impact for this launch (live video, audio, localization).
Present, not persistent
When mobile users are facing notification burn out, how do you determine which breaking alerts are “important” vs. “vitally important”. I assessed the use cases for a variety of notifications, and then sent those into testing and research to help define the limits of annoyance. A push service that specialized in geo-targeting and delayed sends kept the app alerts from being a nuisance. User preferences could also determine if they received the alert.
Pain Points
We interviewed editorial to learn what their current pain points were for the existing CMS. The list was massive, but it came down to layout flexibility, overwriting content (while retaining the originals) and selected automations.
Wires & Proofs
I set up the image ratio list and samples of how the images were used in various components. This was presented to the editorial team to ensure we had enough flexibility within each set of components. We were advised by the art department that the image ratios we included would fit their storytelling needs.
Initial ratio list (was expanded with input from Art and Editorial depts.
Examples of how image size and repeatable elements can set hierarchy.
Examples of editorial flexibility when displaying video content, a high priority for the new app.
Mobile CMS
Internal tools were built for the mobile app, none existed previously when 90% of the content was auto-fed by mobile APIs. The new internal CMS allowed editors to change layouts, overwrite copy, reorder and pin, and choose whether a component would be auto-fed or 100% manually curated.
User Testing
We tested across TODAY Show and NBC News app users. 78% of News app users responded overwhelmingly positively with the increased video access, and 62% were very satisfied that they could find everything about a storyline in one place. Both cohorts appreciated bigger images, and better organization. Users very regularly (in this case 87%) request customization and personalization. In future releases we began adding points of active personalizations, and found <20% of users actually used it at all. With this knowledge, we opted for passive personalization using ID tokens, history, and activity.
Marketing
Previous to the official launch we worked with Marketing and Brand teams to create an promotion sizzle reel. It was used at media events, with press releases, and as a Preview asset in the app stores.
The initial beats on the storyboard
Marketing sizzle reel
(audio is muted in this sample)
THE RESULTS:
+25%
Increase in avgerage videos viewed per video visit in NBC News app
+51%
Video starts across the mobile app portfolio increased from 9M to 13.6M
+20%
Increase in Monthly Active Users, from 920M to 1.1M
Hello!
I’m Lisa Wilkins, a user experience director, designer and product strategist. The Sonoran Desert is my home, and it inspires me everyday with it’s beautiful simplicity and underlying complexity. I’m adaptable, resilient, and nerdy which are qualities I weave into everything I do. I’m most proud of raising a son full of gratitude, training various equines, and spoiling a very good dog.
Let me know how I can help your organization.
Persuading pixels to achieve their maximum potential