pluto.tv Android Projects
As the Android Embedded Product Designer at Pluto TV, I enhanced the core app experience for web, mobile, and CTV platforms using data-driven solutions. I collaborated closely with development teams, adhered to Android Developer Guidelines, and conducted tests on debug builds to optimize designs for various screen resolutions and device breakpoints. Additionally, I created detailed wireframe documentation that included metadata conditions and annotations of key behaviors to address core application issues effectively.
1 - Verizon Co-branding Experience
2 - Docked Player Revision
3 - Page Article & Metadata Documentation
4 - Android Channel Guide Enhancements (Scaling EPG)
5 - Web Re-design (Colors + Typography)
1 - Verizon Co-branding Experience
I played a crucial role in the partnership between Pluto TV and Verizon, which brought over 100,000 hours of ViacomCBS content to Verizon’s large customer base. This project made Pluto TV available on multiple Verizon devices, greatly expanding its reach. My work helped integrate both brands smoothly, resulting in a successful launch in July 2020.
Logo Placement: I created a co-branded experience for the Pluto TV and Verizon partnership, ensuring both logos were equally visible on the app by displaying them side by side with identical sizes. After adjusting the logos for perfect alignment and conducting multiple reviews on various devices, we achieved an optimal placement that respected both brands. To enhance co-branding, I repositioned certain app elements and developed a unified design for the Splash Screen.
Final Design - Splash Screen + Live TV Home Screens for Android TV
Final Design - Splash Screen + Live TV Home Screens for Android Mobile
2 - Docked Player Revision
The Docked Player is a key component of the app's interface, allowing users to switch smoothly between viewing and browsing while keeping their context. User testing showed that 1/2 of the participants struggled to find recommended content below the fold and expressed a strong preference for features to mute, pause, or dismiss the Docked Player to improve their browsing experience. The initial design did not include a mute function, leading to sound-related annoyances that negatively impacted user satisfaction.
I led a design workshop to refine the docked player, addressing usability issues by introducing features like mute and pause buttons, transitioning to a floating card design, and conducting a competitive analysis on mute functionalities to enhance the overall user experience.
Hulu Live - For Hulu’s Live TV, pause option appears immediately on player states when in Full Screen or Partial View, allowing the user to take action immediately. Users can swipe down on the player (partial) to close it.
YouTube - On Youtube’s docked player state, users have the option to pause the content they are currently playing as well as close the floating player with the (X) button. Titles are truncated with (…).
Facebook - On Facebook’s floating player state, there is no pause or mute option. This isn’t ideal, since the user may want to pause while browsing, the option however does appear in the list state when the user is scrolling through the list and sees the program they are currently viewing.
I improved the docked player's design to allow users to control audio (mute or pause) and exit, adding mute functionality and refreshing the UI for both Live TV and On Demand content.
3 - Page Article Documentation
I improved our application's design by using the Google Material Design Library with Sketch and Principle, creating detailed wireframes and annotating functions in Confluence. I developed comprehensive guides for key views that included access, content display, and navigation, which centralized important information and enhanced collaboration among stakeholders. This approach standardized documentation, improved communication between design and engineering teams, and provided data for Business Intelligence to track user interactions, ultimately increasing user satisfaction and engagement.
4 - Android Channel Guide Enhancements
I refined the channel guide interface of the Pluto TV app to support multiple Android device resolutions, ensuring a consistent and accessible user experience across different screen sizes, pixel densities, and aspect ratios. My design focused on scalable UI layouts that enhance readability and functionality, effectively presenting features like channel lists and navigation tabs in both expanded and collapsed views, thus ensuring a seamless experience for all users.
5 - Web Re-design (Colors + Typography)
The goal of this project was to improve visibility and accessibility by applying Pluto TV’s new rebrand colors to the 5.0.X Web Web efforts, ensuring elements met AAA contrast compliance. The “Dark Knight Theme” boosted legibility across the interface, particularly for episode time markers and channel numbers, which initially failed AAA standards. I used updated colors from the rebrand palette to resolve this, and these changes were adopted across all platform EPGs (channel grids), starting with the Web App views.
1 - AAA Test Results
2a - Guide EPG Colors - Before
2b - Guide EPG Colors - After
3a - Live TV Split View - Before
3b - Live TV Split View - After
4a - Modal - Before -
Docked Player is hidden under scrim and Product Requirement is that it is made visible at all times.
4b - Modal - After -
Docked Player is brought above scrim and Watch Now CTA is moved to the left side for instances of overlap, e.g. if a user were to minimize the screen. We also tested various break points to confirm there wasn’t any overlap with CTA.