Get’cha Head In The Game Disney+

I’m just gonna come out and say it: whoever came up with the idea of Disney+ is an evil genius.

You see, one of the user groups I’d fall into, is a 2000s kid. I grew up in the, dare I say, golden era, of Disney Channel. I saw the premiere of High School Musical, witnessed the iconic That’s So Suite Life of Hannah Montana, and experienced the greatness that is The Proud Family (and of course so so much more). These shows bring back a sense of nostalgia. As someone who is transitioning from college to the *gasp* “real world”, it’s nice to revisit these little fragments of my youth.

It’s day 3 (or more accurately night 3): Thursday, November 14, 2019. Being a UX design student, I decided to take this opportunity to do a quick heuristic evaluation of Disney+ using Jacob Nielsen’s 10 general principles for interaction design. This takes a look at the web browser version, where I’m currently running Safari v13.0.3.

Disney+ Home Page

#1: Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Main Pages

  • There’s a fixed header at the top that includes links for searching and more specific browsing options: the user’s watchlist, original Disney+ content, movies, and series.
  • If the user wants to know where they are at any given moment, it’s best to look at the title of the tab. Not all of the pages are named at the top. The fixed header also gives no indication of what page you’re on.
Home page
Search (and also a more in depth browse)
Watchlist
Disney+ original content
Movies
Series

Hover

  • When you hover over a link, the text is underlined.
Fixed header
  • Category cards are not only outlined on hover, but also have an animated background.
Category cards
  • Content cards are simply outlined.
Hovering over content creates an outline so users know that it is clickable.
  • After clicking on a specific movie/series, users are taken to its specific page. For buttons like ‘Play’ or ‘+’ (add to watchlist), the colors are inverted so users know that they’re clickable.
High School Musical page (aka a disney GOAT)
  • Also on this page, we can scroll and see three tabs. The current tab is not only 100% opacity, but also underlined.
Bottom half of HSM page

Viewing Content

  • Clicking ‘Play’ brings up a video player with some standard options: play/pause, a volume slider, fullscreen, and a status bar across the bottom.
  • Users can see the name of what they’re watching and a back button in the top left corner.
  • There are also buttons for a 10 second rewind/skip.
  • In the top right corner, users can click a button that provides language/subtitle options.
Video player
  • When the movie finished, it was minimized and a suggested title popped up. Clicking ‘See Details’ takes you to its specific page.
Suggested title post-HSM (remember Miley was in this one???)
  • What surprised me the most is the lack of viewing history. There’s no way to see what you’ve previously watched or how much of an episode/movie you’ve watched! I tried this with a series as well. I started watching an episode of Lizzie McGuire.
Started an episode of Lizzie McGuire. Is this what dreams are made of?
  • I pressed back and was given no feedback on the status of the episode.
No feedback on whether I started/watched the episode
  • However, when I returned to it, it remembered where I left off???
  • I also tried looking for a new category (e.g. continue watching, recently watched, etc.) on the Home page, Watchlist, and even Account Settings. But nothing. This is a crucial functionality that is missing. Users want to know how much time they have left without going the extra step and clicking the video.

#2: Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

  • Disney+ doesn’t stray too much from terms users are familiar with. They use a ‘Watchlist’ as a quicksave for specific content. This is pretty much the same concept as Netflix’s “My List” and Hulu’s “My Stuff”.

#3: User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Back Buttons / Previous States

  • If a user accidentally clicks on High School Musical (but how could that be an accident??? haha), they can easily click the back button to exit.
  • I also thought it would be interesting to see if I clicked on one of the genres (e.g. Comedy) and selected a series. There isn’t a back button on the page, but when I click the back button on my browser, it takes me back to the genre I had clicked on.
Series with comedy filter

#4: Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

  • One thing that caught my eye was the ‘Extras’ tab. I assumed that this clip/promo would be a trailer for the movie, but it is actually a clip. While I do love “Start of Something New”, I figured this tab would at least include a trailer. I don’t want to focus too much on competitors, but Netflix offers automatic trailers and Hulu usually has them on their ‘Extras’ tab too. This may also confuse other users who are migrating from (or also using) these platforms. I think the benefit of this feature is that people spend less time reading the summary and more invested in the movie/series.
An HSM clip which is (shocker) actually a clip

Note: I looked at two other movies, 10 Things I Hate About You and 12 Dates of Christmas. The former had a trailer and the latter had a clip! I looked at two shows as well, Encore! and Phineas and Ferb. Encore! had a trailer which isn’t surprising considering it’s a Disney+ original, but Phineas and Ferb had neither.

#5: Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

  • I tested out two search queries that were intentionally incorrect.
A cheetahlicious search
An ineffective search that I truly didn’t bet on
  • Whatever search algorithms they have somehow worked when I mispelled cheetah, but not Zac Efron. I do, however, think the error message is beneficial. Obviously whatever I entered in isn’t a series name, movie, actor, or character so I know to adjust my query.

#6: Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Static Details

  • From a specific movie/series page, you can’t click on the genres or actors. This would have been a quick and easy way for users to explore related categories. Instead, they would need to search these specific genres or names or browse the other pages.
Genres and actors aren’t clickable. Promotes recall rather than recognition

#7: Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Watchlist

  • The watchlist is pretty weird tbh. Users can press the ‘+’ button to do this and a checkmark appears. It’s a simple toggle.
Before adding to watchlist
Added to watchlist (wow! the best of both worlds amirite)
  • The problem with the watchlist is the amount of effort it takes to get to this state of adding/removing. Take a look at the watchlist page again.
Takes some effort to add/remove from watchlist
  • There isn’t a quick way to add/remove anything from your list (e.g. a simple ‘+’ or ‘x’ on a card). You need to click on the card directly, go to the specific page, and you can add/remove it from there.

Concerns about seeing # minutes left

  • See #1

#8: Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

  • Disney+ has a simplistic design that isn’t too overbearing. They have so much content (and are planning on adding even more!), but the way they organize it makes it easily digestible. It uses categories and relies on thumbnails in a way that’s similar to Netflix.

#9: Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

  • The first day of using Disney+ I kept getting the same error message. When I was trying to add a new profile, search for a show, or just click the Home button, I got the same message:

Sorry something went wrong. Please try again later.

  • It was more than frustrating because all I could do was wait. Probably around 1pm on Tuesday, I stopped getting the error message. I can understand why Disney+ didn’t alert me with a specific problem because it was most likely a problem on their end. These errors may have been due to the overload of users trying to access it at once.

#10: Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

  • The Help Center is easily accessible by hovering over the profile.

Thanks for reading! I may add a final overview soon, but I was too excited to get this up! I’d love to know your thoughts on Disney+’s initial launch.

UX Designer in the DC area who loves God, pop music, and growth