Modernizing a Legacy Platform for 200M Users

The NFL.com Redesign was a year-long effort to transform the league’s browser property into a compelling, fan-first experience. As product design manager, I led a cross-functional team to reimagine the site’s user experience while navigating legacy infrastructure, rigid ad constraints, and the absence of a shared user POV. 

Role | Product Design Manager

Initiative Duration | 1 year

Challenges

  • Shrinking 200M user audience due to competition and poor SEO

  • 10 year old, unsupported CMS frustrated content teams

  • Ad-driven constraints dictating layout and content density

  • Lack of institutional UX maturity or shared fan understanding

Actions

Deep, Rapid Discovery & Strategy

  • Combined behavioral analytics and qualitative research across 25+ diverse fan interviews to define user jobs and mental models.

  • Identified high-value journeys jointly with Ad Sales to support monetization alongside UX improvements.

Experience Principles, Collaboration, & Testing

  • Created experiential principles: Identity, Coaching, and Evocation.

  • Facilitated inclusive, cross-functional design studios with Product, Engineering, Editorial, and Sales.

  • Ran IA optimizations via card sorts and tree testing to align site architecture with user expectations. Created programmatic site nav to flex with seasonal user demands

Design & Ship

  • Co-developed a new CMS with engineering partners transitioning to React.

  • Tested two full concepts (ambitious vs. feasible); made final call to move forward with the more scalable version based on testing integrity.

  • Delivered responsive, modular design with persistent nav, customizable news feed, and simplified IA.

Results

User Engagement

  • −43% bounce rate, +28% content views, +68% video conversion, +21% video begins in Q1 post-launch.

  • Usability testing and social media sentiment showed significant improvement in trust and satisfaction.

Business Impact

  • Increased discoverability and engagement drove ad revenue growth.

  • Redesign became a catalyst for evolving content monetization strategies.

Org Impact

  • First implementation of NFL’s cross-platform design system.

  • Redesign team became a center of gravity across departments, initiating a broader culture shift toward user-centered design.

10 Years in the Making

NFL.com, circa August 2016, before the redesign

In 2016, NFL.com was a fixed-width website that hadn’t been redesigned since it launched in 2006. Despite being the flagship browser property for the league, site engagement was diminishing. There was little organizational intelligence re: users and the environment was business-dominant.

We needed to fully assess and reconsider the site IA, create a modernized (circa 2016) responsive design, build personalized experiences, and maintain the existing ad inventory footprint.

A UX Initiative and a Cultural Movement

One of many design studios I facilitated, 2016

I treated this redesign as both a UX initiative and a cultural movement. We needed a coalition to succeed. I established 4 pillars for the redesign:

  • Evidence Basis: I first focused on site analytics. We identified narrow engagement. 2% of all live pages accounted for the majority of engagement and 70% of visitors didn’t go deeper than the primary navigation on the site.

  • Voice of the Fan: I personally executed dozens of fan interviews and usability testing sessions. From these sessions we confirmed how deeply the league becomes a part of fan identities. We developed a new personae model dubbed “FIRE” and embedded the voice of the fan into our design principles: Identity, Coaching, & Evocation.

  • Big Tent: I facilitated inclusive, hands-on design studios across Product, Sales, Engineering, and Editorial to gather broad input, build shared ownership, and forge alignment early.  This bought us greater latitude and trust from the business with deeper partnership from engineering.

  • Vision vs Scalability: We tested dual design directions (visionary vs. something we could deliver and scale). I ultimately rallied the team behind the more realistic, shippable version after identifying testing flaws.

Mobile Responsive, Engaging, and Growing

NFL.com, post-redesign 2017. Final design by JMC

Our redesign was a massive step forward for user engagement and revenue growth. Some new features included:

  • Persistent Scores Bar: Deployed in season for immediate access to games and game highlights.

  • Clarified, Seasonal Navigation: Decluttered, prioritized, visually grouped for easy scanning and seasonally programmed to display only what is most relevant in the moment.

  • Breaking News Alerts: Enable the content team to immediately break news and drive to live coverage and video as needed.

  • Fan Customizable News: A 3-tabbed news feed module encouraging fans to sign up to personalize their news feed.

  • New CMS: A completely new, O&O CMS to power the main league site, and the sites of all 32 team sites.

  • New Design System, powered by React: The team created a single design system and rebuilt the front end of the site and mobiles apps using React, getting incredible scale and coherence across all properties.

Artifacts