The Disney+ Launch Experience is Too Basic for 2020

I, along with about 10 million of my friends, logged in to Disney+ for the first time yesterday. Excited both by the shiny new app, and also by one of the most beloved collections of content ever known to man, I was one of the crazies who opted to pay for 3 years of the service up-front. I love Disney, I love Pixar, I love Star Wars, and National Geographic makes me feel more smarter. Naturally, they had me from the go.

But even after only two days of use, there are some glaring omissions from the app that frustrate me. Since I’m currently in the middle of getting my Master’s in User Experience Design, I felt it appropriate to call out a few things I noticed.

The Disney+ home screen in a browser window.

Before I make some subtle jabs at the app, however, I should point to some of the good things it does. As far as design patterns go, Disney was incredibly simple with the interface elements they introduced. A single hero-image carousel for the biggest content “advertisements”, then a single row with 5 live-tiles for each of the major brands that animate as you highlight them. Cute, efficient, and a nice subtle signifier that calls each sub-brand into consciousness. When clicked they take you to the brands sub-menu containing all of the content specific to that property.

Live tile animations made the sub-brands come to life.

The main view has a dark navy/grey background that is barely visibly graded just to add a bit of depth. Very clean and classy. Below the sub-brands are content categories with more titles and thumbnails visible, each row a scrollable swimlane, hinted at by the fragment of another thumbnail along the right edge of the screen. Each row contains 25 titles, but only three are visible (on mobile), to begin with. That means it takes six swipes to view everything in that row, and another six swipes back to the beginning… because there is no quick way to navigate back to the start of the row. The 21 rows of categories coupled with 25 titles per category yield 525 options to choose from the home screen alone. I don’t know how this compares with Netflix, but that number destroys streaming services like HULU in terms of what you can access on a single page. You can get to A LOT of stuff, without having to do much besides swipe up/down/left/right. That’s good.

Going Backwards, Different Ways
But there are design decisions that are unfortunate as well. Given that Disney knew they were going to be building this for years, I would have expected a more fleshed out UI at launch. As far as interaction goes there aren’t a lot of misses, but a simple notable one is the different BACK functionality between content views and brand-specific views.

When viewing a piece of content, you can click the X in the upper right to exit or pull down on the view to exit back to the previous page. But when viewing the brand-specific sub-menu, there is a navigation arrow pointing left that takes you back. Maybe it’s done on purpose to help indicate that you’re in that certain type of view, but from a user action standpoint, a single way to go BACK would be preferable.

What Did I Want to Watch Again
The first two content categories on Netflix are Continue Watching and My List. Neither of those are rows that exist on the Disney+ app. Netflix knows the value of getting back into the show as quickly as possible, and either Disney has yet to learn that (experience with their Disney Now app compels me to say yes) or they are smartly forcing users to go through the catalog over and over for the first few weeks to ensure they get familiar with it. Either way, forcing users to remember what they were watching, and navigate back to it will likely be a frustrating scenario for folks until the app is updated. This is critical for movies and TV shows alike, as time spent getting back to the content is time lost watching the content. Similarly, there is a Watchlist feature in the app, but on large displays, it is hidden in the left-hand menu drawer, and on mobile, it’s awkwardly hidden in the Profile navigation menu with Account Info and Help. Not exactly where you’d go expecting to find a list of content. Odd.

This also brings up the lack of activity history. Potentially to remove things that might eventually influence your recommendations, but even more important for children’s profiles when parents really want to know what their kids have been watching (and how much).

Disney’s content backlog demands to be explored, and the best way to do that is via a somewhat hidden All Movies A-Z “unfilter”.

Let’s Get This Sorted Out
The search function is actually pretty useful, limiting the need for filters to a large extent. But one of the best views is “All Movies A-Z” which just lists everything. For a new app like this, with so much old and new content, having a view where you can see everything is so incredibly enjoyable. And yet, the content titles are sorted alphabetically. Period. With no option to sort by release year (maybe I want to see the old stuff), length (maybe I don’t have 3 hours for Endgame), or anything else. I understand the need for simplicity while users build their mental model and understanding of the system, and again, maybe this is early-stage scaffolding by Disney to lead people in the right direction, but… it’s 2019. People are used to media-center like interfaces and have been using them for a decade.

Oh, and speaking of that All Movies view, on mobile it’s only available if you go to the Search view and select Originals, Movies, or Series, and then select the All Movies A-Z category from the filter. No way to get there otherwise.

What’s In An Alphabetically Sorted Name
A final thought about that sorting as well. With a catalog like Disney’s, you end up with multiple Lion King’s, Aladdins, Little Mermaids, Mighty Ducks, and more. The Direct to Home Video productions came fast and furious in the 90s, but the titles of the flicks were all over the place. For example, The Mighty Ducks appears in the M’s as you’d expect, but The Mighty Ducks 2 & 3 (sometimes referred to colloquially as D2 & D3 respectively) are in the D’s. In Disney+, that leads to stories that should be nestled together as part of a collection scattered throughout the hundreds of titles listed, with no assist as to what order they came out in or should be watched in. Playlists that could be added to the Watchlist would be sublime here, especially given the variety of options in which people can watch the entire Star Wars saga these days.

