MSNBC Video: Browsing Around Continuous Playback

Lullabot on the broader MSNBC.com rebuild

As Senior Design Technologist and Front-End Developer, I proposed and prototyped the browsing behaviour for MSNBC’s dedicated video experience, then helped deliver the AngularJS interface with the internal team and external vendors.

A dedicated video experience after the site rebuild

MSNBC needed viewers to be able to look for another story while continuing to watch live or archived coverage. Leaving the viewing page to browse would interrupt that activity. During a live broadcast, the programme could move on while someone was deciding what to watch next.

The dedicated video experience followed the broader MSNBC.com rebuild described in Lullabot’s account. I worked on the video interface and components for the in-house CMS. The full site redesign was a separate team effort.

Working prototypes before production

I worked with MSNBC’s internal team, external vendors, and stakeholders, first proposing interactions in functional prototypes and then helping implement the agreed behaviour. We had a hard six-month launch deadline, so the prototypes needed to settle questions that would otherwise carry into production development.

I used the prototypes to make the behaviour visible. A static layout could show a player beside a discussion panel. A working version let the team see what happened to the player’s width when that panel opened, and whether browsing still worked while a video was running. We went through several iterations before carrying the agreed interactions into the production AngularJS interface.

Collapsible panels around a running player

My proposal gave the content around the player its own collapsible panels. A viewer could open the discussion, scan the latest coverage, or close the surrounding panels to watch at full width. The player continued running while those browsing choices changed.

Comments sat beside the video and could be dismissed. An “Up next” row below the player placed the next viewing choice near the current clip, while the adjacent video list offered a broader route through the coverage. These controls supported different amounts of browsing without requiring the viewer to leave the page.

Adapting the browsing layout to the screen

The panels also had to work within responsive layouts. A desktop could accommodate horizontal video rows beside a large player. At narrower widths, recommendations moved into vertical lists while the video remained prominent.

I worked through those arrangements in the prototypes and helped carry them into the production interface. The desktop arrangement could not simply shrink to fit. The surrounding recommendations needed a different layout while the player retained its place as the main activity.

MSNBC video interface with a large player, clip details and an Up next row on the left, and a list of latest videos on the right. — Surviving interface capture from December 2016, rather than launch day. The player, next-video choices, and broader browsing list share the same viewing surface.

MSNBC video mockup showing phone, tablet and desktop layouts: the player remains prominent, recommendations stack at narrower widths, and a discussion panel sits beside the desktop player. — Responsive interface mockup showing the player and surrounding content at different screen widths.

Through production to launch

My implementation work included AngularJS components for the in-house CMS, integrated with its Drupal backend. I stayed involved as the interaction proposals became production code, working within the responsibilities shared by the internal team and vendors.

The video platform launched within the six-month window. A delayed launch carried a risk of partner litigation; delivering on schedule helped avoid that risk. My contribution extended from proposing the interaction through prototyping and front-end implementation on the team that delivered it.