Role: Product Design Lead, supported by two Product Designers
A case study on the redesign of HBO Max’s video player across our desktop and mobile experiences, aka DMX. This replatforming completely rethought how our video player responds across screen sizes and devices, laying the groundwork for years of improvements.
An experience directly used by over 60 Million people, I was tasked to lead redesigning the video player on our Desktop, Mobile, and Tablet devices to accommodate any user needs at any size and orientation. This required a complete rethinking of how we handled responsiveness for our player, pivoting to a layout-shifting, column based, fully responsive experience. See the results below.
Built to scale for 60+ languages, and set up for maximum compatibility with screen readers, keyboard navigation, contrast, audio descriptions, and flexible captions + subtitles.
Leveraging our proprietary design system Slate, which was presented at the annual Figma Conference 2022.
We took users through prototypes exploring multiple layouts and variations to ensure user acceptance at every stage. Here are some of the prototypes we used for testing, built in either React Native or Figma depending on use case.
With thousands of variations and interactions/animations behind every element, providing thorough specifications was a priority. Here’s a small snippet of the hundreds of frames I put together, built on token-based atomic design for rapid, streamlined development.
This first release is really just a re-platforming; setting us up for a future of innovative features, device-specific optimizations, data behind every interaction, and capability for rapid iteration and improvement. We’re currently working on the next generation of features like browsing during playback, new and improved live streaming, and so much more. Stay tuned to see what’s next!
