Project Overview

Warner Bros. Entertainment

During my time at Warner Bros. I was able to dive into their Hybrid E-Commerce/Streaming Service. The App is only accessible to anyone under the Warner Umbrella or Clients. Though the app is live on multiple platforms my project focused primarily on Apple TV. It was an amazing experience working with awesome content from my favorite movies like Harry Potter and being able to explore new UI Solutions.

Team
Director of Content & Distribution
Senior UX Manager
Digital | UX Intern - yours truly

Tools

Building Blocks

UI Refresh for Apple TV

The current Apple TV UI doesn’t do much justice to the experience. Browsing/Navigation is not currently efficient and as of now you can spend over minute scrolling to find the right episode.

Building Foundation

Streaming Platforms

I wanted to create a new UI that incorporated current UI/UX Trends. Without reinventing the wheel, I decided to research what was out there today. With so many Streaming Platforms out there today and each having their own way to attract users the understanding of these methods was key in my research.

UI Trend

Left-Align Text

UX Trend

High Fidelity

UI/UX Trend

Gradient Key Art

 A reoccurring theme I found was gradient key art. This design not only served as a UI function but UX as well. On the UI side, the gradient key art allowed room for both copy and text. While on the UX side, this type of gradient allowed for key art to always be enhance by the UI as well as limit scrolling for content-information and enhance readability. On the B2B side, this allowed partners to not allocate too many resources on creating horizontal key art as the gradient served to limit that process.

Making the UI

Wireframes

Once I establish a good foundation and creative direction for the UI, I began to sketch down ideas. This new direction would serve to display more relatable content to users as well as establish a better visual hierarchy than before.

Making the UI

High Fidelity Design

I brought back my findings and initial wireframes to my UXManager to chat about the direction I was establishing.  After a good conversation, the green light was given and inserting real content was next.

Prototyping

Interactive Prototyping

Adobe XD was the main tool for this project and I used it to create an interactive prototype to convey what motion would fit well with design. With the prototype done, our team was able to see the possibilities that are currently available across the industry!

Conclusion

Takeaways

Working with Apple TV was a new challenge, but I was happy how the UI turned out. Learning about using the TV’s real estate was very eye opening and overall a great experience.