Disney Windows Applications
UX and partial visual design for the WATCH Disney Windows suite - Windows 8 and Windows Phone applications for Disney Channel, Disney XD, and Disney Junior.
This was a challenging set of applications to design. Starting with the early designs of their iPhone app and a long list of requirements, I had to design an app that fit Windows UX guidelines, could be easily used by children and parents, and accommodated authentication and locked content. What's more, our team was also responsible for the WATCH ABC Windows Phone app, so we were under pressure to design the Disney apps with as much reuse as possible in mind.
In the end, I opted for a character-centric, shallow navigation model. To keep navigation to a minimum (a plus for a children-operated app), I kept all content to the hub and show detail pages. Though it is longer than a typical Windows 8 hub, the app does not burden its user with creating a complex mental model, and requires a minimum of reading ability to navigate. The Disney Junior app assumes its users may not be able to read at all!
Disney Channel Windows 8
Children tend to make viewing decisions based on spotting their favorite character, which is why the hub eschews episode thumbnails for character-laden show art.
Having all the shows on the hub makes it somewhat long, but we identify the user's most-watched shows with stars and make them available as shortcuts in the app menu.
Unlike adults, children often enjoy watching their favorite episodes over and over again, which is why we present their 6 most recently played items on the hub instead of new episodes.
Even on the show detail page, character art takes a priority when it comes to screen real estate.
The player went through several iterations, and had Live and Advertisement modes as well. The top app bar you see here is available on all screens by swiping down, allowing quick navigation to home, the user's favorite shows, and the user's most recently watched item. The bottom bar has information and controls for the item currently playing.
Disney Junior Windows 8
The Disney Junior app has even larger and more clear-cut character images, and eschewed most episode descriptions.
Every screen on the tablet had to support portrait orientation and variable-width snap mode.
Disney XD Windows 8
The Disney XD app had different ratios for its show imagery, requiring many changes to layout from its siblings.
Disney Channel, XD, and Junior each had their own icons, colors, fonts, and branding guidelines, among other quirks.
The Live player, seen here, modifies the regular player view.
Windows 8 Wireframes
We worked with Disney to acquire the full set of assets and logos required for the Windows Store and App Manifest. Each of them required multiple sizes in order to accommodate various device sizes.
We made several iterations of wireframes, meeting with Disney weekly to receive feedback and fine-tune the designs.
Every screen on the tablet had to accommodate portrait mode...
...as well as snap mode, which changes behavior and appearance based on the current width of the app.
Even though the content lived on the hub, show detail, and player screens, there were a suite of settings and MVPD authentication screens to design as well.
Disney Channel Windows Phone
The Windows Phone hub, with its multiple scrollable sections, opens up several design possibilities, and allows quite a bit of content on the hub; however, it also makes traditional side-swiping carousels impossible.
The Shows section had to accommodate any of 6 potential groupings of content from the Disney feeds, and displays every show in the app without the need for extra navigation.
Rather than users manually favoriting shows, the Disney apps track the user's viewing history and automatically add the user's three most commonly played series to this list.
As the currently playing show could be any show, not just one of those with video on demand content, I had to be careful to use an image format for which every show had an asset.
Reserving half of the initial view of the show detail page for character art is popular with kids, but it does require a trade-off in initially visible content. I made sure that there's a peek into the next episode to clue users into swiping down.
I included a "skip back" player control to ease rewinding, as it's hard to be exact on a small scrubber with touch countrols.
Disney Junior Windows Phone
The entire hub, captured in one screen. Implementing panoramic backgrounds was a challenge, especially with Microsoft's lack of guidance and cable providers' insistance that their logos be very legible at all times.
Disney Junior forgoes episode descriptions under the assumption that many of its users may not be able to read them.
Disney XD Windows Phone
Unfortunately, Disney XD's longer aspect ratios make some content too small to read easily. However, the codebases of the apps are closely tied together, and redesigning the Shows pivot would have represented a large increase in scope.
Setting metadata sizes and layouts was tricky due to the wide variations possible based on display size.
Luckily, not all of XD's shows have different proportions compared to their Disney Channel and Disney Junior counterparts.
Windows Phone Wireframes
Windows 8 shares some, but far from all, of its asset requirements with Windows Phone.
As show logos come in all shapes and colors, apportioning space for them was difficult. We also had to contend with the fact that some of Disney's assets had show logos baked in, and some came delivered separately.
Keeping episodes and shorts in one long column simplifies navigation and layout compared to a pivot control, and allows the use of corner-to-corner show art.
Disney's "More Content" system allowed sequential lists of content (e.g. having episodes and clips in one column), but requried complex logic to implement. I made this image to help illustrate it to our developers.
I had to be careful to match Disney's copy text exactly on these MVPD authentication screens. There were several variations depending on where a user attempted to access the locked content from.
Disney also had many miscellaneous screens, like this parental exit gate, that required close examination of the requirements to get right.
The settings menu is accessible via the app bar from any screen in the app. The pivot control makes using it a breeze.
