top of page

Work

NBC.com
Web Experince

Overview

NBC.com aimed to enhance its digital presence by delivering a seamless, engaging web experience for its diverse audience. This project focused on modernizing the design to align with NBC's brand identity while addressing usability challenges across its content library. By prioritizing both aesthetics and functionality, we sought to create a platform that delighted users and supported NBC's business goals.

Project Duration

March – May 2014

Product Statement

The revamped NBC.com is a dynamic platform designed to bring viewers closer to their favorite shows and live TV content. It combines intuitive navigation, robust search capabilities, and an engaging interface to ensure users can effortlessly discover, stream, and interact with NBC’s rich entertainment offerings.

Goal

Our primary objective was to create a responsive, user-friendly web experience that balanced NBC’s iconic branding with modern usability standards. We aimed to improve user engagement, simplify content discovery, and ensure the platform worked seamlessly across devices, driving both viewership and user satisfaction.

My Role: Visual UI/Product Designer

As the UI/Visual Designer, I was responsible for crafting a cohesive visual language that adhered to NBC's brand guidelines. I designed interactive components, established scalable design patterns, and collaborated with cross-functional teams to ensure the final product resonated with users and aligned with the project’s goals. My role also involved creating detailed visual assets to guide the development process, ensuring pixel-perfect execution across all touchpoints.

Design Process

Research and Discovery

Due to the urgency of putting out the new and updated web product, we set up week-long sprints to expedite the discovery process. Grouped together in brainstorm sessions the product design team came up with the following design principles for the new NBC web experience:​

1

Clear: Simplify the interface to clarify relevance.

2

Direct: Communicate with purpose and tell meaningful stories.

3

Impactful: Ensure every element contributes value.

4

Emotional: Build a narrative that resonates with the audience.

5

Engaging: Foster experiences that encourage users to return.

6

Holistic: Design with a responsive approach for all platforms and devices.

Data analytics drove requirements which called for a new site structure with streamlined user experience optimized for 1280 desktop viewpoint, with larger images and simplified interface.

NBCU-Site-Color-Portfolio-HereToHereA-4x1.png
NBCU-Site-Color-Portfolio-HereToHereB-4x1.png
Ideation
Wireframes and Flows

The wireframes established intuitive user flows to simplify navigation and ensure essential NBC content was easily accessible and engaging. These flows streamlined the user experience, aligning with clear design principles.
 

In the visual design phase, bold imagery and dynamic elements were introduced to create an eye-catching, engaging interface that captured the essence of NBC’s brand identity.

User Flow

Site navigation was restructured to prioritize video consumption—the platform's core offering. Unscripted shows received dedicated contestant landing and detail pages to enhance discoverability.

NBCU-Site-Color-Portfolio-Flow-4x1.png
Low-Fidelity Wireframes

Collaborating closely with the UX team, I helped create detailed wireframes with layout specifications and annotations for typography, iconography, and site behaviors. These provided developers with clear, actionable guidelines.

NBCU-Site-Portfolio-Wires-4x1.png
Visual Design

It was time to define the site’s visual language, text styles, and patterns. During early explorations, we raised key questions: Should this feature stand out with a distinct background color and texture? What illustration, iconography and text styles best align with the brand? These considerations guided the development of a cohesive and engaging design system.

Iconography

Intuitive, simplified icons replaced the cluttered visual elements of the previous design. This approach ensured users could navigate the platform quickly and confidently, even in complex environments.

NBCU-Site-Portfolio-Icons-4x1.png
Typography and Font Mapping

After testing multiple fonts, we selected two open-source Google fonts and a system font, mapping them to designs with appropriate tags for developers, ensuring a consistent typographic hierarchy.

NBCU-Site-Portfolio-Type-1-4x1.png
NBCU-Site-Portfolio-Type-2-4x1.png
Color Palette, Mapping & Background Textures

The color palette consisted of a primary and highlight color, supplemented by neutral tones. These were derived from show artwork and tagged for easy integration into the CMS. Subtle evergreen textures addressed branding requirements for show backgrounds while maintaining visual harmony.

