NHL Bracket Challenge

We helped the NHL create their Bracket Challenge to be as fast, exciting, and engaging as the playoff games themselves.

At a Glance

926k+

BRACKETS SUBMITTED IN 2019

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 which participants could create within the Bracket Challenge platform and into which they could invite 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, it also enabled the NHL to extend the engagement with fans. For the first time, they were 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 post-season 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 any type of 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 hinged 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. We also got to see some really great hockey games.

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 continue to evolve the bracket challenge every year.

NHL Bracket Challenge Product Detail — The design gives space to advertisers while making it easy to track your team’s 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 the massive technical challenge that was the backend. The build for Bracket Challenge had to be optimized to reach scale in a matter of seconds, which allowed ETR to flex our AWS chops in exciting new ways.

One of the principal backend design challenges was to stand up a server configuration that could withstand a massive 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 massive spikes in traffic throughout the year, and the backend needed to reliably perform at these critical moments.

Game Winning Results

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

The Best Is Yet To Come

We’ve been fortunate enough to continue to build on our initial success in the years that have followed the initial launch. We recently 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 continue to collect user feedback and improve the user experience and performance of the Bracket Challenge platform each year. We’re excited to take on the next set of challenges as our creative partnership with the NHL pushes 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