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, Actively 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, hubs, 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
Since launch, we've continued to optimize the design system and web ecosystem, adding to its successful impact.
3× increase in NFL+ acquisition rate
NFL+ discovery grew +104% year-over-year
+138% increase
In clicks to prominent game pages across the ecosystem
+1.1M and counting
NFL+ Subscribers from the web experience alone.
Dive into
the Process
Strategy & Alignment
NFL Sprints often begin with two days of in-person 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.
I went with a small team to L.A. where we established the foundation for the sprint ahead. This involved an audit of the existing system, identifying gaps and pain points, mapping of opportunities and aligning on experience goals.
The initial design system needed an entire shift from its page structure, component library and way-finding all the way to its visual look and feel.
Landscape Research
To understand the features that could come to life, we audited page experiences across major sports leagues and adjacent brands to evaluate how they handle pre-game, post-game, live states and subscriptions to feature opportunities that we can leverage to move forward.
Insights
Strategy and alignment sessions revealed that fans aren't casually exploring NFL.com. They went to the site looking for answers, and fast. Whether to check game times, buy tickets or view game schedules, fans are typically arriving with a clear mission in mind.
We also learned that NFL+ was largely absent during moments when fans were engaging the most. During live games or primetime moments the league lacked a strategic way to turn high-value engagement into meaningful subscription.
In response, we developed a strategy that reoriented NFL.com around three core principles:
This established our foundation for the work ahead.
Design around existing fan patterns and momentum: Restructure the experience to be prioritized around the moments that fans care about most: Scores, schedules, standings, and live game details
Create clear user pathways: Surface NFL+ through timely and contextual touch-points that are woven naturally into the experience.
Refresh the experience that scales to be a future-ready platform: Establish a modernized system with a strong information architecture, flexible components, and a unified design system designed to support every team, page, and game state.
Day-parting
Once we've mapped out clear opportunities through current experience audits and landscape analyses, then we were able to build an exercise that allowed us to understand what fans need across the different days of the week.
Day-Parting.
Day parting is the bread and butter of building the NFL web experience. The NFL has different offerings throughout the days of the week and the design system needs to reflect and flex to meet those changes.
Knowing that we built a day-parting map to workshop what those use cases are for each day of the week.
Additionally we used a feature matrix that allowed us to gauge nice-to-haves, must-haves and what the experience can do without.
Through this process, we identified how fan needs evolve throughout the week and how a flexible component library could adapt to meet those needs.
This gave us a clearer understanding of fan behaviors across pre-game, live, and post-game windows, allowing us to translate those insights into data requirements and component logic that enable the system to scale and adapt across the season.
That clarity ultimately led to stronger, more intentional component recommendations.
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.
Mini-wires & Subscription Strategy
Once we defined the priority components, we focused on how they would adapt across the NFL week, while maintaining clear pathways to NFL+ subscription.
Using color-coded, low-fidelity wireframes, I partnered with another experience designer to map how key pages changed day-to-day. This helped ensure we were supporting conversion goals, video content, and priority offerings at the right moments.
As we moved into future sprints, we streamlined this process by applying what we learned to quickly inform and scale new page designs.
Design, Iterate, Design, Design..
While aligning on page structure and subscription strategy, we worked in parallel to define the design system. Through iterative wireframes and review sessions, we developed a modular component system designed to scale across breakpoints and adapt to varying needs.
This required balancing fan needs, rights restrictions, and business goals, ultimately resulting in a flexible system that could support multiple use cases before moving into build.
Initial phases of work began with broad exploration, identifying a wide range of potential experiences across the NFL ecosystem. From there, we intentionally narrowed our focus to the moments that would have the greatest impact on engagement, subscription, and content discovery.
This approach established a clear pattern: designing for high-value moments first, then translating those solutions into flexible, reusable components that could scale across the system.
Annotation & Delivery
To support each sprint, I owned and produced detailed component- and page-level specifications, documenting interaction behaviors and technical requirements to ensure smooth handoff and consistent implementation across a large engineering team.
