20 Sep · 8 min read
Challenge: Improve the usability and immersiveness of HBO’s browser-based streaming service by addressing problems with search, browsing and content personalization.
Solution: Using UX audit to address core issues, then using UX and UI design to create a better user experience.
User Group: HBO Go users
HBO Max is an upcoming video-on-demand streaming service set to release in the spring of 2020. Based on the two available HBO services released before Max, we decided to create a visually stunning concept design of our own, backed by user research and usability tests.
The whole process took us less than three working weeks of 2 people.
Our creative process was constructed around the idea that the final design should not only represent a strong and visually stunning brand image but primarily increase the usability and immersiveness of prior HBO ventures in the VoD space.
Our process was divided into three stages — UX Strategy, UX Design, and UI Design.
As many of our colleagues were HBO GO users, we heard many comments about the user experience problems with the platform. The team behind the project set out to define a problem statement that we would later explore with user research and address during the design phases:
Improve the usability and immersiveness of HBO’s browser-based streaming service by addressing search, browsing, and content personalization problems.
Our research was prepared with previously determined problem statements in mind. We wanted to look into those issues further to evaluate their complexity and get closer to our desired goal of improved user experience.
Remember that our project was purely design-orientated, so we intentionally decided not to get in-depth with technical problems that could not be solved by design work.
78% of users use HBO GO to continue watching series and movies, 14% for looking for new things and 8% for other purposes.
We gathered tons of responses in a Google Forms survey we sent out to HBO GO users.
The survey helped us identify the users’ usage patterns and gather insights into the problems that surface in the platform’s day-to-day use.
The right mix of qualitative and quantitative data fed into an in-depth exploration of the problem statement we had set.
Our main observations were:
Usage patterns and overall comments are not enough when redesigning an interface so limited in scope (the whole app is, in fact, less than ten screens).
We needed to get into the nitty-gritty of the particular features’ usability.
We found over 50 usability issues in HBO GO web application.
Asking our test group to perform specific tasks on the existing HBO GO site allowed us to have an insight into how the users normally operate. Those tests let us observe pain points in real-time and confirm the validity of our initial problem statements.
We typically use Lookback to facilitate our testing (both face-to-face and remote), and it did the job well. One researcher was able to conduct the tests while the other noted down the key observations; everything in real-time!
Among the tasks we gave to our participants were:
The fact that all of the tiles looked precisely the same was also not helpful in finding your way around the interface.
Thanks to usability testing, we were able to see first-hand that users find it hard to browse content without the possibility to filter and sort.
Any content saved for later was surprisingly tricky to find in the interface, making the “My List” feature our core interest immediately.
Many users didn’t use the search functionality, which corresponded to what we learned in the Google Form survey.
One of the biggest lessons that influenced our design was differentiating the use cases between watching series and watching movies.
I have a completely different mindset when I want to watch an episode of a TV show: I want something shorter and something that I know, so I know what to expect. Watching a movie is a whole different operation — carving out at least 2 hours of my time makes it worth to prepare or buy some snacks and drinks.
A user during our usability testing session
User testing typically helps find most of the core problems in the app. However, we wanted to go even deeper with the analysis, so we conducted a UX audit to supplement it.
Audits help find high-level problems, as well as tiny details that make a difference when you use the interface every day.
Here are a couple of problems we wanted to avoid when redesigning the interface:
… and 37 more problems. After the audit, we created three lists:
The next step in our design process was to create low-fidelity wireframes. They allowed us to see how our research-based solutions work in a basic visual form.
But let’s dive deeper into how we addressed the core problems.
Even though the “My List” feature is very popular in streaming services, currently, it is almost impossible to find in HBO GO, while the platform is pushing generic content to the users.
We decided to make this functionality easily accessible from the main navigation and split it into series and movies. As I mentioned earlier, we discovered that watching series and movies are two completely different use cases, so we decided to split it into Movies and Series tabs.
Due to the confusion it caused, we decided the content tiles should be different for series and movies, as watching each of them was an entirely different use case for the user.
Our usability testing respondents had substantial problems finding interesting movies or series.
We also felt that the homepage did not allow enough interaction on the tiles, and that’s why we introduced hover previews and an “Add to my list” button.
All micro-interactions needed to be carefully crafted for maximum usability and compact layout.
When working on the visual design we wanted to give it a distinct personality and a strong brand image separate from HBO’s prior Video on Demand ventures HBO GO and HBO NOW.
The Dark UI design was used to provide a cinema-like experience. But it was equally important to present HBO’s diverse and extensive database clearly and give users’ the most accessible access.
The use of rich contrast among active elements was desired to keep users in touch with what they can do and where they are now.
Interactions are an essential part of user experience; that’s why we focused on making them pretty to look at and increasing the product’s usability.
When hovering over a poster block, the user gets access to additional information about it: the number of seasons, its length, or what genre it is. That way, we are separating details from other visible elements so that the screen doesn’t get cluttered with information that divides users’ attention.
We wanted to make the transitions as fluid and as seamless as possible. That way, there is no disconnect when going between separate pages while using the service. Every single one of them feels like a part of a bigger whole.
As an addition to the web-based service, we also designed a companion app providing users with a couple of features to augment the basic browsing and watching experience:
Showcasing additional information related to the ongoing scene is the key feature of the companion app. Displayed info can include:
All this information can be interacted with to provide more details, or, like in the case of physical goods; users can go straight to the online store and buy them.
Our amazing UI designers put together this beautiful animation that showcases the final effect of the work of the whole team: