Summary

While I am usually on the Player Team, I was given the opportunity to design Branded Collections for Hulu Home.

Branded Collections are a set of templates that help elevate content by adding a narrative to the collection. Each Branded Collection features a description, title art, and background image to quickly give users an idea of a collections’ content as they browse Hulu. These templates also provide editors additional flexibility when showcasing and promoting content.

Duration: 2 months

Tools: Figma, Usertesting.com

Team: PM, TPM, Mobile Developers, UX Research, UX designers (mobile designer/lead and web designer)

Contribution: Living Room Designs

Why we are creating this template?

• To effectively narrate the collections beyond the current limitations of our other Home tiles. 

  • For High & Med, we can only use a singular hub link image

  • For Standard, we can only group a collection of content tiles

• To reduce the ambiguity of the collection, giving users an interact-able preview of content before they jump into a separate hub page.

• To increase engagement by offering editorial config options (amount of tiles, whether the tiles play/go to details) needed to amplify different types of collections based on the user’s interests, relationship with content, and business needs.

• To reduce confusion for users regarding why content is being highlighted through guidelines around how to best populate each collection template.

Metrics of Success

• Collection TPS, Collection HPS, Collection eCTR (click-through rate), aka how much do users interact with the collection, the content in the collection, and whether users enter the hub from the collection.

Design Principles

At the beginning of the project, our core design group created both experience and design principles as a team for these new templates, as they are a whole new addition to the home page (where most Hulu viewers spend their time) and we wanted to be aligned on goals and rules before we begin designing.

Experience Tenets

• Create continuity to and from

  Users should know where they are navigating to and why. Make sure to ground the user with elements on the page that create continuity in the UI & content selection.

• Know when to push Quality vs Quantity

  The fewer pieces of content shown, the more relevant and important they should be for the user. (Reco vs. Comedy Movies)

• Be Flexible & Smart

  Collections should reflect the viewer's relationship with specific genres or content types, as well as consider what cues or visual elements the viewer needs to make the decision to watch something. We should have reasons why the experience differs with promoted content, live content, etc.

• Be Attentive & Deliberate

  Don’t overwhelm the user with multiple shapes and sizes and levels of information to parse through. Note and clearly delineate the Branded collection themes UI with Marquee ads, video tiles, and other tile types the user may browse.

Visual Design Principles

• Stay within current components per platform as much as possible unless the accessibility of text or image is hindered

• Introduce new metadata and rules only when critical in user’s decision to watch

• Balance additional branding visuals and content tile presence (Background images in comparison to content)

Competitive Analysis

During the competitive analysis, I looked into how competitive services included Collection metadata, what interactions they had (how trays moved/are trailers included), and how it visually matched/differed from other trays. HBO Max, for example, has a Title and description, a link to the hub, and allows scrolling (though the scrolling makes the text disappear). Disney+ doesn’t really differentiate collections from trays, but they do provide trailers when hovering over the content.

Brainstorming Partner Workshop

Before we went into design ideation, we wanted to get our design group and other stakeholders (developers, platform, PM) together to ideate some general concepts to get everyone involved and to see what ideas they had.

The main design findings we gathered from the share at the end were related to these ideas:

• Switching graphics/metadata when content is selected

• Highlighting characters/actors

• Episode quick links

• Messing with tile shapes

Wireframes

I started to explore ideas in Figma by considering the scenarios from the workshop, how to use existing tiles, the destination hub pages, and including titles/descriptions of the collection.

When it comes to Living Room devices, interaction design really matters, so I needed to make sure my designs were easy to navigate with a remote and were in line with existing LR patterns (e.g., the first focus always on the most far-left tile or button first). This is why I created these prototypes so early on. This helped me realize certain types of designs didn’t work out, such as designs where tiles and/or buttons stacked (you’ll get two rows in what should be one). We want to give an easy out to users who are not interested in the collection, so two clicks are more frustrating than one.

Visual Design

After getting feedback on my wireframes from LR and Discover designers/stakeholders, I began to start including high fidelity tiles and fonts from our component library, as well as a background image and gradients (the required elements from the Jira ticket). I also tested out some background transitions (which later on got de-scoped since they are quite difficult to do on LR devices).

