HBO Go platform was designed by Jon Snow — he knew nothing

Jerzy Bartoszewicz
10Clouds
Published in
11 min readSep 20, 2019
Illustration by Igor Kozak from 10Clouds

The times of television monopoly are gone for good. Streaming platforms have dominated the serial market, offering titles whose quality increasingly exceeds Hollywood hits. In addition to that, what attracts us to streaming is the flexibility and content available at any time. Users can watch what they want when they want, without the need to worry about ad interruptions or device limitations that would affect their viewing pleasure. So it’s safe to say that in addition to the content itself, the form in which it is delivered to viewers is equally important.

Without a doubt, aside from Amazon Prime and Netflix, one of the most important streaming platforms on the market is HBO Go. The great number of productions is proof of it. Chernobyl left viewers and critics speechless, but the one that blew up HBO is Game of Thrones. And that happened to be the primary reason why many viewers to subscribe to the platform. With the premiere of every season, we could see the spike in registered viewers. But interestingly, at the end of the last season, the number of paid users dropped by 16%. It begs to question if that number of dropped users were only interested in Game of Thrones. And it also made us designers here at 10Clouds ask if the bad UX and UI of the platform played a part in this.

Just doing a quick search on the web reveals what’s going on. Many users complained about the shortcomings in how the information is organized and the way how the whole platform works. The UX and design of HBO Go don’t match up to the quality of the productions. The Verge even wrote an article about how bad it is.

The more opinions you read, the more it can be concluded that the designer of the website was Jon Snow; he knew nothing. It’s for that reason that we decided to apply the in-depth UX Audit, to see where the UX and UI are lacking and how to improve it. It is the first step towards improving user experience because it allows you to identify and evaluate problems.

What is UX Audit and what is it for?

It’s a method of evaluating a website to check the usability quality for a target group and if users can complete their goals. In detail, it will look at specific processes, highlighting any issues, and defining a solution to improve this.

The audit should be conducted based on the auditor’s knowledge and experience. In addition to auditing individual screens, it will also cover subpages and the entire process (e.g. signing up as a new user, completing the purchase, or finding a series and watching it).

Only by going through each process in detail will you uncover errors or problems that a user can also encounter throughout the website.

It’s also important to highlight that a usability audit is not the only and final assessment of the website or service — it’s a small part of a bigger research process.

Usability audits answer the following questions:

  • What are the issues in the application/website/online store
  • What are the weaknesses and strengths of your website
  • How can the found errors affect the behavior of your customers
  • Which of these errors affects the brand image or sales
  • What improvements can be made to eliminate them
  • What are the process or designs changes to be made

Thanks to this it will allow the following:

  • Improve the brand image with a website that meets the usability requirements
  • Increase conversion/sales
  • Ensure a more pleasant and convenient use of the website
  • Prevention of errors that limit users from completing their goals
  • Easier and faster process to select products or services within the site
  • Increasing company credibility
  • Simplifying the ability to find information on the site
  • Ensure that the right amount of content is presented to users to avoid any distractions from their task
  • Begin the process of regularly improving the website’s competitiveness

UX Audit at 10Clouds

As designers at 10Clouds, we focus on creating new products from scratch and also helping our clients improve their existing digital products and services. One of the first stages of this process is to conduct a UX Audit. Here at 10Clouds, we have three types that we sell to our clients:

Heuristic evaluation — An interface and experience assessment using the ten heuristics by Nielsen. These heuristics relate to the system behavior, user experience, and the visual layer itself.

Cognitive walkthrough — Highlights current issues set against UX principles where an evaluator asks a set of questions from the perspective of the user and provides improvement recommendations.

Rapid UX Audit — A simplified version that combines the heuristics evaluation and cognitive walkthrough that allows us to quickly deliver recommendations and improvements set against UX principles

Heuristics evaluation for HBO Go

