Title: HBO Max Webapp Redesign Case Study
Case Study Overview:
To redesign a website, webapp, or app and execute the user experience (UX)/user interface (UI) design process to create a high-fidelity solution to there UX/UI design issues.
Length of Project:
Three weeks from start to finish.
Teammates:
Alberto Rossi, Alexus Green, Derek Hickman, Xavier Santana
Organization:
UCF UX/UI Design Bootcamp
Tools Used:
Figma, FigJam, Github, Google Forms, Zoom, Slack, Trello
Project Overview
The Problem:
HBO Max’s website/web app is heavily critcized. It has a poor user interface system, which contibutes to a poor user experience that causes users to stop using the streaming service.
The Solution:
We believed redesigning the HBO Max website user interface will improve the user’s experience and lead to users viewing their experience positively.
To achieve this we:
Update the UI system to reflect the best streaming service features. Adding on screen menus to provide easier navigation.
Improved the sign in process to make it more personable by adding distinct user profile icons using Warner Brothers characters.
Reorder and update genre categories and present them in a more logical order with defined hierarchy.
Provide users a way to have more control over various settings (i.e captions, recommendations, etc.)
Research
How did you conduct the research?
We conducted 3 user interviews. As well as a user survey. We also reviewed over 100 of the most recent user reviews.
Things we learned?
Most users have Netflix as their favorite streaming service.
Most users value overall content most when deciding which streaming services they enjoy most.
Users selected content to watch mostly based on top ten rankings, recommended content, or trending content.
Users had trouble with HBOMAX’s caption and playback settings.
User interface and reliability were the top things users valued after content.
Improvements
We focused on improving the user flow from signing in, selecting user settings, and selecting content to watch. We felt as UX designers we could have the most impact by improving the UI of these areas of the HBOMAX website.
We focused on improving the user flow from signing in, selecting user settings, and selecting content to watch. We felt as UX designers we could have the most impact by improving the UI of these areas of the HBOMAX website.
Iteration
Wire Frame (Desktop)
We began initially with sketches of what we thought should be on the different web pages and how the information should be displayed. We made sketches for the settings, the homepage, movies page, and the selected movie page. We also included a new navigation system in our sketches, that provided on screen menus instead of a menu hidden in a hamburger menu like the current website.
First Iteration Lo-fi Wireframe(Desktop)
For our low fidelity wireframe and prototype we created pages for the splash/sign in screen. We wanted to improve upon this process from the original. We also created a dedicated page for user settings. We made an improved homepage with the new navigation systems with top navbar and reorganized categories that included a section for Top 10, Continue Watching, Trending, and recommended content. We next added a Movies page to include in our user flow. This page includes reorganized genre categories displayed on the screen. Lastly we added a page for a selected movie collection.
User Testing
We conducted four user tests on our low fidelity wireframe. The main objective was to test the new look and navigation system. We wanted to see if users could easily move throughout the redesigned website, we wanted to see if they could complete each process from signing in, selecting settings, and selecting a movie, also we wanted to know if this made for a pleasant experience. Our testing proved that our new navigation system was functional and easy to use. Users were able to quickly interpret what they needed to do with little assistance. One common complaint was after settings were selected, the confirmation screens stayed up for too long and confused users on how to move past them.
Final Iteration Hi-Fi Prototype
For the final iteration we completed our new splash/sign in screen by adding a tv static animation to the background since this graphic is famous for HBO and would add to the nostalgia and familiarity of users. We also added in pictures of movie and tv show characters for the user profile selection screen to make it more personal and easier to distinguish which user profile is who. We also decided to keep the dark gradient background from the original website because we felt it allows the content pop on the screen and standout and keeps the new design familiar to users. On the movie collections page we used the hero image to make an interactive movie selector. We did this by giving each movie its own section of the hero image space, and when the user hovers over each image it would enlarge itself over the other images to show that it was the active selection. Once selected that movie would then fill the hero image space and details about the selected movie would appear. We thought this would make the selection process easier and quicker.
