I was commisioned by Kariboo VR to re-design browsing experience for their users. Their main redesign comes with one liner to me : Simpler Discovery and Quicker Decision on Movies. In a competitive market today, where users are presented with an overwhelming array of content choices, understanding user behavior is critical. The brief focus will be on streamlining the process from discovery to decision, that users can find and start watching their desired movies as quickly and effortlessly as possible. This projects really go deeper into using insights into user behaviour and browsing and discovery patterns.

‍

‍

‍

I began my design process by conducting research to support my proposed architecture, user experience, and UI design. I interviewed users who spend significant time on discovery platforms like YouTube, Spotify, and Netflix. I chose these platforms due to their effective content discovery mechanisms. One of the insights that i find so strong that these three platform has in common is they excel at reducing cognitive load by simplifying the decision-making process. Youtube Quick Play, Spotify’s one-click play , and Netflix Auto Play on Trailer feature make content discovery feel seamless and effortless.

Based on data released by Netflix in 2024, users typically give up on trying to find something to watch after about 60 to 90 seconds. If they don't find something that catches their interest within this brief window, they may leave the platform or switch to another activity. However, this time can extend into 2 -3 minutes due to users' multitasking habits during browsing, where they often read reviews, analyze ratings, and watch trailers simultaneously.

I feel like these was a key to the redesign, to translate these insights into actionable UX design, I began noting a couple of features that could be adapted for the Kariboo VR platform. Understanding that reducing cognitive load is crucial, I focused on creating a browsing experience that minimizes the effort required for users to find and decide on content as soon as possible.
‍

‍

‍

Below diving in into the design process.

With the data i had above, i proposed a new Information Architecture , consideration of user multitasking behavior. This architecture accommodates that behavior by allowing users to seamlessly move through different stages of content discovery without overwhelming them. The flow begins with a straightforward browsing experience, where users can hover over movie libraries and receive instant feedback, such as trailers or additional details, which supports their multitasking tendencies. If a user finds a movie interesting, they can quickly access a detailed description and decide to either play or resume the movie.

‍

‍
‍

Movie Library Panel Design

For the redesign of the movie library panel , it's essential to consider the Oculus Quest's field of view (FOV), which is 89 degrees horizontally and 93 degrees vertically. A browsing main panel with dimensions of 960px x 640px, translating to physical dimensions of 480mm x 320mm at an ideal interaction distance of 0.5 meters, fits comfortably within this FOV. Users can view the entire panel without excessive head movement, which enhances the browsing experience. The resolution of 960px x 640px ensures clear text and images, while the panel’s width allows for side-by-side display of multiple elements, and the height provides ample space for scrolling content, making it user-friendly for interaction.

Additionally, I changed the panel's orientation from 9:16 to 16:9 to align with the typical widescreen orientation of movies. This not only provides a more cohesive and immersive viewing experience but also ensures that users are naturally transitioned from browsing content to watching it, as the screen orientation remains consistent throughout the process. This alignment between the browsing interface and the movie screen orientation minimizes disruptions and maintains the user's focus, further enhancing their interaction with the content.
‍

‍

‍

The defined grid on the browsing panel serves both UI and UX purposes. It is crucial for determining hand interaction durations for scrolling behavior, ensuring an optimal user experience. Extensive testing in simulations was necessary to find the most reliable grid sizing.

To enhance user interaction with the movie panel, I designed features aimed at optimizing the browsing experience and keeping users engaged, such as the hover interaction. This hover interaction for product cards in the movie library panel is designed to support natural browsing behavior while minimizing physical effort.

When a user hovers over a movie poster, the system distinguishes between intentional and accidental hovers, activating the hover state only after 400-500 milliseconds. This delay prevents unnecessary interactions during quick browsing, allowing users to explore content without interruptions from unintentional actions.

Once a hover is detected, the product card subtly enlarges the movie poster by 25% within its frame, drawing attention to the selected movie without overwhelming the user. This zoom effect, combined with a scrolling title for longer movie names, presents key information at a glance, helping users decide whether to engage further. The product card also features a boundary box that aligns with the user's controller movements, enabling easy and fluid navigation between movie options.

‍

‍

‍

‍

‍

‍

Movie Description Panel Design

‍

The inclusion of the Movie Description Panel and its hover-triggered interactions is informed by data on user multitasking habits during browsing. Research indicates that users often engage in multiple activities simultaneously, such as reading descriptions, analyzing movie details, and watching trailers. When a user hovers over a movie poster, the Movie Description Panel smoothly fades in, providing a concise overview of the selected movie. As the user hovers from one poster to another, the content within the panel dynamically updates, ensuring that relevant information is always readily available. I take this approach to make sure that user can take quicker decision-making by reducing the cognitive load associated with switching between different tasks.

‍

Users can effortlessly compare movies, view trailers, and read descriptions without having to navigate away from the browsing interface. To prevent unnecessary clutter and maintain focus, the Movie Description Panel disappears when the user hovers over an empty area, ensuring that the panel is only visible when actively needed.

‍

‍

‍

Some interesting data that have also caught the attention of Kariboo's founder, Roger as his preference , is the significant trend in how we consume content today: we are living in a "default of mute." This phenomenon reflects our constant exposure to content across various discovery platforms, such as YouTube, TikTok, and Instagram, where silent browsing has become the norm. Users often prefer to navigate these platforms with sound off, opting to engage only when something captures their attention.

‍

We are living in a "default of mute."

‍

Building on this insight, the Movie Description Panel's behavior is further refined that On Hover experience, we put a treshold delay of 7second before playing the trailer in the poster card , without sound.

Onclicks , the Movie Description Panel remains visible and the hover function is temporarily deactivated, allowing users to see deeper into the movie's details without accidental changes, with treshold delay of 7second before playing a trailer, without sound. This delay is strategically designed to differentiate between casual browsing and genuine interest. By allowing users to explore the movie library without immediate auditory intrusion, the interface respects the modern browsing preference of a muted experience, ensuring that users can interact with the content at their own pace.

‍

‍

‍

Placement Grid on Panels

‍

The Movie Description Panel is positioned 20 degrees down from the user’s POV, aligning with the "Curved Tilted UI Area  to ensure it stays within the user's natural line of sight for comfortable viewing. This strategic tilt enhances readability and keeps the panel accessible without obstructing other elements. Maintaining fluid browsing experience

‍

‍

‍

And finally, when the user decides to play a movie, the browsing main panel and the Movie Description Panel fade away, transitioning smoothly to full-screen movie playback. This design choice eliminates distractions and fully immerses the user in the viewing experience, marking a clear and satisfying conclusion to the browsing process.

‍

‍

‍

‍

‍

‍

One of the current testing have showed significant improvements , as while Old Application in takes 8 minutes of browsing and 2 out of 3 dont find anything that even got them to move from main browsing to  trailer panel ; the new re designed have a medium of 3 minutes 20 second browsing , and they found things that got them move from browsing to trailer panels.

The client expressed significant satisfaction with the designed, we are now continuing for watching behaviour. This positive response and the client's eagerness for expanded features showcase its potential for further customization to meet evolving needs.

Thank you for watching ❤️

‍