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.
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:
- The full page of content dedicated to the selected category.
- The list of categories must be integrated with the primary UI (not hidden under a menu) and become a navigational control (not just informational).
- The user must be able to quickly scan the list of categories independent of the content.
- The category a user is currently in must be clear.
- Design should account for featuring marketing(blog) materials, movies, shows, categories, etc.
- Design should have a well defined grid and sizing scales for text and UI elements.
- 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.
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:
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.
Published by: Jeff in Blog