Experience Design | Cross Platform Design | Design System

Homepage Redesign (fuboTV)

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, visual designer

 

Team

Winnie Chen (Designer)
Matt Ceccarelli (Senior Design Director)
Fred Kullmann (Product Manager)
Backend engineering team
Frontend engineering team (7 engineers)

Duration

April - November 2021 

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, and our overall product exceeding 1 million users, we need to revisit our content strategy in combination with backend capabilities to create better personalization on the homepage for our users.

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

(homepage before redesign)

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

hi-fi-2
lofi

Discovery

01

Product Discovery

Our squad consisted of Backend, Frontend, and QA engineers, as well as Product Managers and Researchers. Each function had domain knowledge and ideas that could contribute to the success of the homepage and also the app as a whole. As a team activity, I led and facilitated several brainstorm sessions with over 16 participants to discuss and brainstorm ideas around the homepage.

 

Screen-Shot-2021-06-13-at-4.38.35-PM
Screen-Shot-2021-06-13-at-11.22.39-AM
Screen-Shot-2021-05-18-at-6.03.45-PM
Screen-Shot-2021-04-28-at-1.41.45-PM
02

Audit + Analysis

I also conducted a Competitive analysis looking across 10+ apps, both direct and indirect competitors. Afterward, I looked at a pattern that these large OTT services have employed to help us build the foundation of creating more variance.

competitive-analysis
grids

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.

analysis

Ideation

Design Exploration

Base of the initial brainstorming workshop with engineers, pm, and QA, I drew up sketches of what the organization of the new homepage might look like to get feedback on feasibility and to paint better pictures about the direction we are going.

sketches
03

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

Promotional Cards Exploration

After laying out options for exploring the landing experience, I started looking at the promotional cards, and various interaction modes and bring to the engineering to discuss feasibility.

ezgif.com-gif-maker
now-on-fubo-op3
4thoption
multi

Content-item Cards Design

The Content-item cards on our homepage is one by far that has the most elements and is the most complex. I went through iterations and considerations of different content-type, states, to come up with the optimal solution that is desirable, feasible, and viable.

Current-Content-item-V1-anatomy-Legend

Explorations + Iterations

duration-tag
duration-tag
with-play-icon-indicator
meatball-menu
dont-recommend
default-with-variations

Content-item Card Spec

content-item-design-specs

Prototype

04

Exploring different modes

Physical Computing Prototype

Because designing for the TV is different from interactive modes. I felt it was important to be able to test it on TV, and going through the exercise of using Arduino and my skills in physical computing to connect an IR sensor that helps to control the prototype I create in Figma and mirror it to my TV for testing and prototyping.

arduino

(I hook together an IR sensor with the Arduino Leonardo to allow TV prototyping on Figma mimick closer to the actual experience)

IMG_4757_AdobeCreativeCloudExpress

(using the Figma prototype and control with the Roku Remote to explore grid and sizing)

prototype2

(using a low-fi figma prototype with the Roku remote control)

prototype-wireframe

(This part of the prototype is displayed in the second image above to explore grid and renderer sizing)

prototypes

(This part of the prototype is displayed in the third image above to explore how the landing page behavior and interaction look like)

05

Final Homepage

01

Cover
webmobile

(future thinking, and current works to rollout to all platforms)

Taking this Forward...

We are setting up remote user interview sessions in close collaboration with the UX researcher to understand how people think and behave while they are using the fuboTV app. We recruited a mix of new and existing users to have them use the old and new homepage.

Throughout the design process of this complex and large initiative, I also took the lead to push for getting constant data from users to improve on design iterations

usability-testing-2

Design System

Challenge

When we started the initiative, we only had the color system in place while the design system was still forming. It quickly becomes obvious that we as experience designers will have to construct and componentize the renderer cards in order to collaborate with developers for development.

Despite this challenge, I created a library of components across TV, web, and mobile with my Senior Design Director that help ease the handoff and communication process with platform engineers.

Moving forward, I also started the collaboration process with the design system to set them up with a good fundation.

TV-components
project-content-type

Impact

After the launch of the Roku homepage, we are seeing a better retention in total hours watched from our users.

Working with a Senior Design Director, we created a library of renderer design components across TV, web, and mobile that hosts a library of components that could be re-used by the design system, which didn't exist at the time this initiative started.

In addition, the new design of the homepage are very well received internally by peers and stakeholders. With that, we are currently working with cross-platform engineers to roll out on to other devices.

But hey...we don't just end here. more content is underway.

 

Re-designing the homepage is a huge undertaking. I am only showing the tip of the iceberg amongst the complex and iterative design process. For the product to be successful, I also spent some time learning about the backend recommendation engines and popularity engine capabilities to help better support a new content strategy. Currently, I am working with mobile and other TV platform engineers to roll out the new homepage on the respective platforms. I also work alongside a UX researcher to gather usability from real users to improve on the next iteration. 

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.