Overview

In June 2019, the NBC App launched a re-design that incorporated 11 of NBC's brand apps—including Bravo, E!, USA, SYFY, Oxygen, and Telemundo—with a consistent user experience across all apps and 10+ platforms. Upon its launch, the NBC App was recognized as "Best in Class tvOS App" and is referenced in Apple's Human Interface Guidelines for Navigation, Search, and Live schedule.

View here.

As a team of about 10 UX designers, we worked collaboratively across various features and platforms, utilizing a breadth of interdiscplinary skills. I had the opportunity to design UX/UI for cross-platform experiences—including iOS, Android, tvOS, Roku, Fire TV, and Web—using Sketch, Zeplin, Principle, Photoshop, and After Effects. Each of us were expected to administer competitive analyses on competing apps/services every quarter, conduct quantitative and qualitative user research, create and test high-fidelity prototypes, work closely with product team to track issues and design solutions for updates or bugs, collaborate with the marketing team to design app screens, icons, and other promotional assets for iTunes and Google Play stores, pitch design concepts to executives for approval, and detail spec docs and user flows to account for all scenarios and use cases.

Beyond our existing responsibilities and expectations, I specifically honed in on creating prototypes and sizzle videos for pitches, ad sales demos, and company townhalls (utilizing Principle and After Effects). Above is the sizzle video created for the June 2019 launch of the NBC App and brand apps.

Competitive Analyses

An ongoing job responsibility for launching and updating the NBC streaming apps was conducting competitive analyses of our competitors' new/updated products and subsequent features. Every quarter we would individually be assigned to conduct an analysis of a specific product, feauture, or interface. For the launch of HBO Max in June 2020, I presented a competitive analysis of this product (entertainingly in the theme of Mad Max) during our team's quarterly all-hands meeting of about 125 people. Contact me for more information on these decks.

Motion Design

In addition to designing static UI, one of my skillsets was to illustrate the movement of our interfaces when ideating, pitching, iterating, and delivering through high-fidelity prototypes. I was tasked to visualize movement of our interfaces across all our platforms (mobile, TV, and web). These were created using Principle and After Effects.

Below is an example of a prototype I created to conceptualize the movement within NBC App on tvOS. It shows the user navigating to the Networks shelf, where each brand has their own tile animation when in focus. The user then clicks into the Oxygen brand and is redirected to the Oxygen brand-landing page. A video background unique to the brand animates over their selected gradient color as the content floats and fades in. When the user hovers over the first tile, they are shown a video preview of that show.

NBC App prototype on tvOS

Another example below is a prototype I created for the NBC App on iOS. It visualizes the flow of a feature that I was tasked to re-design. The Previews shelf on mobile allows users to watch trailers of new shows, in the same vein as watching Instagram stories. The prototype shows a user tapping on one of these previews on the homepage. They then swipe through the previews of various shows before tapping on the Start Watching CTA, where they are then redirected to the video player of that episode.

NBC App prototype on iOS

In addition to prototyping UI transitions, I would also produce animation assets for both internal and external use. Below is an example of an animation I created to visualize the NBC logo transitioning to the logo for Peacock, NBC's new streaming service, using After Effects. To conceptualize this motion, I compared how the new Peacock logo related to the distinct NBC logo. It consists of a "spine" of dots that each borrow the colors from the NBC peacock rainbow. Mimicking how a peacock "fans out" its feathers, I imagined the NBC logo unfurling and the motion continuing to spin around as the feathers turn into dots that eventually stack onto its spine form. I went through multiple iterations and reviews to smooth out the motion and make it as seemless as possible. At its final form, this animation visualizes the relationship of the fresh product of Peacock to NBC as a distinguished brand.

Accessibility

Because quality UX is an experience that works for all users, an essential part of our workflow as UX designers was ensuring our designs followed accessibility standards outlined by W3C and NBCUniversal's Accessibility Director. The features I designed consciously followed these guidelines and would be tested and reviewed to ensure its usability. In addition, I worked on several features specifically created to enhance the accessibility of our products. This required an understanding of the complexities of audio, visual, or motor limitations, and the variants in user experiences for those with such disabilities.

For example, users who are tabbing through our website and/or engaging with screen readers are used to a pattern of navigation where a "Skip to Content" button exists that allows the focus to shift past the navigation options to the main content of the page. For NBC.com, I incorporated this Skip to Content pattern that appears when users first tab through the website.

Password Protected