Hulu UX Teardown: 5 UX Fails & How to Fix Them

Hulu stands out as the initial prominent streaming service to introduce a feature enabling viewers to watch content together socially. Considering the recent permissions granted for most major professional sports to recommence play without live audiences, the synergy between Hulu and ESPN is anticipated to provide entertainment for the platform’s subscriber base of over 30 million throughout the coming winter season.

However, consumers currently have a wide array of streaming options available, raising the question of how Hulu will maintain its competitive edge.

Collaborating with user experience specialist Peter Ramsey of Built for Mars, we will conduct a detailed UX analysis of Hulu, outlining five potential areas for enhancement to its overall user experience. These improvements encompass simplified product comparisons, standardized element widths, appropriately scaled progress indicators, and further recommendations.

Comparing features inside packages

When your product or service offers multiple tiers or versions, it’s crucial to present the distinctions between them in a clear and easily understandable manner.

A common mistake is seen with Hulu, which provides four distinct packages, but presents the included features in an inconsistent way across each option. This makes a direct comparison exceptionally challenging, as the benefits are hidden within lengthy paragraphs rather than being readily visible.

The solution is to restructure the information using bullet points. Furthermore, ensure that the wording of these bullet points remains consistent as you move between the different options being presented.

 

Steve O’Hear: I find it quite surprising that this design choice made it through the marketing review process. There isn’t much more to say other than to suggest that when user experience – including both the layout and the written content – is not aligned with business objectives and customer needs, a company faces significant challenges. Do you share this perspective?

Peter Ramsey: To be honest, this situation is quite frequent. I believe it’s simply a result of designers prioritizing aesthetic appeal over functional effectiveness. I typically identify this issue in approximately one-third of the private audits I conduct – it’s a remarkably common occurrence.

Maintain a Uniform Width

It’s best to strive for a consistent page width throughout a user’s experience—unless a change in width offers a significant advantage.

An example of this occurring: During the Hulu registration process, the page width unexpectedly doubles at a point where it isn’t needed. This can be confusing for users, as there’s no clear reason for the change.

The solution: Hulu generally maintains a consistent design in the initial stages of the user journey, but this consistency is broken later on. Redesigning these unusually wide pages to match the standard width would improve the experience.

To be sure, the issue isn’t necessarily the page becoming wider—since a wider page is beneficial in other areas—but rather that the page expanded before it was advantageous, is that correct?

Precisely, the unwarranted alteration is what causes frustration and feels clumsy.

More broadly, what is the problem with altering page width?

Essentially, it requires a small amount of effort from the user to understand what has occurred. While this may only take a fraction of a second, these minor issues can create a feeling of disconnection.

A helpful comparison is to think of barnacles accumulating on the bottom of a boat. A single barnacle doesn’t have a noticeable effect. However, over time and with a large number of them, they become a significant hindrance.

Avoid Requiring Calculations from Your Users

Refrain from designing experiences that necessitate users performing calculations – as, in most instances, they will likely avoid doing so.

The issue: When configuring a Hulu subscription – through the selection of supplementary features – a running total of the cost is not displayed. While the standard subscription fee and the price of each individual add-on are presented, the resulting overall monthly charge remains unstated. Because these amounts are often not whole numbers, this creates a cumbersome and irritating experience.

The solution: Do not rely on users to manually compute the total; instead, clearly present the complete price.

It is unclear what the reasoning behind this design choice is, but one might question whether it represents a simple mistake or a deliberate tactic – a dark pattern – intended to obscure the user’s overall expenditure.

The motivation is uncertain, though it is reasonable to assume Hulu operates with ethical standards and this is simply an unintentional omission.

Lazy Errors

When a user is unable to reach your website due to a known or foreseeable circumstance, ensure your error messages clearly communicate the reason.

The problem: Hulu restricts viewing to IP addresses located within the United States, a reasonable restriction. However, the platform doesn't inform users of this limitation during signup. Instead, it allows completion of the entire registration process before displaying an ambiguous error message at the very end. This message suggests retrying, which is frustrating as repeated attempts won't resolve the issue.

The solution: The ideal approach is to notify users of this restriction upfront. If that’s not possible, the error message should at least clearly explain the cause of the problem.

To be certain, how did you determine that the issue stemmed from location and not another error?

I confirmed this by utilizing a VPN, which immediately resolved the problem. Disconnecting the VPN caused the error to reappear, leaving me confident in the diagnosis.

Is it possible this omission occurs because users outside the U.S. are not considered potential Hulu customers, and therefore, the company doesn't prioritize addressing the issue for them?

Precisely. They have designed an experience tailored to their existing user base and may not be concerned with others. However, they overlook the fact that legitimate U.S. customers traveling abroad, such as in the U.K., would also encounter this issue, effectively making a VPN essential for continued access.

Disproportionate progress bars

Progress bars offer a visual indication of completion, differing from step-by-step indicators. A progress bar filled to the halfway point signifies that 50% of a task is finished, and 75% full indicates three-quarters completion. The fundamental principle is that the bar’s display should correspond precisely to the actual advancement made.

A common issue: Hulu’s initial setup involves two distinct stages, yet the accompanying progress bar is unintelligible unless viewed alongside the numerical step indicator. If a step counter is essential to understanding the progress bar, its inclusion becomes questionable.

The solution: Guarantee that the progress bar, when viewed independently, clearly communicates the user’s percentage of completion within the overall process.

This guidance appears highly valuable. However, what are the advantages and disadvantages of utilizing either a step counter alone or a progress bar alone? Which approach is generally more effective?

In my opinion, each method is most suitable for different situations and applications. For instance, if a process consists of 100 individual steps, a progress bar incrementing by only 1% per step might be too subtle to register and therefore unproductive.