experience and design
Artboard 2 copy 4@2x.png

NBC App - Apple TV

 
framed clip dark 2.gif
 

 

 

NBC App - APPLE TV

Duration:
2017, NBC Digital Entertainment

Summary
Redesigned the basic NBC app on the Apple TV to a premium look with intuitive navigation patterns, immersive heroes and delightful visual feedback. Maintained and enhanced the app after launch.

My Role

Lead UX and UI Designer
Took over leading user experience and design for NBC Apple TV project. Major contributor and managed designers’ day to day on supporting tasks. Designed for launch and feature enhancements based on user feedback.

Team: Director of UX, Lead UX and UI Designer, 2 UX and UI Designer, 1 Product Manager

Platforms
tvOS

Method and Tools
User and Market Research, Sketch, Zeplin, Principle

 
 
 

TASK

Lead in carrying through the design from first few concept screens to the entire tvOS app, adding major personalization feature enhancements.

 
 
 

BRAINSTORM & RESEARCH

Created competitive analysis, journey maps and charts. I worked on the onboarding, home and show home sections. Based on these I created a user type flow and a content collection flow. These later informed personalization enhancements post launch.

 
competitive analysis.png
flow for user types.jpg

The content collection flow maps out which show collections we would serve up to various user types to ensure engagement and video playback when they come into the app.

 
 

UI & designs

Once the look and feel was determined, it was quicker to jump into creating the actual designs for interest of time.

A lot of prototypes were created to communicate immersive and intuitive interactions. Often showing multiple options for some functionalities.

 
 

Home Screen

home all verticals giphy.gif
 

Incorporating moving video on the Home screen with the Live Panel and the Resume Watching Panel.

 
 
 

Each vertical on the home page scrolls through videos from a specific collection or show.

home vertical collection scroll giphy.gif
 

All Shows Screen

2-Shows_Landing_NavClosed_Current_Active_InF.png

Each show has an assigned background gradient that adhered to the show’s theme colors. I created a color preset guide with rules on usage.

Shows_03_MidScroll_Opacity75%.png

Show Home Screen

 

The Smart Tile within the Show Home was a major personalization feature that was added soon after launch. I designed the smart tile for our show home pages. The focused tile makes it seamless for our users to pick up where they left off — Resume watching an episode, displaying the next episode or next season where ever they are on the show.

Smart Tile dim gify.gif
Smart Tiles.png
 
 

Designed a lot of loading treatments for this page, here’s a favorite.

 
loading giphy.gif
 

Here’s some of the interaction and UI options presented for the “Add to Favorite” button.

 
show iteration 2 giphy.gif
 
show iteration 1 giphy.gif
 
show iteration 4 giphy.gif
 
 
 

I oversaw the design and interactions for the Search, Favorites and Authentication screens and did updates updates to the Live and Settings screens.

 
4-Search.png
search giphy.gif
live screen prototype giphy.gif
5-Favorites_ContinueWatching.png
 

IMPLEMENTATION

Handed off spec documentation to the developers as well as sat with them after designs have been applied to the builds. Spent a good amount of time for QA and Design Bug Bashing with the entire team to make sure we launch with no issues.

Specs.png
Specs 2.png
 

RESULT

A new NBC tvOS app that surely turned heads. We received good reviews on usability and honest feedback from our users but the initial response to the app was positive. We were not able to get some motion on the panels in until later but it was better late then never.

(Video is an Internal Promo Only)