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.
(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?
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.
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.
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.
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.
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.
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.
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.
Explorations + Iterations
Content-item Card Spec
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.
(I hook together an IR sensor with the Arduino Leonardo to allow TV prototyping on Figma mimick closer to the actual experience)
(using the Figma prototype and control with the Roku Remote to explore grid and sizing)
(using a low-fi figma prototype with the Roku remote control)
(This part of the prototype is displayed in the second image above to explore grid and renderer sizing)
(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
(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
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.
