UX Prototype: NFL Standings Table

I’m one of an estimated 49% to 70% of Americans who counts themselves a fan of the NFL. I’m sure they’re busy preparing for the upcoming 2018 season. Engaging ~200 million US fans can’t be easy.

So I thought I’d take some time to help explore the user experience on the NFL.com standings screen. Here is a screenshot of their current interface, minus the ads.

The blue line represents what you can see above the fold on my Macbook Pro with their current navigation. If I delete the navigation, the red line represents the new fold.

This isn’t an exhaustive list, but there are 3 primary issues I’d like to address with this interface:

It’s very hard to compare teams

Using so much vertical real estate to represent this data means users are only able to view a small portion of the table at a time. This forces you to scroll up/down hunting for a team. Then you memorize 1–2 relevant data points. Then you hunt for another team and compare your memory to what’s on screen. This is a slow process that breaks down as you try to compare more than 2 teams at once.

The table is too noisy

I seriously don’t think the average fan cares about the percentage of games a team wins within their conference. I consider myself to be a fairly serious fan and the only reason I’d care about half of the columns here is in a playoff tie breaking scenario. In most cases, this extra data is just adding cognitive overhead.

Unnecessary tabs

The 3 tabs at the top just toggle between showing exactly the same information by clustering teams into different buckets. I do find it nice to see teams bucketed by division but there should be a better solution...