NBC’S ONE APP – CONTENT CONSOLIDATION

UX DESIGN / UI & VISUAL DESIGN 

The Brief

Redesign the official NBC App for OTT, mobile, and web to include other networks in the NBCUniversal family of brands.

The current NBC App allows users to watch their favorite NBC TV shows anytime, anywhere! The app is available on OTT devices (tvOS, Roku, Android TV), and mobile (iOS, Android). Additionally users can sign on to web and seamlessly enjoy the same content. 


THE PROBLEM
While users enjoy the current app, NBC is thinking ahead in order to remain competitive. Collaborating with other brands under the NBCUniversal family, they decided to consolidate content and create “One App” which will allow users to enjoy multiple brands in one platform within their tv provider package. The UX team was challenged with how to present the new content in the existing ecosystem as well as develop new features allowing exposure to affiliated networks.
 
THE SOLUTION

Develop a premium product that allows users to see content and branding of the NBCUniversal family of networks, sort and search content by brand, receive feedback for shows not in their tv provider package, and browse live channels – all while maintaining a cohesive look and feel inspiring user delight.


THE PROCESS

Team: Gigi G (me), 1 VP of UX Design, 1 UX Manager, 2 Sr. UX Designers, 5 Mid-level UX Designers

Design Lead for 6 of 10 Features: All Shows, Show Home, Networks, Not In Package Messaging, Search, and Movie Home

My Role: Comparative & Competitive Analysis, Pitch Comps & Motion Prototypes, User Testing, User Flow, Wireframing, High Fidelity Comps, Specification Documentation, Delivery to Developers

Tools: Sketch, Excel, Powerpoint, Photoshop

Platforms: OTT (tvOS, Roku, AndroidTV, Behemoth), mobile (iOS, Android)

Timeline: Ideation April 2018, Pitch Reviews – November 2018, Soft Launch – April 2019, Official Launch – June 2019

UX PROCESS

In this project we were able to complete the UX process.

Step 1:
RESEARCH

Step 2:
DESIGN

Step 3:
PROTOTYPE

Step 4:
TEST

Step 5:
ITERATE

Step 1: Research

Product
Requirements
Competitive &
Comparative Analysis
Design
Strategy
Product Requirements

Working with the product team and shareholders we were able to roughly estimate the initial product requirements and scope of work. The most important addition to the app was new content, however the networks that owned the content also wanted to make sure their brand was not diminished and instead promote more exposure.

New key features of content consolidation included:

  • A Browse page where users could sort by Network.

  • A Networks page where users could see all available brands.

  • A Network homepage dedicated to an editorial collection of content from that brand.

  • A Live TV Schedule page where the user could browse and watch available channels.

Competitive & Comparative Analysis

The team was assigned different features to complete competitive and comparative analysis. I was assigned Networks & Network Landing Pages, and the All Shows page.

Networks C&C Analysis
All Shows C&C Analysis
Design Strategy

Next designers were assigned features to comp based on research from the C&C Analysis. I continued to work on the All Shows page, Networks page, and Networks landing. While keeping our key personas in mind, we worked closely with the Product team to ensure that ideas were feasible and could be implemented within the timeframe.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

User Research
Interviews
Persona
Design strategy
USER RESEARCH & PERSONA

In order to figure out the unique frustrations and needs of Ace Hotel’s ideal client I created a qualifier questionnaire to first target the correct market group, then surveyed the qualifying participants on their hotel booking experience. From the interviews I compiled similar insights to create the following persona, who portrayed the pain points and needs of an ideal user.

I took our persona, Eva, through the current websites booking process so we can empathize with her emotional journey and highlight her frustrations.

Design Strategy

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Step 2: Design

Feature
prioritization
Ideation
Sketching
Wireframing
Current Site Map Evaluation

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Layout Visual Comparison

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Homepage Design Solutions

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Step 3: Prototyping

Ideal user flow
Create
wireframes for
each step
Prototype
Test
Current User Flow

simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Step 4: Test

Ideal user flow
Create
wireframes for
each step
Prototype
Test
Current User Flow

simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Step 5: Iterate

Ideal user flow
Create
wireframes for
each step
Prototype
Test
Current User Flow

simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

GIGI GUITING

EMAIL
gguiting(at)gmail.com

Copyright © 2017 Gigi Guiting