July 27, 2015 - Comments Off on Tubi TV Design

Tubi TV Design

Re-designing Tubi TV was a massive undertaking. First, the product spans a breath of platforms rarely tackled by any startup. Secondly, being in the still emerging streaming video space isn't easy when there are network owned direct competitors like Hulu and Crackle with deep pockets; then there's Netflix, beloved, paid, streaming service of millions, that (from a design perspective) always brings up the question "why is what you made better than what Netflix is doing?" Oh, right, I was the only designer. Neat.

Keep in mind that while I worked on the product designs there was an almost daily fire to put out with really anything design related a growing startup could possibly need. Here are a few of those things: content art (movie/tv show posters), marketing and sales design needs (sales decks, hundreds of banner ads, Facebook post graphics, infographics, etc.), white-label app mock-ups for new and potential content partners like MGM Studios, mock-ups for external app partnerships, assets for new platforms including all of adRise’s parter apps, newsletters, additions to the TubiTV web and mobile sites before the full re-designs were done, t-shirts, business cards, custom office wallpaper, and designs for the AdRise.com website and content management system. I put some samples of those items at the bottom of this post.


Product design is, obviously, way more interesting, so let's start with the Smart TV app design. With the only initial design constraints, imposed by the VP of Product (after some initial design iteration), being that the category list must be a prominent feature instead of just informational and that each category must have its own full page of content to itself. These constraints create a distinct difference between the future products and how Netflix has, thus far, determined is best for browsing their content. I suppose we’ll see how the numbers do as the html5 based connected tv apps (LG/Samsung Smart TVs, XboxOne, Vizeo, Opera, etc.) roll out. Of course game controller or TV remote controlled devices have their own constraints. Probably the most obvious of which is the need for an always present selected state. Controllers for XboxOne and LG smart tavs could probably move away from this need, but would then require separate functionality and design from older devices.

While I think this app could use a bunch more work, specifically in using the TV platform and usage of a remote to its potential, I think it’s a functional and reasonably attractive product for TubiTVs immediate future growth (and drastically better than their previous design). Here are some of the final product mockups for the Connected TV app.

 tubitv smart tv app design home category screen

tubitv smart tv app design home category screen

tubitv smart tv app design video details and episode list screen

tubitv smart tv app design video details and episode list screen

Play animation testing for smart tv html5 app design

Play animation testing for smart tv html5 app design


Obviously, I also designed the new mobile app for TubiTV. The goals of the mobile project were a bit more defined (by me and the Product manager) after having worked through the Smart TV app designs and a good deal of modifications on the Roku app (and there-by learning what the various company stakeholders expected and liked). The general goals were:

  1. The full page of content dedicated to the selected category.
  2. The list of categories must be integrated with the primary UI (not hidden under a menu) and become a navigational control (not just informational).
  3. The user must be able to quickly scan the list of categories independent of the content.
  4. The category a user is currently in must be clear.
  5. Design should account for featuring marketing(blog) materials, movies, shows, categories, etc.
  6. Design should have a well defined grid and sizing scales for text and UI elements.
  7. Integrate expansion features like content sorting, watch lists, and social engagement into the UI seamlessly.

After copious amounts of research into competitors apps, mobile device usage flows (especially around portrait vs landscape viewing and scrolling), developing a cohesive brand experience (see more below), and the user experience of browsing & watching movies on mobile; and after lots of iteration. Here are three of the well polished design models for a new TubiTV mobile experience. 

Mobile Mocks Landscape TUBITV

Featured content and top level category content with landscape poster art for the tubi tv mobile app. Plus concepts for a new launcher icon.

Mobile app Mocks Landscape tubitv

Mobile app mockups including poster art size variation for a featured image, movie details page, video player concepts (that are amazing), and an interactive ad mockup

 

Portrait mode tubi tv app design mockups

Portrait mode tubi tv app design mockups.

See a bunch more mocks and annotations for each in slide format:

Slideshare doesn't allow animations like Google slides does. Lame. Step up your game LinkedIn. Google Slides Link:  https://docs.google.com/presentation/d/1vC62TW1DLYmXFY5X-yR-VnQQqp0V2q6CecYnvoUUtsQ

Moving on to the design for the TubiTV.com website required a significant shift in thinking about usability, input modes like hovering and smooth scrolling, and even best practices for content organization and layout for search engine indexing and optimization. And again still producing something beautiful, intuitively usable, and reconciling these needs and changes with the constraints imposed by stake holders. After writing out various needs and sketching several concepts, I jumped into photoshop and produced a plethora of high fidelity mocks that work well as individual components to be mixed and matched and tested to create an amazing web experience. Here are a few examples of those mocks and interaction designs:

tubitv web redesign homepage

TUBI TV Home Page Re-Design. non-blind full page carousel style featured shows movies blog posts etc.

 

