NBC.com Redesign

The Challenge

In 2019, NBC’s site needed a visual update to feel aesthetically aligned with its redesigned TV and mobile apps and support content from multiple NBCUniversal networks.

The Solution

All core pages of NBC.com were visually updated with a modern, elegant UI that has increased engagement and made network content discoverable.

My Roles

I was lead designer for NBC.com UX/UI, including designing sitewide UX/UI patterns and guiding other designers. Deliverables consist of user flows, competitive analysis, prototyping, and developer handoffs.

The Smart Lead

A major component of the redesign was the Smart Lead, a hero section on the homepage that offers personalized content and directs users to to continue progress in a show or movie.

The Smart Lead intuitively directs user to unfinished episodes or the next unwatched episode in a season. Episode metadata is clearly displayed in Smart Leads, a nod to user testing that revealed specific episodic information is more helpful than episode summaries.

The Smart Lead features muted background video, which has been well-received by users and resulted in increased engagement compared to the previous design.

Discoverability Improvements

The NBC.com redesign focused on presenting content elegantly and enhancing discoverability across of content from a growing catalogue of NBCUniversal networks.

Network attribution logos are included on The original site design displayed content in collections of cards, but data showed that users don’t tend to interact with content deep into each collection. Instead, they tend to scan multiple collections to find something appealing.

To increase scannability, the redesign uses horizontal content shelves. Traditional card styling was replaced with modern tiles that allowed for more visual breathing room and eliminated unnecessary card UI. Network logos are included on all tiles to highlight content sources.

To further help users easily identify content, show and movie tiles were updated to display with poster-sized art, contrasting with landscape art for video tiles. All tiles display video previews on hover.

A New Home for Profile Management

A key component of the NBCUniversal apps and web experience is the NBCUniversal Profile. As the profile expanded out to numerous NBCUniversal networks, a centralized hub for settings was a necessity.

Settings that users needed include personal info, login credentials, and email preferences. A new site serves as home for these important settings, with particular UX focus on email preferences. With the large total number of preferences available from all networks, guiding users to the most relevant controls must be as frictionless as possible.

The Email Preferences page features accordion-style sections for each network, allowing users to focus on meaningful groupings of preferences.

Understanding which NBCUniversal apps, content, and email campaigns that a user engages with allows for auto-directing them to their relevant network section on page load. That network section is automatically expanded and ready to edit.

Flows were created that account for entry points from emails, direct navigation, global unsubscribing, and manual preference management. Accounting for all entry point scenarios allows for an experience that is tailored to user needs in any possible scenario.