For the HBO Go audit, we concluded that the best way to evaluate the experience is to use the 10 heuristics by Nielsen. These are a set of well-understood design principles that promote efficiency in use, usability, and generally good design. Have a look below for an overview of these:

  1. Visibility of system status — Always keep users informed about what is going on and provide appropriate feedback within a reasonable time.
  2. Match between system and the real world — Design systems based on familiar ideas and concepts that apply the user’s language that prompts familiarity.
  3. User control and freedom — Put the user in charge and give them the ability to do things freely, with the ability to undo or redo.
  4. Consistency and standards — Stick to design patterns and conventions where possible to avoid any ambiguity. Users shouldn’t have to wonder whether different words or actions have the same meaning
  5. Error prevention — A good design should prevent problems from occurring in the first place. And an error can be prevented by introducing confirmation steps or the ability to undo/redo.
  6. Recognition rather than recall — Present a consistency throughout that tackles actions, options, information, and flow. The aim here is to limit guesswork and how much users need to think up options themselves.
  7. Flexibility and efficiency of use — Make the designs flexible to cater to novice and expert users, with the ability to customize actions to their needs.
  8. Aesthetic and minimalist design — Ensure that everything that is presented to the user is necessary and useful. Refrain from presenting irrelevant information, as it will reduce the relative visibility.
  9. Recognize, diagnose and recover from errors — When help and instructions are needed, they should be expressed in plain language, precisely indicate the problem, constructively suggest a solution.
  10. Help and documentation — Provide documentation to users if it is required. Help information should be easy to search and to the point.

Audit scale

When auditing HBO Go, we use colors to highlight the severity of an issue or to highlight. Fortunately, we did not come across any Critical Errors. The scale is:

Critical Errors (red) — These can stop or severely limit the user’s ability to complete one of their goals.

Serious Errors (orange) — These can make it difficult for a user to complete one of their goals

Noticeable Errors (yellow) — These are the type of errors that make users can work around with some difficulty, but ultimately affects the experience negatively.

Cosmetic Errors (beige) — Defined as small errors that can make the experience less enjoyable.

Audit Scale

Throughout the evaluation, we didn’t come across any critical errors. But we came across numerous 8 serious, 33 noticeable, and 8 cosmetic errors that affect the experience negatively.

Audit of selected HBO Go pages

Since the entire HBO Go audit is 46 slides, I’ve compressed it down to show some of the key screens that represent different areas of the platform, namely:

  1. Registration form page
  2. Platform homepage

These screens hold the most important goals users want to achieve with HBO Go. And highlighted below are the difficulties they face when using the platform. Let’s dive in!

Registration Form

Registration Form
  1. Error Prevention (serious): Users will see this overlay when they click on the register button. And here we can see that there’s a back button that will leave users to wonder what the purpose is of this and also what will happen if they click on this. Going down this path could cause confusion and errors, ensuring a negative experience from the start.
  2. Error prevention (noticeable): Here we can see that the register screen is a scrollable overlay, hiding information below the fold. There can be a design solution that shows all the information, without needing to scroll.
  3. Aesthetics and minimalist design (cosmetic): The background image in this overlay affects the signal-to-noise ratio, which can distract users from the primary task at hand.
  4. Aesthetics and minimalist design (noticeable): This section summarises the benefits of HBO Go. Although, because there is a lot of information visible set in small font-sizes it will distract users from registering.
  5. Recognition rather than recall (noticeable): The benefits mention that users get a 1-month free trial, but there is no mention anywhere or on the homepage of how much this will cost. This is a dark pattern to get users to sign up and later find out how much they will be billed.
  6. Error prevention (noticeable): The fields don’t have helper text or in-line validation to show what the requirements are for a correct password. This is something small, but crucial to have for every form

Platform Homepage

Platform Homepage
  1. Aesthetics and minimalist design (noticeable): Landing on the platform homepage, the first impression users will get is how much content is visible, starting with a rotating carousel with series and movies. If users are bombarded with content, it will make it challenging to find the most important information, action, and a series or movie to watch.
  2. Error prevention (cosmetic): The primary nav is placed on top of the imagery with a transparent background. This can cause legibility errors or simply that users have to put in more effort to spot it.
  3. User control and freedom (serious): When adding a movie or series to your watchlist, there is no ability to access a page for this. Users can only access this on the homepage, below the recommendations section.
  4. Aesthetics and minimalist design (noticeable): The signal-to-noise ratio of the featured series and movies section is out of balance. Users are bombarded with content. There can be an effective design solution that will present users with content, without bombarding them.
  5. User control and freedom (noticeable): The primary goal of users is to watch a series or movie by clicking as little as possible. Unfortunately, when clicking on a series or page will present the page for that, where users can then start playing.

