HBOmax

Redisigning HBOmax to improve user experience

HBOmax

User Interface Design

The HBOmax streaming platform is one of the best in the market with its great content. Millions of movies and series watchers are using HBOmax every day. Due to its popularity and my interest, I analyzed the HBOmax user interface, compared with top competitors, and proposed and designed new features based on the users' feedbacks.

View Figma Prototype

User Interface Redesign
Overview

Problem

  1. Movies are not categorized by Release Year and there is no movie category to find New Releases.

  2. The users cannot easily go to the Next or Previous episode while watching an episode.

  3. The users cannot watch the trailer when hovering over the movie or series on the search page.

  4. The users don't have access to the in-scene cast and music while watching the movies or series.

User Interface Redesign

Insights

Most of the respondents are using other streaming platforms (e.g., Netflix and Amazon Prime Video) along with HBOmax to watch popular series and movies. The respondents stated that the HBOmax is one of the best in terms of content but its user interface could be improved to make it a hassle-free user experience while searching for movies/series and watching them.

Solutions

  1. Create and add two categories of New Releases and Release Year to the Movies category bar.

  2. Provide Next and Previous buttons on the video control bar to allow users to select next/previous episodes without stopping the episode and going out to the series home page.

  3. Add a new feature to provide information about casts and music in the scene by hovering on the screen.

  4. Enable users to watch the trailer when hovering on the movie or series posters on the category page.

Process

Research

To better understand the user needs and preferences with the current HBOmax streaming user interface, I conducted a user survey and interviews. I also observed users performing some pre-defined tasks and conducted usability testing to identify users' pain points in different areas.

User Survey and Interview

To better understand the user needs for the HBOmax user interface, I conducted a user survey with different demographics.

62
User Survey
15
Survey Questions
6
Interviews
User Interface Redesign

Key takeaways from my user research:

  • Most of the users watch HBOmax videos under laptops and want to search movies in two additional categories of new releases and release years.

  • Users stated they would like to select the next or previous episodes in a faster way, and get more information on the cast and music while watching the videos.

  • The majority of users want to watch a quick trailer before opening the videos and save time.

Persona

The insights I gained from surveys and interviews leading up to the persona. The main goal is to display those patterns and pain points, which allowed me to further empathize with users.

User Interface Redesign

Considering Daniel's goals and pain points, the main goal is to make the search and surfing through movies and episodes easier and faster.

Competitive Analysis Highlights

I analyzed the top competitors of HBOmax against new features that I proposed and found that non of the competitors are providing all of the features together on their user interface. With my proposed redesign, HBOmax would be able to add more value to its users by addressing their untapped pain points.

User Interface Redesign

The redesign version of HBOmax contains all of the features!

User Flow & User Stories

After conducting user studies and competitive analysis, I created user stories to highlight the main features of the product. Then I converted user stories into user flows in Figma, to illustrate how the users would interact with my proposed features and accomplish their goals.

User Interface Redesign

As a user, I want to select the Next/Previous episode while watching an episode without going to the series main page.

User Interface Redesign

As a user, I want to find movies/series that were released recently or in a specific year.

Wireframe

Series Streaming page Wireframes

I analyzed competitors' platforms and conducted usability testing by showing different feature layouts to users and gathering their feedback.

The second wireframe was simpler and easy to navigate for users, so I made hi-fi prototypes based on the second choice.

Prototype

High Fidelity Prototype

To improve the HBOmax user experience, I redesigned five features that were claimed in my user surveys and testings. Below are Hi-Fi prototypes:

User Interface Redesign

Category

I added New Releases and Released Year to the category bar in a specific order with consideration of user preference and priority.

User Interface Redesign

Category

When users click on the Released Year they can easily find the movies/series published in that specific year.

User Interface Redesign

Switch Between Episodes

I added the Next and Previous buttons on the control bar of the episode screen that enables the user to easily switch between next and previous episodes while watching one episode.

User Interface Redesign

In-Screen Information

With the new design, the users can now see the information of the in-screen acting casts and playing music while watching a movie or series.

Trailers

On the home page, the users can hover on the movie/series titles and watch their brief trailers without opening them.

User Validation

User Satisfaction

To validate my proposed redesign for HBOmax, I conducted a post-design survey for each feature, gathering feedback from 12 users on how they liked the new feature.

User Interface Redesign

Most of the users liked the redesigned and proposed features. On average 90% of users stated the new features are a must to have.

Interactive Prototype

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Next Steps

I would consider other streaming devices including smart TV, cell phones, and AR/VR devices user interface evaluation and redesign for HBOmax; Specifically for smart TVs with different remote control capabilities. I would consider new features and accessibility for the Metaverse platform and AR/VR streaming devices for long-term applications.