Experience design | Content Strategy | Competitive Analysis

fuboTV homepage

Problem

As the largest platform, fuboTV on Roku has the most viewership on our app; however we noticed that we currently lack personalization and analytics show that video play rate is not distributed throughout the homepage.

As part of our squad mission to present the right content to the user at the right time; we are hoping to let users browse through our homepage to discover new and related content.

Role

Design Lead, experience designer

 

Client

fuboTV

Duration

April - Present 

Tools

Figma, Illustrator, FigJam, Miroboard, pen and paper

Solution

As the first step in achieving personalization, we need to look at creating a baseline design where we can deploy and test on the Roku platform. The design will lead to future implementation on other platforms as well.

Background

From Analytics and qualitative feedback from users, we understood that our current homepage on Roku have a lack of personalization. As the platform with the largest number of users, we need to revisit our content strategy in combination with backend capabilities to create better personalization for our users.

201111_top-nav-selected-chw
201111_render-selected-details-chw

How Might We create a more personalized and engaging experience for our users to bring familiar and new content to them through the homepage?

 Process

01

Render Cards audit

In order to have meaningful UI engagement and work upon a baseline design for the homepage. I started with analysing the current state of the render cards on the homepage. Because Render cards make up such a large part of the homepage, they are an important component to improve upon. Currently on Roku, our app has the following types of renderers.

station-programming
show
content-items
show-1
02

Exploration V1

In order to support the content strategy for better personalized experience, I first looked at the top carousel and various ways we could approach the top shelf. From surveying over 10 direct and indirect competitors in the OTT (Over the top media) space, the team decide to explore a top shelf with a immersive background experience upon entering the app.

When designing for TV, we need to consider both the focus state and the default state of the cards. Currently, we are conducting a user research study to find out more about how users perceive the metadata  on the card to inform the next step of the design. I started with a wireframe to look at various ways we could create a cleaner information hierarchy on the app.

wireframes-for-homepage
Screen-Shot-2021-05-18-at-6.28.43-PM
Screen-Shot-2021-05-18-at-6.36.56-PM
Screen-Shot-2021-05-18-at-6.46.03-PM

Promotional carousel renderer

Screen-Shot-2021-06-04-at-11.29.51-AM

 

Re-designing the homepage is a huge undertaking. There are several pieces to consider to improve upon the existing product. For product to be successful, I also spent sometime learning about backend recommendation engine and popularity engine capabilities to help better support a new content strategy. Currently, I am visiting grids for the TV app to establish better grid system for interface engagement on the homepage.

More content is underway.

There is only so much I can show under NDA and as a core feature of the app, I won't be able to showcase every part of the process. For more process related content and details, please reach out to me in person.