NBCUniversal Profile Login & Registration

The Challenge

The NBC app’s Identity solution was expanded to include 11 NBCUniversal networks. Updated registration flows had to clearly communicate the breadth of included networks and content while being flexible enough to work in any app.

The Solution

Informed by testing that won a 2020 UserTesting Illumi award, the updated NBCUniversal Profile registration flows helped grow total accounts to 20 million.

My Roles

I was Lead Designer for NBC's identity squad, responsible for user flows, UX/UI, research, motion prototyping, and developer handoffs.

UserTesting Illumi Award

In 2020, my team was awarded an Illumi award for qualitative work around the NBCUniversal Profile. The Illumi recognizes teams that “…inspire the world to think about human insights as a key ingredient for customer experience excellence, product and marketing innovation, and organizational success.”

Early Concepts & Testing

In early 2018, several rounds of early design concepts were created for how to message the NBCUniversal Profile family of networks and improve the sign up flow. Of those concepts, 3 were chosen for qualitative user testing.

Test Concept 1

This version kept the flow the same as what was in-market at the time, but used colors and logos to highlight the network app that the user would be in. Deeper information about included networks was displayed as part of the success message.This concept was also used as a baseline to compare against Concept 2 and 3, which were bigger departures from the in-market design.

Test Concept 2

This version split the registration methods and the Sign Up with Email form into two screens, aiming to create less cluttered and simpler flow. Art for the show that the user is trying to watch was also displayed in the header section. This would help provide visual interest and make the flow feel more personalized.

Test Concept 3

This version built on the updated flow from Version 2. Different from Version 1 and 2 though, messaging about networks included in the NBCUniversal Profile was presented at the start of the flow.

Users preferred the visual treatment of Test Concept 2, saying it was: “Reinforcement that you are in the right place.”

Testing Results

Users found Test Concept 2 to be most informative and pleasing.

Findings

The primary reason that users enter the registration flow is to access locked content. Since forms in any product are notoriously undesirable for any user, the header section of Test Concept 2 displays art for the show that the user is trying to watch.

Testing results were used to garner buy-in from the Product team and executives for building an updated design.

Note: At the time that this testing was completed, the company was not ready to move to a unified multi-network NBCUniversal Profile, so test findings were applied to the existing NBC Profile. In the interest of transparency, also note that while testing and initial concepts were done by me, I was not responsible for the resulting designs deliveries (as seen in the 3 screens above). All other work presented here is my own.

Progressive Disclosure & Additional SSO Methods

As originally released, the NBC Profile registration flow kept all sign up methods on one screen and prioritized signing up with Facebook. Testing found two valuable insights about this.

NBC users generally felt a sense of distrust with Facebook. Additionally, splitting registration methods and the Sign Up with Email form into two screens actually made the flow feel easier to users. Choosing a sign up method before being presented with the Sign Up with Email form reduced users’ cognitive load and made it look “…like it was going to be less effort.” (Quote from user test)

Amending the flow to use two separate screens also helped future-proof it from becoming overwhelming as it grew from two sign up methods (Email and Facebook) to four methods (including Google and Apple ID). To address discomfort with Facebook, the sign up methods screen now puts Sign Up with Email option first.

Support for 9 NBCUniversal Networks

In 2019, the NBCProfile made the official move to becoming the broader NBCUniversal Profile. This meant adding support for a total of 9 networks apps, driving total accounts to 20 million.

Support For 9 Networks

Inspired by learnings about a multi-brand account from user research, the UI was updated to with logos an content that were flexible enough to use in any NBCU streaming app. All content was dynamic, allowing it to automatically swap based on the network app or which show the user is tring to watch.

More Iterative Work

Other iterative improvements in 2019 and 2020 included adding support for signing in with Apple ID, improvements to how the UI displays on various screen sizes, form field styling updates for improved UX and accessibility, better error handling, and the addition of Peacock account sign up.

Accessibility Improvements

NBCUniversal Profile screens use a system of over 40 WCAG-compliant color presets that we created. The colors are applied to header backgrounds and all selectable UI elements. This includes buttons, form field borders, and check boxes.

Improvements

All text, logos, error states, and buttons on all registration screens were designed to pass WCAG contrast requirements.

Form field styling was improved with accessibility in mind. To ease cognitive load, fields have been simplified to use a “floating label” that eliminates placeholder text. This is similar to fields used by Google Material.

Many products use placeholder text to provide hints for what to enter into a field, but studies show that placeholders can cause user confusion. The combination of labels and placeholders can also become especially cumbersome for people with cognitive disabilities, especially in longer forms. The floating label style is aesthetically clean, requires low cognitive load, eliminates placeholders from code, and maintains visual field borders for accessible focus states.

To support NBCUniversal’s new streaming service, Peacock, specialized flows were designed that allow users gain access to the service when signing up for an NBCUniversal Profile.

55% Conversion Rate

If a user’s email address is not already tied to a Peacock account, they are given the option to quickly create an account with the same credentials.

These flows have resulted in total Peacock signups, outpacing projections by over 2x. 55% of users signing up for an NBCUniversal Profile also sign up for a Peacock account.

Custom animations were designed specifically to help the transition from NBCUniversal Profile screens to the Peacock screen feel as frictionless as possible.