Road to Super Bowl
Collaborated with
Product owner, frontend dev, content team
Role
Product design, page experience, UI/UX design, design system
Overview
Description
Road to Super Bowl is an editorial piece for users to view during playoff weekends. This page will provide details of each team’s journey to Super Bowl with supporting videos, articles and a bracket system for users to easily view.
Problems
At first, NFL App was designed with a locked portrait view, which made it really hard to fit a full bracket system on a 320-375px device. We decided to intro a horizontal view for the bracket system, but even with this view enabled, it was very challenging to design a contextual bracket system that fit on screen without scrolling.
Solution
There is a message displayed below the main navigation to inform users to rotate their phones to see the full bracket system. At the top right corner of the main header, there is an icon that will force rotate the screen if the user taps it.
Users can see the journey to Super Bowl for each team.
Each playoff matchup card can be tapped to display more details, such as videos and articles, about that game. The content is filtered by a segmented control for each team, allowing for a more organized feed.
If users decide to rotate their phones horizontally, they can see a full bracket that gives an overview of the journey to Super Bowl. This is the bracket for Wild Card Weekend, when two teams from each conference have moved up to the divisional playoffs already.
After Wild Card Weekend, users can see which teams will be facing seeds one and two of the divisional playoffs.The highest seed always plays the lowest seed, so sometimes the bracket will do some crisscrossing.