The Lion King and Little Mermaid order is all out of sorts.

Disney+ did a lot more right than it did wrong. It’s only major issues were those of omission, and knowing Disney they were likely left out with cause. Here’s to looking forward to some updates that add extra functionality in the near future.

10 Ft Interface, Streaming Media (Portfolio Piece)

For: Kent State University | Role: Student | Fall 2019

Difficulty

Rating: 8 out of 10.

Summary

In this academic scenario I was asked to design a streaming media services interface, aka a 10 Ft Interface. The client asked for two sample views that demonstrated how the Interface Design and remote control design would optimize usability.

Problem

The client, a media company that had only distributed its array of content through web browsers, had identified an opportunity to compete with a physical streaming device for televisions. Because their only previous experience was in media licensing and not over-the-top distribution, they reached out for assistance with this problem.

Approach

Research – 10 Ft Design Rules

Setting up this design first required looking at the required inputs and expected outputs from the client. In this case, it was clear that images, titles, descriptions, and other video details would need to be displayed in category and featured video view ports. Additionally, the remote control would also need to have only the necessary navigation and media control buttons.

Designs like this also are even more heavily reliant on accessibility rules than other apps. The designs also included considerations for font sizing, colors, opacity, and simplified navigation. Especially helpful was this video from Mark Brown over at Game Makers Toolkit.

Viewport Sketches

The initial viewport sketches were rough but adequate for moving forward. One thing I learned when researching this kind of work was to start your drawings at as small of scale as you can handle, which would prevent you from including too much information on the window from the beginning.

I found that these three screens met the deliverable requirements of the client, but did end up adding another viewport for user with vision disability.

Remote Sketches

The original remote design was based on existing streaming remotes; single handed, limited buttons, circle pad navigation, and a central select button.

I also originally imagined users paging through results and included a scroll slider, but later realized that the added functionality didn’t reduce the number of interactions enough to warrant its existence.

Finally, you can see how the final design was influenced by the natural movement of the thumb sketch on the right. The thumb naturally moves in a sort of hourglass pattern, with the most natural movement on the curve from bottom-left to top-right.

Results

Viewport Screens

A simple grid view that makes the media title, year made, runtime, age restrictions, and viewer rating. Also note the bottom row of images are cut off, indicating that there are more options below.

The decision here was to avoid image only swimlanes used by other apps to allow for more details rather than relying on images only.

The is an alternate view that allows users to view descriptions and cast information while browsing. This decision was intended to avoid users having to go into media items and then repeatedly backing out. This allows for a single click (up/down) to view more info.

This viewport allows the user to play the media, view photos, or select cast and crew profiles to find similar media. One of the differentiating factors of this app is that its design is intended to assist cinephiles get deeper into the films they watch, and this viewport helps users do that.

Viewport Prototype

As you can see, this is a very simple prototype. However, that is appropriate given the medium of this application and the posture of the user. This is not an application that you want to get fancy with otherwise you will confuse users.

Remote Prototype

Here you can see the progress from the initial prototype. The first version’s size was good, but the input options were unclear and ergonomically lacking. In the final version, buttons were removed and placed in line with the natural movement of the thumb (red line).

Initial Remote Design
Final Remote Design

Lessons Learned

  • Fonts for 10 ft designs should be no less than 28 pt fonts, as readability degrades quickly below that threshold
  • The use of typeface, font size, and case all help distinguish text affordances
  • Other affordances are also paramount to usability, helping user distinguish what is selected, what can be selected, and what selection options exist
  • A distinct need for long text entries to be handled in a way that is usable and non-distracting

Week 7 – UXD Principles and Concepts

Our final week of Module 3: Visual Design and the final week of this course had us studying Aesthetics. We began the week with an overview of a variety of design principles like color, layers, transparency, textures, patterns, and contrast and how they are all defined and used in creating a cohesive, immersive, enjoyable design. I feel like I understand color theory a little better now, especially when considering its additive and subtractive nature across different usages. There are a lot of definitions related to color that I need to spend some time memorizing, so hopefully I can do that before the next course begins.

Along with the presentation, we watched a few Lynda videos on color. Sidenote, I didn’t realize that Lynda was free to us – guess I should say goodbye to what little free time I thought I had. Beyond the physical properties of colors, the videos demonstrated how they can set a mood, and how palettes are designed to evoke emotion and memory and to create a sense of time and space. I think I’ll find myself exploring more of that particular video course if only to better understand how to start developing more thoughtful color schemes (beyond just hitting up a generator online). The last bit of Required Material was a piece on contrast, which was insightful too. Probably worth spending more time there too…

Finally, our assignment this week was to use persona data given to us to design a single page Persona exhibit. I found myself trying to find interesting ways to create a grid system that wasn’t too informed by the articles that we were linked to, but once I was an hour or so in I wished I’d gone with the 11 x 17” paper size as the 8.5 x 11 started feeling cramped. I tried to use what we’d learned last week around font sizing and colors to contrast the appropriate sections of the document while maintaining a consistency that made it all blend well. The only hiccup I had was in trying to settle on a way to handle the “Goals” section of the Main Points. It felt like it should be its own thing, but was included as a bullet within the Main Points list. I took that a cue to treat it like a sub-head of sorts, so I did something a little different with it.

