NFL_Cover.png

NFL Mobile App

 

The NFL dominates American sports — it accounted for 93 of the 100 most-watched TV broadcasts in all of 2023. But even as the nation’s most-watched sport, the NFL needed to modernize its app to bring the game closer to its die-hard fan base and new fans alike. So the NFL called an audible, transforming its app approach into more than just a game day companion, but an experience that fuels the rhythm of the game – every play, day and week, on and off-season

 

Objectives

The NFL introduced a revamped mobile app featuring their subscription-based streaming services, NFL+ and NFL+ Premium, aimed at boosting both visibility and subscriber engagement. To enhance the app’s usability and elevate its visual system, the NFL partnered with Code and Theory. The goal was to develop strategic design solutions that not only enhance user experience but also create a scalable design system adaptable to various user needs and future expansions within the broader NFL ecosystem.

Role

Collaborated with the NFL Product Design team to craft a scalable visual design system, unifying the core NFL brand with the unique identities of all 32 teams. This comprehensive system was designed to seamlessly support high-profile NFL events like the Draft, Pro Bowl, Schedule Release, and Super Bowl, ensuring consistency across the entire NFL digital ecosystem.

Partnered closely with creative strategy and UX teams to address the complex design requirements of various game states, paywalls, matchups, and subscription models, delivering a cohesive and adaptable user experience.

Main Responsibilities

  • Established the New NFL Mobile's core visual identity, defining the look and feel for the NFL digital ecosystem.

  • Led the visual design team in creating a comprehensive design system in Figma, including foundational visual guidelines and key component libraries tailored for scalability and consistency.

  • Developed a long-term atomic design system for the NFL product team, enhancing design efficiency and brand coherence.

  • Partnered with UX designers to deliver precise design documentation and interactive prototypes for seamless developer handoff.

  • Conducted design QA in collaboration with the NFL team, ensuring pixel-perfect execution and brand integrity from simulations to final launch.

 
 

Visual Direction

Our visual design aims to strengthen the connection between fans and their favorite teams, while accommodating sub-brands like NFL RedZone, NFL+, and NFL Network. By embracing the bold colors and jersey elements of all 32 teams, we crafted a system that balances functional clarity with emotional resonance, ensuring that colors do more than just identify — they capture the spirit and energy of the game.

 
 

Matchup and Video-First Experience

Built around the versatile Game Card super component, this system serves as the core building block of the new NFL experience. It dynamically adapts to various game states — pre-game, live, and post-game — while supporting diverse content types, light and dark modes, score hiding, and media-embedded variations, providing a seamless and flexible foundation for every matchup.

 
 

Enhancing Every Game Day

The new NFL app is designed to deliver the most relevant content throughout the week, with a special focus on Sundays — the heart of NFL action. With up to 14 games from 1 pm to 8 pm EST, the app ensures fans can stay connected, whether at home, at the bar, or on the go. With NFL+, users gain access to live local and national games, as well as RedZone, putting the ultimate Gameday experience directly in their hands.

 
 

NFL News, Anytime, Anywhere

The new mobile app delivers a richer, more dynamic news experience, keeping fans connected with the latest updates through articles, highlights, deep dives, and quick hits. Each news component is designed to provide fast, comprehensive coverage, making it easy for fans to stay in the loop.

 
 

Dig Into the Stats and Standings

The app transforms a vast array of stats into an engaging, real-time experience for fans. From pre-game insights to live updates and post-game analysis, it presents the right data at the right moment, with carefully considered hierarchy and density for optimal usability. It also brings individual team and player stats to life, along with leaderboards, empowering fans to explore the numbers that matter the most.

 
 

More Than Just the Season —
Year-Round NFL Experience

The app is designed to engage fans beyond the regular season, supporting off-season tentpole events like the Playoffs, Super Bowl, Combine, Schedule Release, and Draft. The design system must not only capture the unique identities of these events but also seamlessly integrate with the broader NFL brand and 32 team color palettes, ensuring a cohesive experience year-round.

 
 

A Scalable System for the
Broader NFL Ecosystem

Built on a comprehensive design foundation, this scalable system empowers the NFL team to extend its visual identity across the entire digital ecosystem — from NFL Pro and Connected TV to NFL.com — creating a cohesive, seamless experience for fans everywhere.

 
 

NFL Mobile App at Config SF 2025

The NFL mobile app work is being presented by Lauren Manning, Head of Product Design, UX Research NFL, and Arjun Kalyanpur, Senior Director, Product Strategy at Code and Theory at Figma’s Configs 2025 in San Francisco.

 


The Webby Awards Nominee: App & Software — Entertainment & Sports 2025
The Webby Awards Nominee: App & Software — Best Visual Design Aesthetic 2025
Fast Company Featured Article — How the new NFL app keeps you hooked on football all week

 

Credits

The NFL Team
Lauren Manning
Lee Kurland
Armond Aghanian
Melanie Jaffe
Nkechi Nnorom
Kirit Khanna
Michael Lujan
Elena Sidyakina
Lucas Cambra
Max Nelson
Joon Son

The Code and Theory Team
Arjun Kalyanpur
Francisco Seiz
Alex Chen
Hanna Elliott
Mike Lubey
Maddie Sherlock
Maddie Brizuela
Yasmin Akhavan
Lucy Ye
Chloe Lombard

Dev Partners
Apply Digital