Considering Daniel's goals and pain points, the main goal is to make the search and surfing through movies and episodes easier and faster.
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.
Overview
Problem
Movies are not categorized by Release Year and there is no movie category to find New Releases.
The users cannot easily go to the Next or Previous episode while watching an episode.
The users cannot watch the trailer when hovering over the movie or series on the search page.
The users don't have access to the in-scene cast and music while watching the movies or series.
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
Create and add two categories of New Releases and Release Year to the Movies category bar.
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.
Add a new feature to provide information about casts and music in the scene by hovering on the screen.
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
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.
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.
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.
As a user, I want to select the Next/Previous episode while watching an episode without going to the series main page.
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:
Category
I added New Releases and Released Year to the category bar in a specific order with consideration of user preference and priority.
Category
When users click on the Released Year they can easily find the movies/series published in that specific year.
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.
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.
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.