In all, I’m sad to see this course end. I feel like as a concepts course, it definitely did its job or introducing me to a ton of stuff that I only knew a little about, and has me eager to explore a lot more of it in-depth. Here’s to hoping that we will cover more of it later, or that I find time on my own at some point to continue to dig in.

This week’s notes are here. Thanks Jess!

Productivity App – Reminder X (Portfolio Piece)

For: Kent State University | Role: Student | February 2019

Difficulty

Rating: 6 out of 10.

Summary

My first end to end UX design project was to focused on a productivity app for to-dos and reminders. The project included user interviews, workflows, wireframes, and an interactive prototype.

Problem

In this hypothetical scenario, the founders of ReminderX, a new startup app had decided they want to take their basic to-do list and reminder app to the next level, but were not sure what product features or audience to focus on. Not an uncommon problem for eager young entrepreneurs.

The founders requested assistance from a UX professional who would help conduct user research to uncover critical features in tandem while defining a representative user persona. That work would help the product better define its market position.

Once features were identified and prioritized, workflows and wireframes were developed. These guided the final design direction so that the added features were presented with proper interaction design in mind.

Approach

User Research

Consent NDA

The first step to user research was ensuring participants understood the process and their rights. To confer that information, a consent NDA was provided for physical signature or read aloud prior to the interview to gain a verbal approval.

Research Protocol

A protocol and script sheet was developed to help the interviewer stay on track and capture key notes for follow-up in real-time.

Interviews were conducted with four participants. Each interview was recorded with consent and transcribed for analysis.

Interview Results

Interview data identified a number of considerations for design:

  • Consider the holistic productivity ecosystem
  • Requirements:
    • Notifications
    • Color code lists and items
    • Sync data across devices
    • Integrate with voice assistants
    • Trigger reminders with location
    • Setup recurring reminders
    • Collaborate with others

Workflows

Using the interview results, workflows were created (black) and revised (blue) to account for the specific screens required to satisfy user needs.

Workflows included 1) App Registration, 2) List Creation, 3) To-do/Reminder Creation, and 4) Initial onboarding.

Wireframes (Paper)

Once workflows were finalized, wireframes for all screens across all flows were drafted by hand. These designs were bundled to show the flow from screen to screen. This low-fi design method made it easy to take back to research participants for review and modification.

The only creative design element that was included on the wireframes were the consistent “back”, “accept”, and “new” rounded buttons in the top-left and bottom-right corners. These were intended to give the app a bit more identity, but also conflict with core OS functionality that others apps follow, contradicting Jacob’s Law.

Wireframes (Digital)

The hand-drawn wireframes were digitized using Adobe XD (my first project in the application). Key features were notated and referenced for developer understanding. The designs were done absent of color, allowing the company to brand it according to their own palette.

Wireframe flows include 1) Registration, 2) Home Screens, 3) New Reminder, 4) New List, and 5) Onboarding

Results

You can view the final interactive prototype for yourself. Looking back at this as my first design, I’m pleased with how much I learned in my first course.

This work was prior to taking full courses on research, interaction design, and usability. Refreshing this design with those skills would produce an even more polished app design.

Lessons Learned

  • Allowing users the opportunity to review information before committing the data is a critical aspect of usability
  • Immediate feedback for selections like color are key to help the user understand what the choice will look like and if they want to commit it
  • Novice users just expect to be able to enter an item without details, while expert users expect to be able to access advanced features, which requires balancing the application to work for both
  • Adobe Xd is similar to other CS apps, as expected, but did have some idiosyncrasies that made watching a tutorial worthwhile

Week 6 – UXD Principles and Concepts

Week 6 has been focused on typography. I’ve never been as consciously uncertain about every text formatting decision I’ve made as I was this week. Starting to learn about how text should be used, while you’re still not an expert is fairly disconcerting. However, after this week’s assignment, I feel a bit more competent in choosing appropriate font pairings.

This week’s assignment took me the longest of any assignment to date. Even after the recommended and other materials, I feel like there is so much more to learn. As far as the terminology that accompanies fonts, I feel like we’ve covered a lot of ground. But each glyph of a typeface seems like it should be governed by some laws of geometry and mathematics, especially rules for how to pair fonts. There were enough readings and videos this week that I didn’t dare go down that rabbit hole for fear of not finishing the other assignments.

This week felt light in discussions with peers, but I’m hopeful that we’ll get to see each other’s work through a summary video. For my assignment, I stuck close to the example in the presentation we covered but put my own spin on it. I would have liked to do something different, but really had no idea where to start. Seeing others work would be helpful, but I’d love to read through their thought process as well.

I did find all of the readings this week incredibly interesting as usual. I never realized typography was so refined, detailed, and important to our visual sensory system. Between last week’s exploration of design principles in general, and this week’s focus on type, I feel like I can look at a design and do a somewhat satisfactory job assessing it. That’s pretty significant progress in a short amount of time.

Notes aren’t quite ready this week, but I will update the post when they are.