NHL Bracket Challenge

We helped the NHL create a game that was as fast, exciting, and engaging as the playoff games themselves.

At a Glance

926k+

BRACKETS SUBMITTED

Increasing engagement with fans

Before we designed any buttons, sliders or dropdown menus, we worked with the NHL to help restructure the entire concept of the Bracket Challenge experience. We introduced the idea of Bracket Leagues: Groups that participants could create within the Bracket Challenge platform to invite their friends, co-workers, and hockey nemeses to compete for bragging rights.

Bracket Leagues didn’t just add an exciting new dimension to the overall experience, they also enabled the NHL to extend the engagement with fans. For the first time, the league was able to open up the platform to traffic well before the end of the regular season. Fans could now register, onboard, set up their profile, set up their Bracket Leagues and invite other participants all before the postseason matchups were determined.

NHL Bracket Challenge — Lots of different technologies went into making a complicated backend feel simple

Body checking the mobile problem

Anyone who’s ever filled out a tournament bracket will immediately recognize the inherent design challenges that come with optimizing that experience for a mobile device. Namely, the native shape and layout of a typical bracket are entirely unsuited for the mobile screen – too wide to fit in the portrait view and too small to see in the landscape view. The typical mobile experience for filling out a bracket is a frustrating pinch & zoom nightmare that leads to as many mobile users abandoning as users completing their brackets.

We realized that we needed to redesign the whole mobile Bracket Challenge experience from the ground up. Following Purpose-Driven Design, our solution was to introduce a dynamically animated bracket. This elegantly compact design centered on bracket modules that could expand and collapse to either allow users to focus solely on the area of the bracket in which they were currently working or have a full overview of their entire bracket.

To achieve a final design that could reliably accommodate the ways in which most mobile users would expect to complete a bracket, we brought prototypes of the design to NHL games around New York City and live-tested our ideas with real fans.

NHL Bracket Challenge final product — We created an elegant mobile solution for a layout that can be tricky to accommodate on phones.

Timeline of NHL Bracket Challenge — We continued to evolve the bracket challenge over multiple years.

NHL Bracket Challenge Product Detail — The design gave space to advertisers while making it easy to track progress.

Optimizing the backend to respond quickly at a massive scale

While the new mobile bracket product pushed our designers and front-end developers, our backend devs embraced their own massive technical challenge. The build for Bracket Challenge had to be optimized to reach scale in a matter of seconds, which allowed ETR to flex our AWS capabilities in exciting new ways.

One of the principal backend design challenges was to stand up a server configuration that could withstand a formidable influx of traffic within a very limited window. Once the playoff pairings for the NHL playoffs are announced, there are only a few days before the first game. Once games begin, fans can no longer submit or alter their brackets. We needed to be sure that the millions of fans who wanted to participate could do so within those few days. We tested and fine-tuned rigorously to get this right.

In addition, the Bracket Challenge experience required a complex, up-to-the-minute scoring engine that populated a real-time leaderboard showing the ranked status of every single bracket submitted.

Finally, the whole system had to be engineered to dynamically respond to different phases of the Bracket Challenge. The interface and available functionality had to be responsive as the pre-playoff period gave way to the all-out sprint to complete brackets and then into scoring those brackets during the playoffs — all while making the whole experience feel familiar, fun, and consistent.

Request count on NHL server — The NHL servers see giant spikes in traffic throughout the year, and the backend needed to reliably perform at these critical moments.

Game-winning results

For confidentiality reasons we can’t get into the details, but each year Bracket Challenge finds new levels of success. We’ve enjoyed year-over-year increases in the number of total players and the number of brackets created. Social sharing and fan engagement are way up too.

NHL Bracket Challenge on-air features — Bracket Challenge coverage on live TV

Skating to where the puck will be

We were fortunate to be able to build upon our initial success in the years following the launch. We introduced Second Chance Brackets—a great way for fans to reengage during the playoff by giving them a chance to amend their brackets after playoff games have begun.

We continued to collect user feedback and improve the user experience and performance of the Bracket Challenge platform across multiple seasons. We were excited to take on each new set of challenges as our creative partnership with the NHL pushed us to build even deeper and more meaningful engagement with fans.

Thinking about a project like this one?

Consider working with a digital agency partner. We have the technical expertise to build efficient digital products that scale.

We’d love to learn more about your needs and share our process on how we help organizations navigate digital initiatives just like this one.

Get in Touch