TVE Desktop
NBC’s local news stations didn’t have a way for their audience to watch Live TV within their own products. The business goal was to keep their audience within their own products and benefit on advertising opportunities.The user pain points were that they were being pushed to another site (NBC.com) or to download an app (the NBC app) to watch Live TV.
Responsible for: User Experience • Research • Product Design • Personas • User Testing • Visual Design • Production
RESEARCH + COMPETITIVE ANALYSIS
We learned from the team at NBC.com that the average time spent per unique watching video was 62min. I started to explore what that looked like today for people streaming video from both direct competitors and non.
MY WIREFRAME APPROACH
An early full width video experience approach was taken due the time commitment our users were spending streaming our video. I then played with the TV schedule CTA placement and schedule layout to test.
USER TESTING
With limited budget and research, I developed a group of personas based on their user demographics, the different products, limited data and a few assumptions. I introduced user testing to the department. I put together an internal employee screeners and held prototype tests at employee’s desks to observe in natural environments.
VISUAL DESIGN
After more rounds of user testing and design explorations, the look and feel for the player experience developed. The ad sponsorship business goal was presented without interrupting the user’s Live view goal. External option to watch shows On Demand and view clips were added to the business goals.
MY WIREFRAME APPROACH
Once the user decided they wanted to watch Live TV, I wanted the focus of the authentication flow to feel native within the product and be as quick and user friendly as possible to avoid any abandonment.
THE END RESULT
To help address user paint points of feeling pushed to another site, I kept the navigation visible and created a blue background to tie back the on air news graphics they see on TV with a hint of a digital feel.
Emotional Design: Even when delivering bad news (complications with Mozilla Firefox), lead me to illustrate a face hard to stay mad at.
MY WIREFRAME APPROACH
With article pages getting the majority of traffic, the goal was to find a way to promote what was currently Live on air and having a simple way of accessing it if interested.
I had an early idea that if the user was already authenticated and they clicked the CTA, it would play in a minimized sticky video player, allowing them to continue to browse within the site. When idea was presented to users during testing and stakeholders, they both loved the idea. Unfortunately it was too much dev work for the team at the time.
THE END RESULT
After various iterations and user testing, we stuck to a simpler approach. Users found this design more native and less annoying because it looked like the main navigation and less like an ad.
DESIGN PROCESS
With NBC On Demand being thrown into the Live TV section and there sometimes being more than one live stream happening at the same time, some visual information hierarchy system needed to be set in place for all CTAs and dropdown menus across the site.
END RESULT
System in place: We ended up introducing a NEW TV icon to promote the new feature. The “Watch Live” CTA was replaced with a simple universal “Play” icon to save space.
