fa s d f

System Design | Design Research | Internationalization

Global Navigation (fuboTV)

Problem

We are tasked with redesigning global navigation for our new product that merges the newly acquired streaming app in France, as well as our USA app. In addition to cross-platform design, we also need to understand how the navigation should be scalable and flexible enough to launch in international markets.

Role

Product Designer
Prototyper

Team

Chloe Park (Senior Designer)
John Banks (Product Manager)
Christopher Jarzebek (Design Manager)
Frontend Platform Engineers

Duration

April 2022 - July 2022 (Design Phase)

Tools

Figma, Arduino, Notion, Google Slides, Usertesting.com

Solution

I took on the responsibility as one of two designers to create navigation for our unified app across TV, web and mobile device platforms (7). I created a documentation for navigation framework, and contributed significantly to coming up with main navigation, subnavigation,and filter for the new navigation system.

Background

In late 2021, fuboTV acquired a streaming company in France as part of its global expansion strategy. I was tasked with the desgin of the navigation for the unified app across TV, Web and Mobile --- in partnership with a Senior Product Designer. As we consider existing markets, we also need to take into account the flexibility and scalability as we expand the product internationally.

map-world
merging-two-services

How might we create a navigation framework that functions independently from changing variables due to market, business, or branding changes?

Research Process

Methods

In our product discovery phase, we have conducted several research methods to help us formulate an informed decision on the right way to navigate around the app. 

We looked at 10+ direct and indirect competitors, conducted analytics across our 7 device platforms in our US app, and conducted device platform user behavior surveys with 400 participants in each survey.

In addition to analytics and survey, I also conducted in-person user testing with Figma Prototype and Arduino to walk through the scenario for choosing a sports league or watching a show.

competitive-analysis
01  Competitive Analysis

On TV, web, and mobile, we looked over 10+ direct and indirect competitors, by collecting their navigation flows, and screenshots. My senior design partner put together a competitive analysis summary in Figma that outlines the evaluation of each of these competitors including a mix of qualitative and quantitative evaluations. 

analytics
02  Analytics

With our existing product in both France and US, I asked the product manager to pull existing analytics on the platform to understand what are the top viewed pages on each platform and the content being consumed. This provides additional insights into the type of content emphasized in different markets and uncovers patterns of how people currently navigate our app.

survey
03  Platform Survey

Together with the UX research team, we launch a platform-specific survey with 400 participants on each device platform to understand the user behaviors and attitudes specific to that platform. The participants are a mix of users who uses our service and other streaming services.

User Scenario

sports-fan
cord-cutter
The Sports Fans

Sports fans are our primary users who come in to choose from their favorite teams or sports to watch. They often have a good idea of what they are looking for.

The Cord Cutters

Most of the interpreters said that images of terms that show the relationships are more helpful than images of the specific term.

testing-session-chw

Conducted prototype testing with 6 people in the office

Goal:

During the offsite in New York, I was working with my design partner in the office to create Figma prototypes and to validate with half a dozen people to help us figure out the best path forward for TV Navigation

What we did:

We prepared different Figma prototypes based on the use-case of someone trying to find a sporting league or show. In under just one week, we went through 3 rounds of prototype iteration to test with people who are both sports watchers and non-sport watchers.

Key Insights

In the context of web, we have a few insights to work with, but some of these insights also apply to across multiple platforms.

01 

Users came to web primarily to access sport or entertainment content to watch, favorite or record

02 

Sports fans like to go directly into their sport leagues or sport types, and they often know what they are looking for coming into the app

03 

Cord-Cutters tend to be more in the browsing mindset when they are looking for entertainment content.

How might we have a main and sub-navigation system that supports users who know exactly what they are looking for, and supports those who are looking to browse?

Design Process

01

Audit

Main Nav + Sub Nav (Sports User Flow)

gif-current-sport-flow-s

I started by looking over the flow of the Sports section. There are a few noteworthy issues with the current flow:

1. Redundant sports genre selection that leads users to a different view of the schedule
2. A long list of schedules to filter through
3. Getting to leagues requires the user to be in the tertiary level of the navigation.

Sub Nav + Filters (web)

web-platform-audit
02

Ideation

Main-nav-exploration

(Main Navigation with Dropdown explorations)

sub-nav

Downselection after subnavigation exploration

ideation-process-flow

Design Guidance

Guidance1
guidance2
This is a sneak peek version of the project. Currently, it is undergoing implementation and there is limited information I could showcase via the website, but I will be happy to share more in detail in person :)