I absolutely love watching shows on Hulu's on the Apple TV app. Since I use it daily, a few UI flaws have become apparent to me. I decided to try and solve them, just as a design exercise.
The Process
I began by taking photos of the current process of watching a show on my Apple TV. After selecting the show, I'm taken to a page that gives me a brief synopsis of the series as well as a list of episodes.
After selecting an episode, I'm expecting it to start playing but instead I'm forced to read an episode synopsis and strangely some other shows I might want to watch in case I inexplicably change my mind at this late stage.
I decide to combine these two screens into one as I skip the sketching phase and go straight to wireframing (my arrogance would absolutely bite me later in the process.)
My main focus is to try and fit everything on one screen to save the user an extra step. I try moving elements around to see where they might look best.
My first attempt succeeds at fitting all the elements on one screen, but doesn't look quite right. Everything seems cramped:
I decide to go back to the original dark motif, but this doesn't help either. It then dawns on me (with horror) that skipping the sketching phase deprived me of a crucial opportunity: I was so focused on the screens, that I didn't bother to conceptualize a BETTER UI solution for the user. I ignored the rules and I paid for it. Lesson learned.
After going back and sketching, I came up with the solution to hide the episode synopsis until a user clicked on an episode. This allowed me more room to space out the elements and give them some breathing room.
The last step was to actually see how it looked on my 40 inch television. While the font sizes and weights looked fine on my Macbook Pro, they were hard to read on the TV and needed some adjustments. All in all, I learned a lot from this exercise!
