Pluto TV 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 - Android Casting
2 - Verizon Co-branding Experience
3 - Docked Player Revision
4 - Page Article & Metadata Documentation
5 - Android Channel Guide Enhancements (Scaling EPG)
1 - Android Casting
In response to user feedback, I led the upgrade of Pluto TV's mobile app casting feature to ensure a seamless mobile-to-TV experience and prepare for our Latin American launch. I addressed critical issues such as docking problems, poor visuals, and playback disruptions, focusing on eliminating black screens, stuttering, and layout glitches. By resolving these issues, our team enhanced the app's performance, aligning with Pluto TV's commitment to high-quality service and setting the stage for a successful launch in the Latin American market.
Mobile - Live TV - Casting Flow - I designed the Android Casting Flow for Pluto TV, starting with a feature discovery modal that prompts users to "Try it Now," allowing them to select content and choose a device for casting, such as "Living Room TV." The flow includes a casting overlay and a mini controller for playback management, with a user-friendly interface that supports full-screen and landscape modes, navigational arrows, and options to switch channels or terminate the cast.
Mobile - VOD - Casting Flow - The user interface flow for a video-on-demand (VOD) app begins on the home screen, where users select movies or TV shows and can quickly access recent content through a mini controller. Once casting is initiated, users choose a device like "Channel Master 3539" from a transparent overlay, then manage playback using a casting controller that provides content details, playback controls, and a landscape mode for device connection, ensuring a seamless transition from mobile to TV.
Reciever UI: I designed the "Receiver UI" for Pluto TV's app on connected TVs (CTV), which displays content cast from a mobile device and includes playback and volume controls, along with additional content information. This interface enables users to interact with and control the content directly from the receiving device.
Live TV - FS Player
VOD - FS Player
Casting Notifications : After reviewing Android Development guidelines, I designed two types of user-friendly casting notifications for Live TV and Video on Demand (VOD) in Figma, available in expanded and collapsed formats with program artwork. These notifications allow seamless TV management and multitasking on mobile devices, ensuring full compatibility with Android standards.
Conclusion: In conclusion, my enhancements to the Pluto mobile app's casting feature have successfully improved the user experience and streaming quality. My hands-on approach has resulted in a reliable and user-friendly app that effortlessly transitions from phone to TV. Viewers can now seamlessly cast both live and on-demand content, greatly enhancing their viewing experience. These improvements have also set us up for a successful launch in Latin America.
2 - 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 - Verizon FiOS - Splash Screen and Live TV Home Screens
Final Design - Mobile - Splash Screen + Live TV Home Screens for Android Mobile
3 - 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.
4 - 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.
5 - 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.