In the end, we came down to two templates to go into user testing, which you can view below. These templates were chosen because they followed current components and/or what they introduced left a large enough impact that elevated the collection (such as the bigger tile sizes).

User Testing

As we had Usertesting.com, I was able to get started on a rough draft for a test plan. Along with this, I worked with our Creative Technologist to create a higher-functioning prototype of Hulu home that included my Branded Collections designs and other tiles needed for testing. You can see the prototype in action in the video above. Once I felt good about the test plan, I reviewed it with a User Researcher who gave me feedback which lead to the launch of our pilot test and later the actual test. Below were the user test goals. We tested with Hulu subscribers who use Living Room devices.

User Test Goals:

1. User sentiment around experiencing multiple high emphasis templates

2. Whether users understand the initial focus on these templates 

3. Whether users understand how to interact with the template tiles 

4. Whether users understand how to enter and exit the connecting Hub/Collection

5. User sentiment around content curation on Home and Hubs/Collections

Research Findings

Once the tests were complete, the team and I split up tests to take notes and add them to a collective research Google Sheet. Once we had all the main findings (broken up by task) we were able to synthesize the main findings into a deck my teammate and I presented to our PM. The findings are listed below.

Finalizing Designs, Future Design Thinking

Once the test was complete, we decided on the final two templates.

• Discover: The Discover template helps viewers browse the content of interest in a standard tile tray without leaving the homepage. Within the template, the standard tile tray can be swapped to either a live or episodic tile tray. We decided to go with the left-aligned option here as we do not have any other center text tiles on the Hulu homepage.

• Display: The Display template draws focus to specific pieces of content and makes it easy to visit the full collection/hub. Individual entities are placed in a new vertical tile format and help brand and promote the collection.

When finalizing designs, there were a couple of items I needed to consider:

• Making sure the text on the bottom of the tray (in the Discover template) passed accessibility requirements with having the background under it.

• Considering fallback text if a template did not Font Art or the Font Art did not load.

• I did some explorations on what would happen with the Display template was scrollable (our MVP was non-scrollable, 3 tiles). You can see some of my explorations above, though none of the ideas were confirmed, as the LR platform lead wanted to rethink the tiles with the entire LR team.

• As much as I loved the transition I worked on (the one from collection to Hub) within the earlier stages, they were not going to work with a lot of our low-powered devices, so it had to be put on hold for a future date.

Documenting for Multiple Stakeholders

This project was interesting in particular there were multiple partners we needed to give documentation to. These partners were:

• GH:

  This is the team that handles image assets. We created a Google Doc for them that described the best types of images to include for the background image in each of our templates, including rules around safe areas and what color images work/do not work with each template.

• OCM:

  This is our content marketing team/editorial team. The OCM team is in charge of creating the rows on Home and assigning them the ‘brand’ and content. In our documentation for them, we explained:

  • Which templates should be used for going to details vs straight to playback

  • What assets the templates need/have

  • General rules of when the collection should be used/displayed, etc. For example, one of our Living Room test findings was that bigger tiles are read as ads by our users, so we want to make sure these bigger collections/tiles have enough smaller tile rows in between so that users don’t think they have too many ads on their home screen.

• Devs:

  I created documentation for our Living Room developers that listed out:

  • Spacing and margins of the text and trays inside the collection

  • Mapping out the gradient position and colors

  • Interactions, e.g. how users travel in and out of the collection for different devices (like Apple vs. Roku)

  • TTS (Voiceover)

Development & Design QA

This project is currently under development, and will soon be entering Design QA where I check an LR build to see if it matches the specs. Hopefully, you’ll see it on your Hulu Home soon :)

Learnings / Reflections

Learnings

• In this project, I was introduced to working outside of the player for LR. I had to quickly learn the limits and differences between different LR devices (Roku, Apple TV, Firestick, XBOX, Playstation, etc.) I’m thankful for this experience as I’m now more knowledgeable as an LR designer and am excited to continue to learn more.

• Through this project, I also learned how to document for different organizations like our GH and OCM teams. This allowed me to meet more people in Hulu and further understand all the pieces it takes to design for the Hulu Hom Screen.

• This project also really helped me dive in and learn how to animate in Figma.

Reflections

• I would love to come back to this project in the future once we have implemented video/trailer tiles as this could really change how we approached the designs/tiles/metadata.