WATCH ABC Windows Phone Application
UX and visual design for ABC's Windows Phone video on demand application.
Though this app was originally supposed to be a clone of the WATCH Disney Windows Phone app, it was quite apparent during the design process that it would need to diverge in several areas. Designing a video on demand app for adults meant focusing on new content and smooth presentation; whereas with Disney simplicity was the goal, here I could utilize more complex layouts that enabled quicker access to relevant content for the user.
The visual design, of course, also underwent big changes. The clownish facepaint of Disney's bright purple and green gave way to the sultry lipstick of ABC's red and grey, and ABC's reservoir of portrait-orientation show art enabled svelte layouts when compared to Disney's squares.
The variety of tiles needed was quite extensive, especially considering that every show needed multiple sizes to accomodate various device resolutions. Communicating the specific assets required was a task unto itself.
The pivot control unfortunately makes classic carousels infeasible, as both up-down and left-right swiping are spoken for. However, it also enables a wealth of content on the hub with a minimum of navigation.
Adults are much more likely than children to use episode descriptions and metadata to help them deciede what to watch, so the "more information" overlay covers the whole thumbnail in ABC.
Having access to portrait-orientation assets from ABC opened up a lot of potential design space, and allowed us to fit more shows on one screen without each becoming microscopic.
Depending on what part of the app a user was in, schedule information was presented differently. Here on the hub, with five independently scrolling pivots to pick from, I kept the schedule as simple as possible.
Though viewing history is less important in ABC than in Disney, it's still a valuable route to content, especially considering that a user is more likely to be interrupted while viewing on a mobile device than on a television.
The hub in its entirety. Since the size of the hub impacts loading time for the app, I strived to balance performance and quantity of content.
Users get to this screen from the "View All Shows" button on the hub. ABC has a lot more shows than Disney, often with extremely different content and target audiences, so I felt it deserved its own shows pivot.
The app had to accommodate a mix of locked (authentication required) and unlocked content. To make it more immediately apparent when scanning a long list of episodes, I applied a dark overlay to locked content.
I considered putting the Episodes/Extras and Season filters into the app bar (where you see the pin icon), but felt the risk users would miss it and therefore pass by entire seasons of content was too high.
The skip back function is useful on a small screen, where it's difficult to accurately move the video scrubber.
Though ABC's typical background color is light grey, the dark grey and red go together beautifully.
The WATCH ABC app has two schedules - the fulll schedule and primetime only. Since the primetime has many fewer shows, I took more liberties with screen real estate for each one.
All of the episodes marked with "Watch" can expand to reveal a description and a link directly to video. I considered an alternate layout with the play icons getting their own column, but in the end I determined that there weren't enough playable episodes to justify shortening the titles and descriptions.
This screen, the MVPD authentication portal, was difficult to design due to the quantity of text and logos it required.
The pivot control is very useful for settings screens, since you can have distinct sections without forcing the user to navigate to separate pages.
Depending on the user's physical location, they might have access to one, none, or multiple local affiliates. Since having one (and exactly one) local affiliate is a prerequisite for watching live TV, multiple variations of this screen were necessary.
