PARTNER TRAY

I was asked to integrate network brands and their content into the homepage. The balance of maintaining the integrity of the existing design language and giving other brands a voice within it is always a challenge. The upside is that we could get a mix of premium brands and their offerings into the portfolio of content.


Although the ask was at a singular level (ie "What would Machinima look like on Hulu?") I always to try to design with scale in mind. How would a premium network integrate into the existing navigation construct? What would the relationship be between brands like Machinima and Showtime?

 

I sketched out numerous layout combinations. I wanted to identify areas where a brand could surface on the homepage and not get lost in a sea of similarly sized trays.

 

The masthead is an obvious starting point. The current framework didn't allow the customization outside of an image bg and text edits. The content felt very similar to other shows and the convern was that it could get easily lost.

 

A dedicated tray of content was the next step. But for someone who is not familiar with the Machinma brand or their content it would also get lost amongst other similarly sized trays.

 

Adding the Machinima logo in the tray started to feel different but the execution needed polish. I was also concerned how this would scale if there were multiple trays with the same execution. 

 

After multiple sketches and mocks it came to the execution above. Brands needed a differentiated template. A single tray with multiple brands helped elevate networks that a user may not be familiar with. The final design is a slight departure from the existing template but still feels like an evolution of the current design language. This exploration was used in strategy meetings with other networks to surface the viability of their brands on Hulu. On the backend, these networks would surface based on a users viewing behavior and interests. The effectiveness of the tray is built on the recommendation engine serving up the relevant networks for each individual user.