Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Android Design Concepts
TUBI TV Mobile Design
Goals:
● The full page of content dedicated to the selected category
● The list of categories must b...
After copious amounts of research into competitors apps,
mobile device usage flows, developing a cohesive brand experience...
TUBI TV Mobile Design
Contents:
1. Concept design 1.
a. Home (featured section)
b. Navigation (categories)
c. Movie detail...
Concept Design One
Built on the premise of a beautiful category list, this
navigation design concept works smoothly via na...
Concept Design One
Navigation
● Each category has its own beautiful flavor
art background image, scaled to the device
size...
Concept Design One
Movie Details Page:
● Lots of iteration.
Perhaps simplicity is best.
3
Concept Design One
Show Details Page:
● Working from the first version listed for the
Movie details page (previous slide) ...
Concept Design One
Search
5
Concept Design One
Additional concepts & features.
● Resume watching
● Watch List
○ Named “Queue” on
xbox, should research...
Concept Design One - END
Continue to Concept Design Two
Concept Design 2
Based on user research and experience working
with various vertical and horizontal scrolling apps
this de...
Concept Design 2
Category Page.
● Very simple.
○ Plus nice to have sort functions.
● Easily browse and consume large amoun...
Concept Design 2
Category List Overlay
● Easy to use design.
○ Could add category content counts.
● Beautiful visual treat...
Concept Design 2
Additional Home featured concepts.
● Category with slider of movies.
● Live tv
● Blog post.
● etc.
Resume...
Concept Design Two - END
Continue to Concept Design Three
Concept Design 3
Basically all videos are now in widescreen format
so watching movies in landscape mode gives you
the best...
Concept Design 3
Category list & content.
2
Concept Design 3
Portrait Poster art version.
2b
Concept Design 3
Scroll into individual category content.
3
Concept Design 3
Example of “super poster”
3b
Concept Design 3
Landscape movie details page.
● Resume Watching
● Add to Q
4
Concept Design 3
Show / Episode Details Page
4b
Concept Design 3
Show / Episode Details Page
● Long Description Concept
4c
Concept Design Three - END
Continue to Video player concepts
Video Player Concepts
Most video players are the same. Probably because it’s just easier to
use the OS native player and c...
Video Player Concepts
Concept 1:
● Large seek bar. Showing ad breaks, played content
current location, buffered content, a...
Video Player
Concept 2:
● Full screen paused overlay.
● Options in full text. No guessing what some
glyph icon does.
● Min...
Ad Player
● Exit option and time remaining.
○ Remove time stamp when
engagement response is wanted.
4
Video Player Concepts - END
Further Design Considerations
Further Design Considerations
Poster art variations
- Portrait.
- Landscape.
with logos
without logos + text title treatme...
Further Design Considerations
Launcher icons
2
Upcoming SlideShare
Loading in …5
×

Tubi tv mobile designs

  • Be the first to comment

