UX Case Study: Disney+
navigation patterns and 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 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, an opinion which seems to run counter to consensus in the broader UX community. Since it’s launch less than a year ago, I’ve noted little pain points here and there concerning the interaction design.
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 to filter content to 1 of the channels.
How might we improve this interaction for the end-user?
Ideate
Borrowing from some of the other streaming services I subscribe to, I offer two potential solutions:
- The Home icon on the sidebar menu will take users to the top of the screen
- 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 walkthrough 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.
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. Interesting to me, is that 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.
Prototype link: https://xd.adobe.com/view/9ac31d94-eb31-4a79-b523-8e7bf37b3c66-cf90/?fullscreen&hints=off
Conclusion
Disney+ offers a plethora of curated video streaming content. However, the app on smart TV’s presents some issues concerning 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.
Originally published at http://mtthwx.com on July 26, 2020.
