NBC IOS app
NBC needed to update their current app to include the new iOS adaptive views. It was previously built by an outside vendor, so the 4.0 update brought the code in-house and allowed us to make even more updates along the way.
At the same time we updated our process and moved off of Photoshop and into Sketch and Zeplin for a faster delivery and less time creating robust spec docs. Two years later the 5.0 update introduced a cleaner interface and a more optimal user experience.
ROLE: SENIOR UX | UI DESIGNER
TOOLS: SKETCH, INVISION, ZEPLIN, PRINCIPLE, PHOTOSHOP, INDESIGN, AFTER EFFECTS, XCODE, USERTESTING.COM
TEAM: 3 UX | UI DESIGNERS, 1 VP OF UX, 1 UX MANAGER, 1 PRODUCT MANAGER, 1 PROJECT MANAGER, 3 DEVELOPERS
YEAR: 2014 - 2018
4.0 ADAPTIVE REDESIGN
Before the 4.0 update - the app only worked in portrait mode on iPhone and iPad with video only in landscape. It also lacked elegant micro interactions that could delight the user.
INTRODUCING IOS SIZE CLASSES
The NBC designers and developers worked very closely to make sure all assets were updated to have the highest resolutions depending on their specific scale factors. Each screen in the app was recreated 5 times for each size class which allowed us to use Apple’s multitasking configurations such as split views.
5.0 REFRESH
With the 5.0 refresh we wanted to create a more premium look and feel. The interface was full of dark gradients and backgrounds before so a minor update was adding color as a reflection of NBC’s iconic peacock.
NBC App 4.0
NBC App 5.0 - Colorful background gradients included on every screen.
The Menu before lacked a Home icon and added confusion and friction for the user, the Peacock was meant to be the Home icon (similar to most websites). We redesigned the menu to include a Home icon along with labels next to all of the icons to end any kind of confusion. We took a look at other competitor apps and instead of having Settings in the menu, they had a “More” section which meant we could put other account related items within this screen.
To better understand our users and their needs, we created personal accounts to help with recommendations and let them favorite shows and episodes across multiple devices/platforms. Below are just a few of the userflows and screens created for the iOS platform.