scroll direction mock ups and poster art styling

scroll direction mock ups and poster art styling

 

Super cool sort interaction animation mockup for tubi tv web design

Super cool sort interaction animation mockup for tubi tv web design

 

tubi tv movie details concept design

tubi tv movie details concept design

 

show episodes details page concept

show episodes details page concept

LiveTV tubi-tv mocks epg

LiveTV tubi-tv mocks epg

 

tubitv quick details pop-up design mock

tubitv quick details pop-up design mock


But TubiTV is more than just the product design for various platforms. It’s a brand name that needs to move from being one of hundreds of random sites where you can stream some content, to a household name that’s synonymous with epic amounts of content, available for free, on demand, anywhere, anytime.

Arial Rounded just wasn’t going to cut it. (see their current logo)

How do you define the personality of a brand? Where do you even start? For one thing no one cares that TubiTV is on a bunch of platforms, it should already be there without the user even considering that it might not be. The actual user experience of watching anything on tv is flopping down on your couch, kicking off your shoes, and pressing play.

I defined the core values that should embody the Tubi TV experience along side designing the UI for each major platform that Tubi TV is on. But to keep this post to a vaguely manageable size, I'll put the brand designs in another post.


celebrity background image splash

celebrity background image splash

marathon running tshirt design marketing concept

marathon running tshirt design marketing concept

How To Live Forever movie poster

How To Live Forever movie poster

mobile jobs page quick dirty mocks

mobile jobs page quick dirty mocks

quick and dirty mobile landing page

quick and dirty mobile landing page

roku tubi tv reg wall paramount content

roku tubi tv reg wall paramount content

SalesDeck presentation background

SalesDeck presentation background

tshirt design I have more content than you

tshirt design I have more content than you

tshirt design streaming content

tshirt design streaming content

tshirt design streaming content

tshirt design streaming content

tshirt design streaming content

tshirt design streaming content

tshirt designs STREAM HOW YOU WANT TO

tshirt designs STREAM HOW YOU WANT TO

tshirt designs STREAM HOW YOU WANT TO

tshirt designs STREAM HOW YOU WANT TO

Bikini Body new poster art and roku acceptable banner

Bikini Body new poster art and roku acceptable banner

amex now app banner ad

amex now app banner ad

tubitv more equal more free marriage equality fb post

tubitv more equal more free marriage equality fb post

tubitv birthday card top-of-mind marketing

tubitv birthday card top-of-mind

Silicon Valley Tres Commas Billboard Design

Silicon Valley Tres Commas Billboard

Silicon Valley Tres Commas Billboard Design

Silicon Valley Tres Commas Billboard

Transfromers Energon Ad Design

Transfromers Energon Ad Design

Transformers Energon Amazon Ad

Transformers Energon Amazon Ad

The Take Movie Poster Art and Roku Ad

The Take Movie Poster Art and Roku Ad

perfect score Roku ad a/b testing

perfect score Roku ad a/b testing

perfect score Roku ad a/b testing

perfect score Roku ad a/b testing

Kelly Hu - Jason Wolverine scorpion king

Kelly Hu - Jason Wolverine scorpion king

july 4th free content fb post

July 4th How free is your content fb post

Silicon Valley hooli sucks Billboards

Silicon Valley hooli sucks Billboards

go girls - one of hundreds of Roku Banner ads

go girls - one of hundreds of Roku Banner ads

GI Joe HASBRO Partner Ad

GI Joe HASBRO Partner Ad again for roku promotion

friday the 13th 5 6 7 Roku banner ad

friday the 13th 5 6 7 Roku banner ad testing for roku

friday the 13th movies infographic

friday the 13th movies infographic slapped together in a few mins

frankie and johnny movie watch free ad for Facebook

frankie and johnny movie watch free ad for Facebook

Silicon Valley Dick Joke Formula Outdoor advertising poster

Silicon Valley Dick Joke Formula Outdoor ads

First Squad MANGA Partner App Ad

First Squad MANGA Partner App Ad for Amazon

First Squad MANGA Partner App Ad

First Squad MANGA Partner App Ad

First Squad MANGA Partner App Ad

First Squad MANGA Partner App Ad

FireTV Hero Spot  1930x200 TUBITV AD DESIGN Lip Service

FireTV Hero Spot TUBITV AD DESIGN Lip Service

FireTV Hero Spot  1930x200 TUBITV AD DESIGN

FireTV Hero Spot 1930x200 TUBITV AD DESIGN

Charlie Hunnam Queer as Folk JAX sons of anarchy Facebook Marketing Post

Charlie Hunnam Queer as Folk JAX sons of anarchy Facebook Marketing Post

Bigfoot movie poster midnight pulp watch free

Bigfoot movie poster midnight pulp watch free

Published by: Jeff in Blog

Comments are closed.