The Ask
In 2017 Disney ABC Television Group was looking for a way to consolidate several of their TV anywhere applications into a one-stop shop for all things Disney. Specifically, they were looking to merge their Disney JR, Disney XD, and Disney Channel TV-E streaming apps. Stakeholders felt a consolidation would make for a collectively stronger app and allow them to do more than just video streaming.
I lead the prototyping efforts on this project on iOS, tvOS, Android, and AndroidTV. I later assisted production engineering with the actually applications on all of those platforms and web as well.
The Challenges
There were a number of challenges to executing a monolithic app such as DisneyNOW but the largest challenge by far was finding a UI design that was easy for young Disney Junior audiences without feeling too young for Disney Channel target audiences. Disney Channel’s target audience could range from 8 to 17 years old while most of Disney Junior’s target audience was 3 to 7. Compounding this problem is most of Disney Junior’s target audience does not know how to read yet, making teachable moments much harder.
DisneyNOW also needed to support more than just video streaming. It was also intended to be a centralized hub for all things Disney media. Stakeholders wanted users to be able to watch movies, television episodes, short clips, music videos, play games, and stream audio from Radio Disney.
To keep with Disney’s brand stakeholders also wanted the application to have a lot of flare and charisma. It needed to feel distinct from other similar applications such as Netflix and the ABC application.
The final major challenge was the application needed to launch on a variety of platforms at once. All of these platforms have a wide range of power and capabilities.
Prototyping to the Rescue
tvOS Show Detail with Video Background
Due to all of the major challenges listed above, UX Engineering was called into to developed a series of high-fidelity prototypes starting with iOS and tvOS. Working closely with Disney ABC Television Group’s Research group and the product teams, UX Engineering created a plan to rapidly build and test high fidelity prototypes.
Each month the team would identify friction points and UI solutions they wanted to test to solve these friction points. UX Engineering would develop a prototype with a proposed solution to these friction points. Research would then take the prototype to a User Testing laboratory. The team would work together to evaluate what worked, what could work better, and what was completely off target. The next month UX Engineering would build another iteration of the prototype targeting a new set of friction points along with fixes addressing off-target issues from the previous month. The cycle would repeat until product, research, and UX Engineering were all satisfied with the UI solutions.
These prototypes would then be used to present progress to executives, production engineering, and other stakeholders. All of the teams enjoy the clarity high fidelity prototyping gave DisneyNOW’s concepts awhile also testing the feasibility of our designs.
Kids Mode vs All Ages Mode
To get around the large range of ages we were designing for we implemented two UI modes and added the concept of profiles. Families could have up to 20 profiles stored on a device and each profile could be set to either all ages mode or kids mode.
Onboarding flow for DisneyNOW
Through our user testing, we learned that parents with small children often installed the application for their children or at the very least helped them set it up. With this in mind, our first time onboarding flow became hypercritical to the success of communicating our application’s concepts to parents.
We iterated on onboarding multiple times in our user testing lab, optimizing the order of screens, the clarity of copy, and adding additional features test subjects requested.
Kids mode hide content from the two older kid channels while simplifying the UI. Tabs were altogether removed whenever possible. Unlike common user patterns we see with adults, young kids have no problem scrolling to find content. This lead to us vertically stacking content in a scroll view as often as possible. Additionally, the horizontal carousels were removed whenever possible.
Surprise and Delight
To help make the app lean into its Disney branding and feel more fun we added a layer of easter egg animations. Users can trigger these animations by tapping nav icons multiple times, a compulsive behavior we saw younger kids doing in the user test lab.
DisneyNOW tvOS Summer Theme
Additionally, we made these animations themeable. Every 3-4 months the various tab bar icon animations would be refreshed to either be based on a movie or show DisneyNOW was promoting, a season, or a holiday.
We found another way to add delight was via sound design. Sound design really enhanced our application by adding additional affordance to user actions but also as another way of sneaking in additional Disney branding.
Making the Magic Real
After handing off the prototypes to the production engineering team it quickly became clear a lot of the more complicated UI designs and animation would not be possible for launch due to either a very aggressive schedule or lack of experience with animation and UI libraries on various platforms.
A Focus State on tvOS leveraging SpriteKit
The UX Engineering team stepped up and assisted the development of the production applications for launch by taking on UI animations and the more complex UI styling.
Results
DisneyNOW was a massive hit for the Disney ABC Television Group. It set the foundation for what could be achieved with a Disney streaming application. Research, learnings, and the experience developed from the DisneyNOW application lead to the Walt Disney Company developing its first domestic video on-demand subscription application, Disney+. Streaming is now seen as a critical pillar at the Walt Disney Company.