Product design, page experience, design system, design language, information architecture
Product owner, backend dev, content team, design system manager
The Teams page is where users can find their favorite teams’ information, such as rosters and stats, displayed in a comprehensive layout. This page also includes various articles and video content related to that team.
The acceptance criteria from the product owner was to redesign the teams page with the newest design system for mobile and tablet. Create a page that is scaleable across all 32 teams. Design a component that displays tabular data with the intention to be reused across the product. Rank the most important content and dataset that the users value the most. Finding out what type of dataset and content we have internally.
Everyone has a favorite team, and each user wants his or her team page to have a unique look to separate themselves from rival teams. The amount of information needed to be displayed on this page is usually vast since it is tabular data.
The process for creating the teams page was determining what the users are trying to achieve on this page and understanding which content is the most valuable to the users. I worked very closely with the backend team and product owner to determine what dataset we had so I can understand what designs the backend consoles can support. Speaking to the content team gave me an understanding of which piece of content fans engage with the most.
To make each team’s page feel special, we made custom headers for all 32 teams, and the Super Bowl champions get an image of the Lombardi trophy on their hero image to show their victory. If the user wanted to switch to a different team page, they can tap the dropdown menu at the top of the header.
The most common information that users seek is the team’s schedule, so we displayed it as the second content block of the page with a card attached showing the latest matchup.
Users can find the most recent news from around the league about their team on the news bucket below the schedule.
To break up some of the tabular data, we included headshots and visual data like charts and graphs to give the page more separation between the text.
Any team-related injuries will be displayed on the roster with the injury description and the play status to inform users whether the player will be on the field or not for that week’s game.