Movie Page

Movie Page
  1. Flexibility and efficiency of use (noticeable): The primary action of this page is to play the movie. However, when first looking at this page, it took us a while to spot the play button. Users will need to scan the page to find the play button. This should be more prominent. Sometimes making a button bigger is just what is needed.
  2. Recognition rather than recall (noticeable): This movie has been previously played, but users cannot see this or how far along they are.
  3. Aesthetics and minimalist design (noticeable): Overloading users with information makes it difficult to focus on the primary task, which is finding the play button and starting to watch the movie.

Series Page

Series Page
  1. Visibility of system status(serious): The series page does not show which episodes have been watched, as well as where users left off on a specific episode they were watching. This leads to a situation in which, after a long break in watching, the user is forced to check each episode, whether it is the one on which he ended watching last. Even worse if it was paused during the episode.

Recommendations

After having compiled the issues we found on HBO Go, we prepared a proposal to redesign the platform homepage and a series page. The goal of this is to visualise our UX and UI design recommendations that would address the key issues. As one might expect, small hotfix changes are often enough to significantly improve the usability of the product, instead of overhauling the entire product. Below you can gaze at the final result we came up with.

Platform Homepage — Designs by Michał Czekaj

Platform homepage

When viewing the homepage of HBO Go, the first thing that comes to mind is how cluttered it looks due to the bombardment of content. And so, the first obvious step was to provide users with just the right amount of content that doesn’t overwhelm them. On top of that, the redesign has to allow users to easily explore series and movies to help them find something that fits their interests.

We also tweaked the design of the primary navigation to allow users always to have access to the navigation, especially when scrolling through the page. The primary nav also includes a link to the watchlist page. By having this, users can jump to a dedicated page with all the series or movies they’ve added to a list.

Lastly, it baffled us that HBO Go is unable to show what you’ve watched or started watching. A simple feature that would greatly help users if it was there. Below we highlight all this and more on how we improved the homepage.

Homepage — Designs by Michał Czekaj

Series page

The issue that we found with the series page was once again that users are bombarded with information about the series. The interaction of scrolling through a season or episode just needed some love.

Continuing on the improvements, we needed to provide a solution that presents episodes and seasons up front where you could scroll through them or jump to any season. Lastly, it was crucial to visualise which episodes you’ve already seen, which ones you’ve started watching, and which ones are new.

Series Page — By Michał Czekaj

Many more improvements were made to HBO Go platform, but for the sake of not making this article too long, we’ll leave it at this. 😄

Conclusion

Our audit showed that the HBO Go platform has a few serious errors, a bunch of noticeable errors, and a handful of cosmetic errors. All of these errors affect the user experience and greatly reduces the pleasure of using a paid platform. Fortunately, we did not come across any critical errors. So it seems, viewers could achieve the most important goals, with some slight annoyances. If you want to see our full audit of HBO Go platform you can do it here.

With a UX Audit, we wanted to highlight the issues users may encounter that limits them from achieving their goals. And to show how it should be to get rid of all the errors, we provide UI designs with the recommendations. This process can be done rather quickly, while also keeps the cost relatively low.

Overall, it’s a quick process at a low cost that benefits our clients in every way. If you have a digital product or service and would like to get an expert opinion on the usability and how it can be improved from a UX and UI standpoint, feel free to get in touch. 😊

Special thanks to Gialdo Muller for hard work on preparing the audit, to Igor Kozak for article header illustration and to Michał Czekaj conceptual redesigns of the UI.

--

--

Jerzy Bartoszewicz
10Clouds

UX Designer @ 10Clouds / video games journalist after hours