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.
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.
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.
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.
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
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.
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)
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)
02
Ideation
(Main Navigation with Dropdown explorations)
Downselection after subnavigation exploration
Design Guidance
