NBC News App
(a look a few of the weeds in decision making process, which is by no means a complete list)
THE PROBLEMS:
A little deeper into the problems of the initial NBC mobile app: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.
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
THE PLAN:
The project began with a large, diverse group of stakeholders 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. 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.
Once or twice, a fuzzy objective would temporarily derail The Plan (as interpreted here by Pablo Stanley owner of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of chaos.
Ideation
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.
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.
User Testing
Because the design was intended to be used across brands (News, TODAY and Telemundo with a possible 4th brand off-stage) I ran usability tests across brand cohorts. I had users test individual components, small tasks, and end-to-end account creation. We also tested with various cohorts specific to either News or TODAY Show audiences. From the testing we learned how TODAY audiences responded to video with very different expectations, but were largely very satisfied to have an app focused on show content. 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 tokens, history, and activity.
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.
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 sketch of storyboard beats
Marketing sizzle reel
(audio is muted in this sample)
THE RESULTS:
2x
Monthly video conversions by app visitors increased by over 2x the previous app.
+150%
Video starts in the new app increased over 150%.
+87%
Percentage of new package variations regularly used by the editorial team.
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 look a few of the weeds in decision making process, which is by no means a complete list)
THE PROBLEMS:
A little deeper into the problems of the initial NBC mobile app: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.
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
THE PLAN:
The project began with a large, diverse group of stakeholders 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. 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.
Occasionally a fuzzy objective would force a few more rounds of review (as interpreted here by Pablo Stanley of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of chaos.
Ideation
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.
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.
User Testing
Because the design was intended to be used across brands (News, TODAY and Telemundo with a possible 4th brand off-stage) I ran usability tests across brand cohorts. I had users test individual components, small tasks, and end-to-end account creation. We also tested with various cohorts specific to either News or TODAY Show audiences. From the testing we learned how TODAY audiences responded to video with very different expectations, but were largely very satisfied to have an app focused on show content. 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 tokens, history, and activity.
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.
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 sketch of storyboard beats
THE RESULTS:
2x
Monthly video conversions by app visitors increased by over 2x the previous app.
+150%
Video starts in the new app increased over 150%.
+87%
Percentage of new package variations regularly used by the editorial team.
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 look a few of the weeds in decision making process, which is by no means a complete list)
THE PROBLEMS:
A little deeper into the problems of the initial NBC mobile app: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.
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
THE PLAN:
The project began with a large, diverse group of stakeholders 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. 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.
Occasionally a fuzzy objective would force a few more rounds of review (as interpreted here by Pablo Stanley of Blush Studios) which is totally fine too. Sometimes amazing ideas come out of chaos.
Ideation
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 yield consistent results. A combination of active and passive personalization driven notifications was preferred.
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.
User Testing
Because the design was intended to be used across brands (News, TODAY and Telemundo with a possible 4th brand off-stage) I ran usability tests across brand cohorts. I had users test individual components, small tasks, and end-to-end account creation. We also tested with various cohorts specific to either News or TODAY Show audiences. From the testing we learned how TODAY audiences responded to video with very different expectations, but were largely very satisfied to have an app focused on show content. 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 tokens, history, and activity.
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.
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 sketch of storyboard beats
Marketing sizzle reel
(audio is muted in this sample)
THE RESULTS:
+2x
Monthly video conversions by app visitors increased by over 2x the previous app.
+150%
Video starts in the new app increased over 150%.
+87%
Percentage of new package variations regularly used by the editorial team.
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