Standings
Role
Product design, UI/UX design, page experience, design system
Collaborated with
Product owner, backend and frontend dev, content team
Overview
Description
Football fans can find out where teams stand in each division, conference and the entire league by visiting the Standings page. The NFL also has a feature on the page called “Playoff Picture,” detailing which teams have a chance to go to the playoffs if the season ended today (regular season).
Problems
Standings pages are usually displayed as tabular data so users can just scan a list until they see their favorite team. However, the amount of information this tabular data displays is too overwhelming for an average football fan, As is the amount of information “Playoff Picture” needs to display for each team.
Solution
The page divides into sections based on three ranking categories: Division, Conference and League. Each team is listed by season record, and the teams that clinched playoff spots have an info bar attached below.
Users can access “Playoff Picture” by tapping the header dropdown menu. “Playoff Picture” displays possible match ups and the current seed number for each team, as well as the percent chance of those teams making the playoffs.
Each “Playoff Picture” card is expandable to display possible scenarios for the teams with the highest records to automatically lock in a place in the playoffs.
The cards are divided into each playoff weekend. This is Wild Card Weekend, the first match up of the playoffs. When this match card gets expanded, it shows both teams’ chances to clinch their division.
Teams that still have a chance to make the playoffs are considered “In The Hunt.” This section shows how many games back each of these teams are from catching up to secure a spot in playoffs.
The teams “Eliminated” from the playoffs still play games during the regular season, but no matter what they do, they have no chance to make the playoffs.