Beyond the smartphone: How JioHotstar optimized its UX for foldables and tablets
Article Summary
Prateek Batra from Google reveals how JioHotstar transformed their streaming app for 400 million users. The secret? Treating tablets and foldables as first-class citizens, not just stretched phones.
JioHotstar, India's leading streaming platform with 330,000+ hours of content, tackled the challenge of adapting their phone-first UI to foldables and tablets. Using Google's adaptive app guidance and Material 3 libraries, they achieved Tier 1 large screen app status by reimagining layouts for different form factors.
Key Takeaways
- Implemented WindowSizeClass to create optimized layouts for compact, medium, and extended widths
- Added Tabletop Mode for foldables: video on top, controls on bottom
- Loaded appropriate hero images per form factor instead of simple scaling
- Increased touch targets to 48dp and made navigation adaptive across screens
JioHotstar achieved Tier 1 large screen status by using Material 3 Adaptive library to dynamically adjust layouts, images, and controls across 400 million users' devices.
About This Article
JioHotstar's phone-optimized UI had trouble adapting hero images, menus, and show screens to different devices like foldables and tablets. Images were getting cropped or letterboxed, resolution was poor, and landscape mode wasted a lot of space.
JioHotstar used Material 3 Adaptive library's currentWindowAdaptiveInfo() function to detect window sizes as they changed and load the right hero image resolution for each device type. This approach worked better than just scaling images up or down.
JioHotstar reached Tier 1 large screen app quality status. Now 400 million users can stream with optimized visuals and better navigation on foldables and tablets.