Redesigning the HBO VOD Experience

A brief story on how our team approached a conceptual UX and UI redesign project for HBO’s primary VOD service.

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.

Crafting the HBO VOD design process

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.

The problem statement

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.

Exploring the needs

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.

Running a good ol’ survey

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:

Pinpointing usability issues

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.

Usability testing

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

UX audit

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:

UX Design

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.

Finding a way to continue watching

Continue watching is the core task for the HBO GO users. Technical sync problems aside, the “Continue” section was difficult to differentiate from the rest of the page. We decided to make the tiles stand out and place them so they appear above the fold on most computer screens. We have also made it easier to play the next episode straight from the series page.

I want “My List” to be at hand

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.

Content discovery needs help

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.

UI Design

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.

Making it interactive

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.

Rich hovers

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.

Transitions

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.

The companion app

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:

Augmenting the 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.

The final effect of HBO VOD redesign

Our amazing UI designers put together this beautiful animation that showcases the final effect of the work of the whole team: