NBC Local Websites Redesign

Apple TV Apps

NBC & Telemundo Local Stations

NBC & Telemundo Local Stations

2016 - Lead Product Designer

2017 - Lead Product Designer

Redesign of the main homepage on desktop and mobile for NBC & Telemundo Owned Television Stations 28 markets (11 NBC and 17 Telemundo stations) with reach to over 68 million people (via broadcast exposure).

This included a bottom to top re-organization of the IA of the homepage properties including navigation, how TVE (television everywhere) and search is integrated, as well as contextual information for live broadcasts and breaking news.

A first-in-class experience with video-first local news, weather, and more on the Apple TV platform for NBC and Telemundo local stations in 29 markets across the United States and Puerto Rico.

originalsite_2015

The Brief 

In the summer of July 2015, discussions came about to redesign the homepage and various other elements of the desktop and mobile versions of the local NBC television station websites. This was to update the look to the new broadcast brand (internally called LOOK-N) launching the following year, as well as improving usability and news delivery. The broadcast portion of NBC Local news reaches over 64.7 million Americans in the country. That's huge exposure, and we needed to make sure that the new pages complimented the broadcast and brought a deeper understanding of the news we were delivering digitally.

In 2017 the product team was tasked with creating a native Apple TV experience for NBC and Telemundo local markets.  We focused on what the most important experience would be on the app, consuming video, and went from there. 

Challenges and Goals 

NBC Owned Television Stations has 26 markets (11 NBC and 15 Telemundo stations) that have their own requirements and goals. We had to create one flexible design that would fit the majority of their needs but also improve the user experience. We were also aiming to tie it to a broadcast rebrand so we could only focus on the homepage and global navigation elements, not every single internal page.

Needed to improve the headline density on the page without cluttering the layout - Social Media such as Tweets and Facebook posts needed to be prominently displayed on the homepage as well so that users could not only get the latest headlines but also breaking local information.

Weather information, highlighting radar technology and severe weather situations, needed to be front and center.

Work within the limitations of a legacy content management system, using modules and content types that existed in the previous design of the website.

It could not be image-centric like magazine websites or national news outlets because photography content was not always the best (murders, arrests, etc) and we needed to stick to a 16x9 photo layout.

Approach

We looked at the biggest pain points of the websites and spoke with stakeholders representing the interests of the broadcast stations. Wireframes were drawn blending content from Editorial with the feedback and goals from stakeholders, internal and market research, and the UX team's own goals.

In 2017 the product team was tasked with creating a native Apple TV experience for NBC and Telemundo local markets.  We focused on what the most important experience would be on the app, consuming video, and went from there. 

wireframes

Navigation

The original navigation prior to the redesign did not make the best use of space and pushed down important content on the page.

We slimmed it down almost 50% and introduced navigation elements that hid when not in use such as the expanding in-line search box.

The red Breaking news bar was also moved to the very top of the page so that it would be immediately visible to the user.

The original navigation prior to the redesign did not make the best use of space and pushed down important content on the page.

We slimmed it down almost 50% and introduced navigation elements that hid when not in use such as the expanding in-line search box.

The red Breaking news bar was also moved to the very top of the page so that it would be immediately visible to the user.

headers
search
comparisonheader

Live Context Bar

Live broadcasts were going to be included in this new design, but the main issue was that we did not want to bury them under menu options. As an idea we experimented with a bar that would appear under the main navigation 

livecontext_trials

Severe Weather 

We knew that weather and radar were the most important things we needed to focus on so we created a second homepage template that made the first news article substantially larger for emphasis during Severe Weather events.

When there's a live broadcast or stream this ties in perfectly with the Live Context bar and the radar that sits to the right of the main content well.

severeweatherdc

Mobile 

The biggest challenge was to make sure that the new features were available cross-platform. As I mentioned before, this was not a responsive design so we had to work within an existing template-based CMS that served a mobile version and desktop version depending on what device the user visited on.

Instead of shoving the most important information into a Hamburger menu, we decided that a Quicklinks nav bar which the user could scroll through would have a higher impact on navigation on a mobile device.

Through testing, the design team found that users never clicked on the isolated weather icon on the mobile version, so we moved the current conditions icon next to the Weather menu item.

mobile_web

Launch 

In the end, the project resulted in more than 11 revamped local homepages for NBC, with Telemundo's site refresh launching in 2017. We wanted to redesign the entire website from the ground up using a responsive, cross-platform design, but due to business goals and tying the redesign to an internal broadcast re-brand, we had a tighter time-frame.

Managing expectations across so many markets and stakeholders was a true challenge, but we created a design and experience that works for everyone, met the goals we aimed for from the beginning and introduced new concepts such as the Live Context bar and Weather in the mobile navigation.

Thanks to rapid iteration based on user testing and key stakeholder involvement we were able to launch the Apple TV experience to all markets by 2018.

Thanks to rapid iteration based on user testing and key stakeholder involvement we were able to launch the Apple TV experience to all markets by 2018.

Thanks to rapid iteration based on user testing and key stakeholder involvement we were able to launch the Apple TV experience to all markets by 2018.

newsite_2016

Available for every NBC and Telemundo owned television station market.

Visit NBC New York to see the live design →

© 2018 Ricardo Galbis

© 2018 Ricardo Galbis

© 2018 Ricardo Galbis