UX Case Study: Disney+ Interaction Design

Background

Although I’m not the biggest fan of Disney’s media monopoly for a variety of reasons, I’m a huge Marvel geek. As such, I was excited about Disney+ when it arrived, serving as the home for Marvel Studios streaming. I personally think Disney+ is a great service and provides plenty of value for the customer. However, in dealing with the app itself, I’ve always found the UX to be somewhat lacking. Since it’s launch less than a year ago, I’ve pointed out little pain points here and there in regard to the interaction design.

I’ve been spending the summer as a UX researcher and am essentially specializing in UX research over design. However, I’m also agile, cross-functional, and am skilled at rapid prototyping. Yesterday, while I was aimlessly browsing around streaming platforms looking for something to watch on my Roku, I was reminded of an issue with Disney+, and I think I could offer a very simple solution.

Problem

There are 22 rows of content to browse, each with up to 25 individual video content selections. But there is no easy way to navigate back to the top of the screen. The top of the screen is the only place to access and navigate between channels (Disney, Pixar, Marvel, Star Wars, National Geographic), which means that if the user has browsed to the bottom of the main screen, they have to click the up button on their remote 22 times in order to filter content to 1 of the channels.

How might we improve the navigation experience via TV remote for the end-user?

Ideate

Borrowing from some of the other streaming services I subscribe to, I offer two potential solutions:

  1. The Home icon on the sidebar menu will take users to the top of the screen
  2. The sidebar menu gives users the ability to filter content by channel

Prototype

I created an interactive prototype with Adobe XD. It may take a moment to load, as I improved the fidelity of the prototype by incorporating 250+ images of content currently featured on the main page.

One of my favorite things about this prototype was all the interactions I was able to incorporate in one frame. Taking advantage of XD’s components and the ability to create a variety of different states for them. Initially, I made the sidebar menu using an overlay, but I went back in and nested the menu components in another component with the background so that I could delete the overlay. This provides a smoother look and feel when the menu expands.

This prototype includes the 10 current (as of 7.26.20) banner images, a static and hover state for each channel, and the first 10 video selections of all 22 rows.

General walk through demonstrating various interactions in the prototype.

In the prototype, you can scroll up and down as though it’s a web page but imagine instead, using a Roku remote and having to click down each time you want to go to the next row. Then imagine having to click up 22 times from the bottom row to get back to channels.

To improve this user flow, the home icon on the sidebar will take the user back to the top of the screen from wherever they are currently at. On the remote, when you click left to open the sidebar, Home is automatically selected. So if a user is just scrolling down rows from the first position, they can easily get back to the top in two clicks.

Demonstration of how I re-imagine the functionality of the home button.

Next, I’ve introduced a means of filtering channels from the sidebar. So that if the user is anywhere on the screen, they can open the sidebar menu and navigate between channels. In the current version of the app there is already a Disney+ icon in the sidebar. Building on this, I simply introduce navigation arrows and give users the ability to select channels from the sidebar.

Demonstration of how I re-imagine sidebar menu channel navigation.

Discussion

This is an informal case study primarily intended to build the prototype through which to visualize my solutions. I have not recruited participants for usability testing, nor do I intend to. I offer the link to the prototype below. I encourage you to play around with it and leave me a comment telling me what you think.

Conclusion

Disney+ offers a plethora of curated video streaming content. However, the app on smart TV’s presents some issues in regard to interaction design and navigation. I identified an opportunity to improve users ability to quickly navigate back to the top of the screen, and an improved user flow for being able to switch in between channels. With no usability testing to back up my claims, I hypothesize that my solutions will improve the user experience by speeding up the users ability the navigate the main screen as well as select between channels.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s