CNBC App for Roku

Watch CNBC with access to full episodes and show clips on Roku

The Project

As lead designer on this project, I was responsible for designing all wireframes, UI specs, handoff documentation, and pixel-perfect mocks. I worked closely with the Product Owner, a technical lead and the NBCUniversal Digital Products & Interactive Media (DPIM) team. The effort was part of a company-wide rollout involving other media properties including Bravo, USA, and NBC.

The Design Process

The DPIM team provided specifications for the overall design. It was up to me to furnish for the overall look and feel while the product owner and editorial delivered content objectives. The first step was to create user flows in order to understand how the product worked in support of business objectives. The next step was to create low fidelity wireframes in order to map out the overall levels of complexity needed to realize the product.

CNBC Roku user flow sketches

Low fidelity wireframes

Once internal stakeholders approved the designs, the next step was to provide a handoff documentation and package assets for the DPIM team so they begin production. Since the DPIM team was remote, it was crucial to maintain regular communications in the form of daily conference calls punctuated with onsite visits to ensure timely delivery of the product.

CNBC Roku app style guide

CNBC Roku app style guide

CNBC Roku App high fidelity prototype

CNBC Roku App Show User Flow

Outcome

With a relatively compact turnaround time, we achieved a design that was inline with the other media brands but still conveyed the unique visual brand identity of CNBC while still serving the needs of our content and programming teams.

Other projects: 

Bears. Beets. Battlestar Galactica.