NBC App 4.0
In order to stay within the top of the App store. NBC needed to update their current app to include the iOS adaptive views. Not only was the app being updated, but the process of design and delivery was changing for NBC. Along with delivering designs for the video player and schedule, I worked on creating a new process using Sketch and Zeplin to reduce the number of hours on non-design tasks and allow the developers to get the information they need with our assistance.
Team Composition: 1 UX Director, 1 Product Manager, 5 UX/UI Designers
Company:
NBCUniversal
Project Type:
iOS App iPhone and iPad
Role:
UX/UI Designer
Problems with the current app
- Only worked in portrait mode on iPhone with video only in landscape
- Only worked in landscape mode on iPad
- Lacked elegant micro interactions
Learning iOS Size Classes
Working in the new iOS size classes was something that neither NBC's designers nor their developers had ever done before. I spent many hours having long conversations with developers as we tried to puzzle out how best to implement the designs based on the technical limitations being discovered.
By having an open line of communication with the development team, we were able to fulfill the requirements of the update and add many additional interactions.
Video Player
The video player was one of the areas of the app that had a lot of product requirements and a lot of functionality. Getting the hierarchy correct and the video transitions proved to be the most challenging. The user should never be confused as to where their focus should be.
IPHONE | VIDEO PLAYER
AFTER EFFECTS MOTION TEST | VIDEO
Additional Video Player Screens
Schedule
Schedule underwent the most interaction changes from the previous version of the app. While the user was still able to have continuous scroll through multiple days of programming, they were now receiving visual cues as to what time of day they were in. We figured most users cared most about Prime Time (after work) and Late Night programming. As the user scrolls, the background would change colors to reflect time of day as well as have bars labeled with the most important breaks in programming. We also added a loading animation to the schedule for that extra finishing touch.
IPHONE | SCHEDULE
PRINCIPLE ANIMATION | SCHEDULE
Additional Schedule Screens
Project Status: Available on iOS iPhone and Tablet
The app went live after I had left NBCUniversal to move to San Francisco. As you can see from the graph on the left, the day it went live saw an increase in ranking within the app store as well as a continued higher trend in ranking. I believe the addition of the new features to the app made at this time contributed to the app's success as well as secured its place against competitors within the marketplace.
NBC APP RESULTS