Welcome to my case study of NFL.COM Super Bowl Bracket. I was the senior designer on the project and I bridged between many other teams including product, features, and graphics. I set out to build a new bracket that captured visitors with loads of content and simple interactions. It was also the first time the bracket was built to be responsive to mobile and tablet devices.

As it goes every year, there are playoffs that need a bracket. I have always be interested in brackets and I like to use the when I following a sporting competition. They're a strange mix of story and data visualization really.

The project began with the sketch above which I created after holding multiple workshops with the content team. We needed to understand what content was already in the pipeline and see how that might mesh with the new bracket. We then went to the product team to get their input on the interface types that we generating the most traffic and they told us to build mobile first. So we did, I lead the team to think about mobile users relationships to this type of content. In response we created a mobile design with large finger sized buttons, responsive interface that shortened the content into three containers when on a mobile device, and purposefully short snippets of content for the consumer on-the-go that deep linked to more detailed information.

The bracket was featured on the NFL.COM homepage for the 2015 playoff and headlined the SuperBowl.com site. This content was consumed by million of NFL fans and will be again next year and the year after. Well, until they build a new Super Bowl bracket. You can take the bracket for a stroll by clicking here.