Our Projects
NBC.com
Web Experince
Overview
In 2014, NBC.com sought to modernize its digital presence to better serve its diverse audience. genioLAB partnered with NBC to redesign the platform, focusing on aligning with NBC’s brand identity and addressing usability challenges across its extensive content library. The goal was to create a seamless, engaging web experience that delighted users and supported NBC’s business objectives.
Project Duration
March – May 2014
Product Statement
The revamped NBC.com was envisioned as a dynamic platform bringing viewers closer to their favorite shows and live TV content. It combined intuitive navigation, robust search capabilities, and an engaging interface to ensure users could effortlessly discover, stream, and interact with NBC’s rich entertainment offerings.
Goal
The primary objective was to develop a responsive, user-friendly web experience that balanced NBC’s iconic branding with modern usability standards. The redesign aimed to improve user engagement, simplify content discovery, and ensure seamless performance across devices, thereby driving both viewership and user satisfaction.
Our Role
genioLAB led the visual design efforts, crafting a cohesive visual language in line with NBC’s brand guidelines. The team designed interactive components, established scalable design patterns, and collaborated with cross-functional teams to ensure the final product resonated with users and met project goals. Detailed visual assets were created to guide the development process, ensuring pixel-perfect execution across all touchpoints.
Design Process
Research and Discovery
To expedite the discovery process, genioLAB conducted week-long sprints, facilitating intensive brainstorming sessions. The team established key design principles to guide 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 informed the need for a new site structure with a streamlined user experience optimized for a 1280px desktop viewport, featuring larger images and a simplified interface.
Ideation
Wireframes and Flows
genioLAB developed wireframes to establish intuitive user flows, simplifying navigation and ensuring essential NBC content was easily accessible and engaging. These flows streamlined the user experience, aligning with the established design principles.
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.
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.
Visual Design
genioLAB defined the site’s visual language, text styles, and patterns. During early explorations, key questions addressed included:
-
Should the feature stand out with a unique background color and texture?
-
What illustration style would best complement existing app visuals?
-
Is new iconography needed, or can existing assets be extended?
Bold imagery and dynamic elements were introduced to create an eye-catching, engaging interface that captured the essence of NBC’s brand identity.
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.
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.
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.
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.
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.
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
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 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. The redesign 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 6,201 to 4,643 over three months.
What We Learned
Challenges: Designing a clean, user-centric interface that prioritized video content and boosted viewership within a tight timeline required seamless collaboration between teams.
Key Takeaways: When time is critical, seamless collaboration between teams is essential to deliver impactful results. The project reinforced the importance of aligning design efforts with user needs and business goals to achieve measurable success.