NBCU-Site-Portfolio-Color-1-4x1.png
NBCU-Site-Portfolio-Color-2-4x1.png
NBCU-Site-Portfolio-Color-3-4x1.png
NBCU-Site-Color-Portfolio-HereToHereA-4x1.png
NBCU-Site-Color-Portfolio-HereToHereB-4x1.png

1

Clear: Simplify the interface to clarify relevance.

2

Direct: Communicate with purpose and tell meaningful stories.

3

Impactful: Ensure every element contributes value.

4

Emotional: Build a narrative that resonates with the audience.

5

Engaging: Foster experiences that encourage users to return.

6

Holistic: Design with a responsive approach for all platforms and devices.

Data analytics drove requirements which called for a new site structure with streamlined user experience optimized for 1280 desktop viewpoint, with larger images and simplified interface.

NBCU-Site-Portfolio-Wires-4x1.png
NBCU-Site-Portfolio-Type-1-4x1.png
NBCU-Site-Portfolio-Type-2-4x1.png
Typography and Font Mapping

After testing multiple fonts, we selected two open-source Google fonts and a system font, mapping them to designs with appropriate tags for developers, ensuring a consistent typographic hierarchy.

NBCU-Site-Portfolio-Color-1-4x1.png
NBCU-Site-Portfolio-Color-3-4x1.png
NBCU-Site-Portfolio-Color-2-4x1.png
NBCU-Site-Portfolio-Icons-4x1.png
Visual Design

It was time to define the site’s visual language, text styles, and patterns. During early explorations, we raised key questions: Should this feature stand out with a distinct background color and texture? What illustration, iconography and text styles best align with the brand? These considerations guided the development of a cohesive and engaging design system.

Iconography

Intuitive, simplified icons replaced the cluttered visual elements of the previous design. This approach ensured users could navigate the platform quickly and confidently, even in complex environments.

Low-Fidelity Wireframes

Collaborating closely with the UX team, I helped create detailed wireframes with layout specifications and annotations for typography, iconography, and site behaviors. These provided developers with clear, actionable guidelines.

NBCU-Site-Color-Portfolio-Flow-4x1.png
User Flow

Site navigation was restructured to prioritize video consumption—the platform's core offering. Unscripted shows received dedicated contestant landing and detail pages to enhance discoverability.

Ideation
Wireframes and Flows

The wireframes established intuitive user flows to simplify navigation and ensure essential NBC content was easily accessible and engaging. These flows streamlined the user experience, aligning with clear design principles.
 

In the visual design phase, bold imagery and dynamic elements were introduced to create an eye-catching, engaging interface that captured the essence of NBC’s brand identity.

Design Process

Research and Discovery

Due to the urgency of putting out the new and updated web product, we set up week-long sprints to expedite the discovery process. Grouped together in brainstorm sessions the product design team came up with the following design principles for the new NBC web experience:​

Color Palette, Mapping & Background Textures

The color palette consisted of a primary and highlight color, supplemented by neutral tones. These were derived from show artwork and tagged for easy integration into the CMS. Subtle evergreen textures addressed branding requirements for show backgrounds while maintaining visual harmony.

The Final Product

The redesigned NBC.com launched in Fall 2013, delivering a cleaner, more user-centric experience. It marked a significant leap forward, setting a foundation for subsequent updates and ongoing improvements. Being part of this transformation was a rewarding experience that showcased the power of collaboration and thoughtful design.

Takeaways

Impact

The redesigned NBC.com web experience drove significant growth, achieving a 22% increase in video consumption within the first month of launch. Unique visitors aged 18 to 34 surged to 15.2 million, compared to 12.8 million the previous month. Additionally, NBC.com’s global ranking improved, rising from 4,643 to 6,201 over three months.

What I Learned

Challenges: Designing a clean, user-centric interface that prioritized video content and boosted viewership.
 

Key Takeaways: When time is critical, seamless collaboration between teams is essential to deliver impactful results.

bottom of page