The Bracket Challenge platform was designed to roll out in several phases during the NHL regular season and playoffs. Each phase came with its own features, functionality, and complexities - all of which need to be accounted for in our information architecture.

These flow diagrams represent an evolution in our understanding of the platform’s system design requirements as well as the fidelity of the deliverable.

Because we were collaborating so closely with the front-end and back-end developers from the very start, we piggy-backed the database object models they would need to implement the platform onto our UX flows. That’s what you call a cross-functional team!

Before we could set about the task of designing the central interactive elements of the platform, we had to make sure the surrounding infrastructure was in place. These dashboard design wireframes describe how users will move through the end-to-end touchpoints throughout the Bracker Challenge experience.

At the heart of the experience is creating and managing playoff brackets. One of our main goals was to reimagine the experience of creating a tournament bracket on a mobile device. These wireframes describe our first iteration of thinking through how we could maximize the available real estate of the mobile device in portrait view.

It was important for us to test our initial Bracket creation designs with real users as quickly as possible. The NHL helped out by getting us into a few NY Islander games at the Barclay Center in Brooklyn. There, we were able to test with real fans during the intermissions between periods.

Our first attempt at the mobile design for Bracket creation (not shown here) featured a bracket designed for the landscape view of a device. To us, this was an intuitive design choice because it naturally accommodated the shape of a sixteen-team tournament bracket.

However, our first round of testing made it very clear that users were not interested in turning their devices to create a bracket. That insight informed the next iterations of the bracket design featuring these nested, expanding bracket columns.

Here, we can see an evolution of the interaction design that was a result of testing with actual NHL fans. This is also the point where the NHL branding began to be incorporated into the visual design.

This desktop comp shows a playoff bracket in the state of being created by a user. The surrounding platform chrome was designed to be able to incorporate the branding of various NHL sponsors.

In this comp, we can see how users track the progress of their brackets during the Stanley Cup Playoffs. This, of course, fed a leaderboard system that was at the heart of the platform’s gamification.

These comps show some of the central touchpoints of the Bracket Challenge mobile experience.