index  |  prev / next



NBC.com  |  UX/UI Site Redesign





PROJECT OVERVIEW

Prior to 2013, NBC.com's format was a heavily editorially driven content site. Each NBC show site had its own individual structure, look, and feel with many thumbnails and links driving to various content. The only common element was the global site navigation. Visually it was very interesting, but from a UX perspective, it wasn't the best experience.

With the new 2013 season, NBC.com had a bold initiative to completely change the design structure of the entire website. The goal was to create a new UX structure to the site that was uniform, template based, responsive, and much more user friendly. Additionally, the content was going to change to focus on social media promotion and video views since this was the main source of income.

As one of the few Senior designers at NBC.com, I was always involved with designing, iterating, and improving all aspects of user interaction on the site. This would range from full site, section and page redesigns, down to the treatment of text, buttons and icons. I played a major part in this major UX restructuring of NBC.com.

CHALLENGE

Completely redesign the UX / UI structure of NBC.com
• Shift the focus of the NBC.com and NBC show home pages to a video based experience
• Reduce the information on all pages to give the user a clearer view of the content
• Improve all UI elements and reduce copy to improve the overall user experience

SOLUTION

• Created a new show page template to offer a uniform experience throughout the site
• New template offered quicker design time by changing out key art and CSS color styles
• Focused on the presentation of video and social media content to modernize the site
• I designed the UI treatment for the video, social, and feature sections that became the standard on all pages across NBC.com
• Standardized the navigation so it was consistent across all show sites

* After the launch of the new design, NBC.com saw a dramatic increase in video views proving this redesign was a success

Roles

Lead UX / UI Designer providing design concepts and strategy for the redesign
• Assisted VP of Design in creating a new UX/UI design standard across NBC.com
• One of a few Senior Designers leading the design team in developing design concepts
• Developed UX and Visual design direction by providing many concepts for the redesign

* This was an entire Design team effort. As a Lead Designer, I was primarily involved with site strategy, overall site design, and overseeing other designer's work in this effort. I ultimately worked on the final wireframes and visual explorations to complete the overall redesign.

Art Direction  |  UX/UI Interaction Design  |  Wireframes  |  Templates  |  Style Guides

Platforms

Desktop Mac & PC

Year

2013




OVERVIEW

Original NBC.com Show Site Style
Examples of the previous style, look, and layout of NBC show sites before the redesign

These are two examples of show sites I designed that showcase the style NBC.com had before the redesign. Editorial content was the main focus, so the home pages had a lot of sections and copy. Each site had it's own look and feel, and the layouts were completely different from show to show. While this offered a lot of visual variety, the experience across NBC.com could be a little chaotic when going from site to site. The goal was to standardize a format across all show sites to give the user an easier experience in finding content.

Click image for larger view







WIREFRAMES

Initial Wireframes
Initial Wireframes for Show Home, About, and Bio pages

This is a small sample of the initial wireframes made to change the structure of the NBC.com show site. I worked with the VP of Design in finalizing the wireframes. There were many other pages that had to be designed including episode guides, photo and vido pages, etc. Shown are the initial show home, about, and bio page wireframes.









VISUAL CONCEPTS

Design Concepts & Explorations
Visual & Layout Options

While we had the initial wireframes, the visual look was extremely important to these pages. The visuals had to work within the confines of the new structure. I explored many options on treating the header, background image, background color, and type colors to make sure the new layout would work with all scripted, late night, and reality shows.

The examples shown were treatments I did for the show "The Voice". Explorations were made on header images as well as background and type color treatments. The goal was test a variety of options to make sure the template would work for the content across many different types of shows.

Click image for larger view







FINAL LAYOUTS

High-Fidelity Wireframes
Show Home Page Final Wireframe

Final Show Home Page Template Wireframe and its implementation with the show "The Blacklist". Logo and Key Art were imported into the first slide of the main header and used to dictate the page background image and color treatments for type and icons.

The main goal of the show home page was to have video be the focus of the top half of the page and have other content be in one section at the bottom. This was to drive users to easily find and watch more video.

Click image for larger view




Show About Page Final Wireframe

Final Show About & Bio Page Template Wireframe and its implementation with the show "The Blacklist".

Click image for larger view





Final Live Design
Final design implemented with live content

Screenshot of "The Blacklist" home page from July 2014. This shows the template live with actual content and text.

Click image for larger view





Icons
UI Design - Icon and Text Caption Improvements

After the launch of the new design, I designed an improved UI for the social, feature, and video icons. My new treatment was more eye-catching and left more room for text. I also improved how we displayed text for these sections. These changes were implemented across the entire site shortly after the initial launch.







Style Guide
CSS Style Guide

This CSS style guide was created for quick and easy site-wide color configurations and changes across a show site. This saved time for both designers and developers when making changes.

Click image for larger view







LATE NIGHT TEMPLATE VARIATION - SATURDAY NIGHT LIVE

With the 2013 site restructuring the show site template was finalized. However, this template wouldn't completely work with the late night shows. Saturday Night Live and The Tonight Show had different content needs, so the template had to be revised. The work below shows my customization for SNL.



Saturday Night Live Modified Wireframe
SNL Home Page Wireframe

I was the designer for SNL so I developed a revised version of the show home page template to fit the unique needs of the late night show. SNL has a distinct pattern to the show with segments that are repeated every week. I wanted the site structure to reflect that pattern to improve the user’s ease of finding specific video clips and full episodes. This redesign was intended to be video focused to fulfill NBC’s business goals of increasing video views to drive more revenue.

Click image for larger view





Saturday Night Live - Final Design
SNL Proposed Home Page Design

This was my proposed new layout structure for the SNL site. The design was almost completely video based with copy at an absolute minimum. I believed this was a cleaner presentation of each episode's content and drove attention to sections that the user could clearly recognize and find.

Design highlights included:
• Last week's most popular clips and full episode are at the top of the page - users would always look for these after the show's airing
• Simple presentation of previous episodes that highlighted the top segments of the show
• Incorporated the unique photography treatments of the hosts used throughout the show that are a trademark of SNL
• Introduced a different treatment of the editorial content







Saturday Night Live - Design Comparisons
SNL Home Page Comparison - Before & After

This shows a comparison of what the SNL site previously looked like, which was editorially driven, and my new video-based design. The new design is cleaner, more user friendly, and visually eye-catching with larger pictures and a mix of photos and live shots.







Saturday Night Live - Final Design
SNL Final Live Home Page

While I believed my original design (above) was stronger, leadership didn't want that much of a divergence from the template, so this is the final redesign of the SNL home page that went live.




index  |  prev / next


JASON SIMONS  -  Lead Product Designer | Design Manager