Super Bowl Game Page
Role
UI/UX design, app experience, design system, content recommendation, information architecture, design language
Collaborated with
UX designer, product owner, frontend dev, content, marketing, and brand identity team
Overview
Description
We needed to redesign the Games List page specifically for Super Bowl since it normally showcases multiple games going on at one time. There is only one game played during Super Bowl weekend, so we had to think of ways to make this page useful and special for the biggest game of the year.
Problems
Some fans don’t have the opportunity to watch the big game due to certain life circumstances like work, vacation or not having access to a TV or streaming service. Therefore, we had to make this page useful for users who can’t see the game live.
Solution
When users land on the Super Bowl game page, they are greeted with a countdown clock to Super Bowl and the team matchup. This component’s design can be reused for other events based off of the NFL style guide.
Once users scroll past the hero team matchup component they will see an inline video previewing the matchup on the pregame live stream during game day (with cable provider login credentials), and highlights during post game.
Users can discover more about the matchup on the game’s detail page. The top of this page will have an animated drive chart to provide users who can’t watch the game live with a visual breakdown of what’s happening on the field.
Below the drive chart, a live feed will display the most recent plays by each team, and the most recently aired Super Bowl commercials.
If die-hard fans want to see breakdowns of any plays, they can go to the drive summary.
Users can expand each drive to see al lplays completed by each team.