About JioCinema
JioCinema is an Indian OTT streaming platform owned by Viacom18. It provides live streaming as well as video on demand based on advertisement and subscription models.
JioCinema acquired broadcasting rights for the Indian Premier League (IPL) from 2023 -2027.
JioTesseract wanted to launch the JioDive (a cost effective mobile VR headset) for Indian consumers & the IPL was the perfect launch platform as it is the most popular cricket league in the world, and building JioCinema's own XR version of the platform would drive sales for this.
The Problems
In the world of sports, we've all experienced those frustrating moments when the action on the field is obscured or we miss a critical play, simply because of limited viewing angles, Less Immersive content and distorted perspectives. It's as if we're peeking through a keyhole, missing out on the full thrill of the game.
JioCinema was a vast application with over a million media content available on its platform, and providing a good experience in VR for phones ranging from low to high end was a challenge.
Though there had been many OTT platforms that tried to crack the VR ecosystem none had succeeded in providing a scalable experience
Applying XR Design foundations
We had to bring in JioCinema's userflows into an engaging virtual space with came with a lot of considerations to be made.
Spatial Proximity
During the design process of the JioCinema XR application, a crucial aspect we thoroughly examined was the impact of spatial proximity on user engagement and interaction within the VR environment. To ensure an optimal user experience, we conducted extensive tests, focusing on the ideal spatial proximity for users utilizing the JioDive headset.
Through multiple iterations and tests, we found that maintaining a distance of approximately 2.4 meters for most intuitive and comfortable user experience. This distance allowed users to perceive and interact with the interface elements seamlessly, contributing to enhanced engagement and ease of navigation within the virtual environment as it was just a cusp social & public zones.
Field of View
In order to gain a comprehensive understanding of the user's field of view (FOV) and perspective within the VR space, we incorporated grey boxing placeholder screens during the testing phase. This approach enabled us to accurately assess the impact of spatial proximity on the user's visual experience, providing valuable insights into the optimal positioning of UI elements and the overall layout within the VR environment.
Focus Range & Horizons
Furthermore, our testing process focused on analyzing the distance logic, this helped us on deciding the most common interaction like buttons and sliders should a horizon level or slightly lower. If anything higher than horizon then give it larger hit area. By aligning the interface elements with users' natural focal points, we aimed to create a seamless and immersive viewing experience, minimizing any potential discomfort or visual strain.
Camera PoV
In addition to assessing the distance logic, we extensively tested the layout from VR point of view (POV). Checking the comfort viewing angle, content priority, readability, ease of pointing and head rotation.
Interaction Behaviour in Z-depth
While Interacting with the UI elements it comes forward in the Z-depth which gives you a sense of 3D feeling of the whole UI.
Creating JioCinema XR for the VR space
User Needs
Elevate the excitement of cricket viewing with a live 360-degree experience. It transports fans to the very field, where they can immerse themselves with their cherished teams, players, and matches. Feel the game like never before!
Crafting Immersive VR Experiences
Designing JioCinema XR for Virtual Reality involved facilitating user interaction within a dynamic virtual environment. Implementing multiple panels allowed for seamless navigation and intuitive content access, catering to diverse user preferences. Considering the distance factor, I strategically placed key panels to optimize legibility and minimize visual strain, ensuring that users could effortlessly engage with the interface regardless of their virtual proximity. By emphasizing legible typography and intuitive spatial arrangements, users could seamlessly explore content while enjoying a comfortable and immersive viewing experience.
Multi-variant Testing
Created 2-3 variants of many features for the JioCinema XR experience and user tested it with people.
The mission of the Multi-variant testing was to give the users the most intuitive and user friendly experience while introducing them to a new kind of VR experience.
Unique Features
Building the app end-to-end required breaking the walls of fundamental UX principles that are used in normal 2D apps and breaking the restrictions in building for Mobile VR, which prevented other apps from achieving this feat. Some features that made a huge impact to our users were:
Floating screens
Problem: Based on users feedback, we got to know that the users preferred to have the experience lying down rather than sitting up.
Solution: To solve the user issue Screen Reposition has been implemented and the user can have the experience in multiple user postures like lying down, sitting in a chair, standing up
Scalable screens
Problem: Some users preferred the screens to fit in while others wanted a theatrical experience with a much wider screen.
Solution: To solve the user issue UI manipulation was implemented and the user can have the experience their content in larger screen sizes
Jumbotron View
Problem: In the realm of 360-degree cricket matches, fans were leaving prematurely, craving a closer look. And there was a need to bridge the gap between a stadium experience vs a concise experience on TV
Solution: So, we introduced the Jumbotron feature, allowing them to enjoy a soaring 2D match view in the sky while immersed in the 360-degree experience. Best of both worlds!
Watch Party in VR
Cricket is always enjoyed in a group and we thought what if we could bring people together in a virtual space to enjoy a stadium like experience in VR
Metrics
JioTesseract was able to sell over 300k JioDive headsets, igniting the XR revolution in India
The JioImmerse - the parent app containing JioImmerse, saw a massive 192k unique user signups in the first 2 months of launch
JioCinema was able to achieve 2.5 Crore concurrent users during the IPL 2023 final across all devices including JioDive which was the record for OTT streaming.
After IPL the 360 streaming feature in VR was used for BIG BOSS India & several sports events.
Achieving a Daily Active Usage (DAU) of 38 mins with a weekly active retention of 45%
JioCinema XR still remains (As of December 2024) as the only large scale VR streaming OTT application active today, where larger OTT apps like Netflix, Disney Hotstar and Amazon Prime have failed to dominate after launching the app for the Meta XR Ecosystems
Reflections
Impact
Increased user engagement and retention through optimized user experiences.
Significant user adoption of JioDive headsets, catalyzing the XR revolution in India.
Successful implementation of 360 streaming in VR for various high-profile events.
Accommodating diverse user preferences through intuitive interface design.
Integration of VR and traditional media content for enhanced user immersion.
Improved user comfort and reduced visual strain through strategic placement of interactive elements and legible typography.
Empowered users with a personalized home theatre experience, offering a 100-inch screen immersion within the comfort of their homes.
Learnings
Throughout the design process of JioCinema XR for Virtual Reality (VR), I gleaned significant insights that have redefined my approach to UX design. One of the most pivotal discoveries was the paramount importance of optimising the user experience through the singular “Gaze n Click” functionality supported by the JioDive hardware. By crafting and defining the interaction through a single button, we streamlined the user experience, enhancing ease of use and fostering confidence among our diverse user base.
However, I encountered a challenge with the scrolling functionality using Gaze n Click, realising its potential to be cumbersome for users within a VR environment. To address this, I am currently exploring innovative solutions to introduce smoother and more intuitive scrolling mechanisms, ensuring that users can effortlessly navigate through content without experiencing any discomfort or inconvenience. This learning has emphasized the need for continuous refinement to ensure a seamless and immersive VR experience for our users, underscoring the significance of intuitive interactions and user-friendly design principles in the realm of Virtual Reality.
Furthermore, I learned to navigate the reality that not all ideas can be implemented due to external constraints. While it can be challenging to let go of certain concepts, collaborating with the team to find feasible solutions became essential. This journey emphasized the importance of making tough decisions to deliver an optimal product experience that resonates with our users.
Visual Design
Please feel free to take a sneek peek at the Figma files for JioCinema XR experience here.