Tubi tv mobile designs

  1. 1. Android Design Concepts
  2. 2. TUBI TV Mobile Design Goals: ● 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. ● Should account for featuring marketing(blog) materials, movies, shows, categories, etc. ● Well defined grid and sizing scales for text and UI elements. ● Be able to integrate expansion features like watch lists and social engagement into the UI seamlessly. But more than that all product design should have a brand personality to bring cohesiveness to all the different platforms. In lieu of having something anything else to go on I have defined these criteria based on internal comments and sentiment from coworkers and user experience research into the the feelings people have behind their content consumption. I would love some input on this from the team. ● Cinematic ● Refined ● Approachable ● Trustworthy
  3. 3. After copious amounts of research into competitors apps, mobile device usage flows, developing a cohesive brand experience, and the user experience of browsing & watching movies on mobile; and after lots of iteration. Here are three well polished design models for a new tubi tv mobile experience. + some extra features and concepts TUBI TV Mobile Design
  4. 4. TUBI TV Mobile Design Contents: 1. Concept design 1. a. Home (featured section) b. Navigation (categories) c. Movie details page d. Show details page e. Search f. Misc. design items. 1. Concept design 2. a. Home (featured section & navigation) b. Content categories c. Category list overlay d. Misc. features 1. Concept design 3. a. Featured Category b. Content / category navigation c. Individual category d. Landscape movie details 1. Video player designs. a. Video player 1 b. Video player 2 c. Ad player + engagement overlay. 1. Poster art variations & Launcher icon concepts. To the designs!
  5. 5. Concept Design One Built on the premise of a beautiful category list, this navigation design concept works smoothly via natural motions of touch input. Featured Content Category (Home) ● Always in an open state (with a hint of the next category showing). ● Allows for large poster art, blog articles, regular category landscape poster art, and other highly curated content. ● Featured should always be first when you land in the app. 1
  6. 6. Concept Design One Navigation ● Each category has its own beautiful flavor art background image, scaled to the device size to resonate with HD tv standard sizes 1920x1080. 100% device width and 50% height of the 16:9 ratio. A size that works nicely within the 1.25 (4:5) scale. http://www.modularscale.com/?1&em&1.25&web&text 2
  7. 7. Concept Design One Movie Details Page: ● Lots of iteration. Perhaps simplicity is best. 3
  8. 8. Concept Design One Show Details Page: ● Working from the first version listed for the Movie details page (previous slide) and integrating episodes a seamlessly as possible. Keeping the user interaction essentially identical. 4
  9. 9. Concept Design One Search 5
  10. 10. Concept Design One Additional concepts & features. ● Resume watching ● Watch List ○ Named “Queue” on xbox, should research what people like better. bookmarks, watch list, watch later, seen it list, etc. ● Social Engagement feature related to likes or watch lists. 6
  11. 11. Concept Design One - END Continue to Concept Design Two
  12. 12. Concept Design 2 Based on user research and experience working with various vertical and horizontal scrolling apps this design concept is simple and easily understandable by all mobile device users. Despite the menu being in a menu style; navigation can happen without using it at all. The overlay visual treatment of the category list will make it feel like an omnipresent and light weight way to quickly jump to the content the user wants. ● Home (featured) category. ○ Simply tap on an item that looks good. 1
  13. 13. Concept Design 2 Category Page. ● Very simple. ○ Plus nice to have sort functions. ● Easily browse and consume large amounts of content by scrolling vertically. This is the (researched and tested) easiest method of content consumption on mobile. Due to language format for indo-european languages and natural thumb motion for mobile touch screen devices. 2
  14. 14. Concept Design 2 Category List Overlay ● Easy to use design. ○ Could add category content counts. ● Beautiful visual treatment. 3
  15. 15. Concept Design 2 Additional Home featured concepts. ● Category with slider of movies. ● Live tv ● Blog post. ● etc. Resume Watching. 4
  16. 16. Concept Design Two - END Continue to Concept Design Three
  17. 17. Concept Design 3 Basically all videos are now in widescreen format so watching movies in landscape mode gives you the best possible screen usage. Expanding that out to the rest of the app is ideal. This way the user is not switching back and forth between portrait and landscape modes and from an experience perspective the user is unconsciously primed to watch longer format content. 1
  18. 18. Concept Design 3 Category list & content. 2
  19. 19. Concept Design 3 Portrait Poster art version. 2b
  20. 20. Concept Design 3 Scroll into individual category content. 3
  21. 21. Concept Design 3 Example of “super poster” 3b
  22. 22. Concept Design 3 Landscape movie details page. ● Resume Watching ● Add to Q 4
  23. 23. Concept Design 3 Show / Episode Details Page 4b
  24. 24. Concept Design 3 Show / Episode Details Page ● Long Description Concept 4c
  25. 25. Concept Design Three - END Continue to Video player concepts
  26. 26. Video Player Concepts Most video players are the same. Probably because it’s just easier to use the OS native player and call it a day. But that leaves tubi a nice opportunity to create a better and unique experience for our users. After all, playing movies is what our users are here for. It’s not just the movies that need a beautiful experience. The ad player can be upgraded too. Causing less perceived interruption for the user and creating more value for our advertising partners. 1
  27. 27. Video Player Concepts Concept 1: ● Large seek bar. Showing ad breaks, played content current location, buffered content, and approximate video end. ○ Approximate video end location is a “nice to have” feature to be able to show another ad, continuous play of the next episode, further engagement like sharing liking rating commenting etc. on the video just watched. ● Features and options neatly tucked into an overflow menu. ● Seek bar location indicator large and easy to adjust even for people with fat fingers. All flat design except the grabbable slider. 2
  28. 28. Video Player Concept 2: ● Full screen paused overlay. ● Options in full text. No guessing what some glyph icon does. ● Minimal ad break indicators. ● Full screen seek bar indicating current location in movie. 3
  29. 29. Ad Player ● Exit option and time remaining. ○ Remove time stamp when engagement response is wanted. 4
  30. 30. Video Player Concepts - END Further Design Considerations
  31. 31. Further Design Considerations Poster art variations - Portrait. - Landscape. with logos without logos + text title treatment versions. 1
  32. 32. Further Design Considerations Launcher icons 2

×