The NFL reaches more than 200 million fans annually, making NFL.com one of the most visited sports platforms in the world. Yet despite the scale of the league, the digital experience was built on a system that didn't reflect the rhythm of the game. After Code and Theory redesigned the App experience, the NFL team called on us once more to redesign how fans engage with football on their web experience.
Timeline
2024 - Present Day (Ongoing)
Objective
Establish a design system that is seasonally adaptable using a flexible component system that increases engagement and improves pathways to subscription. Once the system was in place, we were to apply the new designs across the .com experience.
My Role
I supported in leading the experience design across the full site from research and strategy through execution and delivery.
I led alignment workshops with NFL stakeholders, owned end-to-end UX across key pages, and worked in cross-functional sessions with product, visual design, and engineering teams to ensure components shipped correctly and consistently. I also owned annotation and documentation throughout, producing detailed Figma specs that supported handoff.
Impact
​​
-
3× increase in NFL+ acquisition rate; NFL+ discovery grew +104% YoY.​
​
-
Clicks to game pages increased +138%.​
​
-
Integrating the new design system improved speed of design to developer handoff by 30%, having a massive effect on overhead.
​
-
1.1M NFL+ Subscribers from web.
Dive into
the Process
01
Strategy & Alignment
Each of our sprints begin with two days of in-person and virtual sessions to define scope, identify what's working, what isn't and align the team on a clear direction and strategy before deep execution begins.
The existing design system needed an entire shift from the structure all the way to it's visual look and feel.
02
Landscape Research
We audited page experiences across major sports leagues and adjacent brands, evaluating how they handled pre-game, post-game, live states and subscriptions to identify gaps and opportunities that we can leverage to move forward.
Insights
Research revealed that fans aren't casually exploring NFL.com. Instead, they come looking for answers, fast. Whether that's to check game times, buy tickets, view game schedules, they're arriving on a mission.
​
Additionally, we also pin-pointed a critical business gap: NFL+ was largely absent during the moments when fan intent was highest. The league lacked a strategic way to turn high-value engagement into meaningful subscription consideration.
​
In response, we developed a strategy that reoriented NFL.com around three core principles:
​​
Design around existing fan patterns and momentum: restructure the experience around the moments that fans care about most. (Scores, schedules, standings, and live game details)
Build a future-ready platform: modern architecture, flexible components, and a unified design system designed to support every team, page, and game.
​
Create pathways, not interruptions: Surface NFL+ through timely and contextual touch-points that are woven naturally into the experience.
03
Day-parting
To gather detailed requirements, we worked with client stakeholders to understand in what fans need across different days of the week and how features can flex to meet those needs. We built a day-parting map along with a feature matrix that allowed us to gauge nice-to-haves, must-haves and what the experience can do without.
We were now able to understand fan behaviors across pre-game, live, and post-game windows and translate those findings into data requirements and component logic that shaped how the system would flex across every season.
We developed a feature matrix to evaluate key components across competitors and determine which experiences were valuable enough to inform and scale within the NFL design system.
04
Mini-wires & Subscription Strategy
Once we understood key feature opportunities, we needed to establish how those features would adapt to the changing schedule of the NFL week, while ensuring clear pathways to NFL+.
Using color-coded mini wireframes, we mapped how each page evolved day-to-day and ensured the system could support both dynamic content and conversion goals.
​
Through additional sprints, we expedited this process, leveraging our understanding of the system to inform future page designs.
05
Design, Iterate, Design, Design..
While aligning on page structure and subscription strategy, we simultaneously explored building the design system itself. Through iterative wireframe explorations and XD review sessions, we developed a modular component system that could scale across breakpoints while balancing fan needs, rights restrictions, and business goals before moving into build.
06
Annotation + Delivery
To finalize and deliver each sprint, we produce thorough component-level and page-level specifications, documenting interaction behaviors and technical requirements to ensure smooth handoff and consistent implementation across a large engineering team.
