.png)
Adding The Max Insights Feature for Enhanced Viewing
User Research, UX/UI, Prototyping
In today's competitive streaming market, viewers want more than just content—they seek deeper insights and context. Without these features, HBO Max risks losing engagement to more interactive platforms. The Max Insights feature provides additional details like behind-the-scenes content, actor bios, and fun facts, all accessible during viewing. The challenge is to integrate these insights seamlessly, enhancing the experience without disrupting content flow, and fostering a stronger connection between users and the shows they love.
Figma, FigJam, Zoom
4 weeks
1. Conducted user interviews and surveys to identify viewer needs and preferences regarding context and insights while watching content.
2. Analyzed similar features on competing platforms to understand best practices and areas for improvement in user engagement.
3. Developed mid-fi and hi-fi wireframes, iterating on design based on user feedback to ensure an intuitive and seamless integration of the Max Insights feature.
4. Conducted usability tests to evaluate the feature's effectiveness and iterated to final design.
Understanding users' preferred formats of enhanced content info by conducting interviews
I began my research by interviewing five participants who frequently use online streaming services to understand their preferences and expectations regarding enhanced content information. Three participants were regular HBO Max users, while the other two frequently used platforms like Netflix, Prime Video, and Hulu.
Before the interviews, I envisioned potential presentations for the HBO Max Insights feature and created rough sketches. I shared these sketches during the interviews to facilitate discussions, which helped me explore the participants' preferred formats and delivery methods for receiving content information.
Envisioned potential presentation of the feature through some rough sketches
Users appreciated the additional cast, crew, and production details for enhancing immersion and understanding of the narrative.
A seamless, intuitive interface that doesn’t interrupt streaming was highly valued.
The interactive elements, like clickable actor names or related content, received positive feedback for adding insights within the platform.
Accurate, reliable data and timely updates were deemed essential for this feature’s success.
Users appreciated options to customize the depth and frequency of context information, giving them more control.
A blend of visual elements (actor headshots, posters) with concise text, presented in pop-ups or overlays, was well-received.
Competitive analysis for enhanced content features
After conducting the user interviews, I explored some direct competitors in the streaming marketplace, including Amazon Prime, Netflix, Hulu, Peacock, and Disney Plus, to assess how they meet their target customers' needs. This was a daunting task, given the presence of these well-established companies. I examined their unique features, content libraries, user interfaces, and value propositions. For instance, Netflix excels with its original content and interface, Hulu offers a blend of live TV and on-demand options, Peacock provides free and premium tiers, Amazon Prime integrates with other Amazon services and features X-Ray, and Disney Plus appeals to families with its extensive Disney, Pixar, Marvel, and Star Wars content.
To further deepen my understanding, I analyzed the X-Ray feature on Amazon Prime and similar offerings on other platforms. This process not only helped identify opportunities for HBO Max to improve its user experience but also revealed common pitfalls to avoid. By understanding the competitive landscape, I was able to identify areas where HBO Max could better cater to its audience and remain competitive.
Amazon Prime Video's X-Ray feature offers real-time context, trivia, and detailed information while the content is playing.
While not as extensive as X-Ray, Netflix offers some contextual information through its "Info" button, providing details about the cast, crew, and a brief synopsis.
Hulu provides basic information about shows and movies, but it doesn't have an extensive feature like X-Ray for in-depth context.
Peacock offers some bonus content features but does not have a feature as comprehensive as X-Ray.
DisneyPlus occasionally includes extras like behind-the-scenes videos, documentaries, and deleted scenes for some of its content, though not integrated directly into the viewing experience like X-Ray.
YouTube TV presents context information through the video's watch page, which includes a brief description or synopsis, the video's title, uploader information, view count, and upload date.
Guiding design solutions through research insights
Based on the competitor analysis and user research, I developed a well-rounded understanding of the users' motivations, needs, and frustrations. To ensure my design solutions were user-centered, I created two user personas, Sarah, the inquisitive and engaged content explorer, and Alex, the passionate film buff and insightful online contributor. They helped guide the ideation process and address key challenges identified during my research.
With that, I wondered...
How might we provide the context information to users while they are watching movies or TV shows and the information doesn’t disrupt their primary movie-watching experience?
Designing task flows for feature activation and content discovery
I began mapping out the task flow for the user when turning on the feature while playing the movie or TV shows. I also made a flow for users to update the category of context information they’d like to see, and a flow for users to see a list of programs available on HBO max involving the same actor they are interested in through Max Insights.
1. Turn on the feature while playing the movie/TV shows:
2. Update category of information to display through options:
3. See a list of movies played by the same actor through Max Insights feature:
Designing user-centric context presentation for enhanced engagement
Once I had mapped out these user flows, I shifted my focus to how the context information would be presented to the users. I considered various ways to display the context information on the screen for the Max Insights feature, each with its own advantages and disadvantages.
The sidebar is easily accessible without fully obstructing the view but is often too narrow for detailed information and can feel intrusive on smaller screens.
Tooltips are unobtrusive and offer quick, contextual insights but often lack space for detailed content and can be difficult to interact with on touch devices.
Pop-up bubbles are less intrusive and can provide relevant information where needed. However, like tooltips, they lack space for detailed info and can clutter the screen if overused.
The overlay provides quick access to insights like cast info and trivia without stopping the movie, ensuring consistent design across devices. While it allows for detailed engagement, pausing the movie may disrupt the viewing flow.
Ultimately, I chose a design that takes over the entire screen and pauses the movie when users want more context information. This allows users to fully engage with the additional content without distractions and ensures they can resume the movie from where they left off without losing their progress. Additionally, this full-screen overlay is more technically feasible and provides a consistent user experience across various devices and screen sizes. This approach also aligns with user expectations for in-depth information access, enhancing overall satisfaction with the feature.
Symbolizing knowledge: the thoughtful choice and placement of the Max Insights icon
I selected a light bulb as the icon for Max Insights on HBO Max, symbolizing enlightenment and aligning with the feature’s goal of enhancing the viewing experience through contextual information. Other icons like an eye, movie glasses, “i” for information, and a magnifier were considered but felt less fitting, as they imply basic visuals or searching. The light bulb better conveys the idea of illuminating knowledge, making it the ideal choice.
I placed the light bulb icon for Max Insights next to the movie/TV show title to indicate available contextual information clearly. Positioning it here, rather than near playback controls, keeps the playback interface uncluttered and reinforces that Max Insights is separate from playback functions.
Designing informative and accessible card styles
I explored different styles of cards for the Max Insights feature, which provides context information. These cards fall into two categories: one for cast and characters, which includes a headshot of the actor or actress, and the other containing text only.
For the headshot cards, I selected a design with the headshot on the left and the actor's name on the right because it is more visually appealing, easier to read, and maintains consistency with common visual layouts. Given the limited screen space on TVs and laptops, I opted to make all the cards the same width for a more organized appearance, ensuring a better use of screen space, especially on wide screen TVs and laptops, avoiding clutter and making the information more accessible at a glance.
Card Style: I selected a design with the headshot on the left and the actor's name on the right because it is more visually appealing, easier to read, and maintains consistency with common visual layouts. All the cards have same width for a more organized appearance, ensuring a better use of screen space, especially on wide screen TVs and laptops, making the information more accessible at a glance.
Standardizing card sizes for enhanced consistency and usability
Moving on to next level, I consolidated all elements and refined the details to ensure the prototype functions effectively. Initially, I designed each card with varying lengths to fit their content. However, this approach created inconsistencies, making implementation challenging and harder to follow. To address this, I standardized the card sizes: all cast and character cards are the same size, as are the cards for other types of information. This uniformity allows each column to hold either two cast and character cards or one other information card. This layout is demonstrated in my mid-fidelity wireframes.
Card sizes are standardized: all cast and character cards are the same size, as are the cards for other types of information.
Refining typography for visual cohesion
Additionally, I experimented with different sizes, weights, and alignments for the title and body text on the cards. My goal was to ensure these elements align with the current HBO Max UI style, achieving a cohesive and visually appealing design.
After exploring different layouts for card, I decided to go with the one with category listed at the top and has its title highlighted with largest font size.
Refining text and enhancing readability in Hi-Fi wireframes
For the Hi-Fi wireframes, I further refined the sizes of the title and body text and added a "See Source Page" to the cards to enhance the readability of the context information.
Moderated tests
Participants dialed into Zoom and screenshared from their laptops.
Discover the HBO Max Insights Feature on Its Platform
Adjust Settings for the HBO Max Insights
Overall, the test result was positive!
Three out of five participants were able to find this feature almost immediately. However, this result may be biased, as it depends on whether the user has previously used the HBO Max interface. All three existing HBO Max users located the new feature right away, while the two non-users struggled to find it. Overall, the test is successful if we focus on current HBO Max users, as this is a new feature on the HBO Max interface. For the next round of usability testing, I would select participants who have used HBO Max before to ensure more accurate results.
All participants were able to find the options button and make adjustments. The placement of the options button was intuitive for most users. Four out of five participants felt that adjustments made for one movie should apply to other movies as well. Therefore, I will ensure that if a user unchecks any box on the settings page, this preference will remain unchecked across all movies and shows.
Based on the test result, I made several changes:
Before
After
Updated the Max Insights icon to be outlined for its default status. This style is more consistent with the existing UI style. I made it solid when being hovered and it looks more like a lighted bulb.
Added a caption to the hover state of Max Insights button and Insights Option button to clarify their function (also being consistent with HBO’s existing design system).
Added a description for the Insights Option page - "Personalize the information you want to see in Insights".
Adjusted the body text size and space between the rows for the card to make it more readable.
Replaced “See Source Page” with actual website name to inform where the user is going to upon clicking it.
Added an external link icon next to the source link to show the user is taken to an external website.
Adapting to product constraints and navigating user familiarity in feature integration
This project provided valuable insights into adapting and implementing new features within an existing product. As a UX designer, I navigated constant change, feedback, and iteration, learning to balance respect for the current design with the integration of new elements. Integrating the Max Insights feature into HBO Max required careful consideration to ensure it complemented the existing user experience and addressed technical constraints, including compatibility across various devices and screen sizes.
A unique challenge during usability testing was the observed bias based on participants’ familiarity with HBO Max. Results showed that existing users found the feature more intuitive, highlighting the need to account for user familiarity when assessing new features. Additionally, the flat-screen size of the interface posed design challenges, as it required balancing the feature’s visibility and functionality without overwhelming the screen.
