Skip to content

NHL Bracket Challenge

The NHL needed their Bracket Challenge experience to be as fast, exciting, and engaging as the playoff games themselves, and ETR was happy to help.

At a Glance
926k+
BRACKETS SUBMITTED IN 2019

A New Game Within The Game

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

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 which 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.

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
Timeline of NHL Bracket Challenge
NHL Bracket Challenge Product Detail

An Easy User Experience Masked A Very Complicated Backend

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

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

The Best Is Yet To Come

We’ve been fortunate enough to be able to build on our initial success for the last three years. This year, 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 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 new project?

Does your organization have a rebranding initiative in the pipeline or already in progress? Have you considered working with a digital agency partner to ensure your website(s) UX and content evolves to accurately reflect and reinforce the new branding while effectively meeting your users needs? We’d love to hear more about your needs and we’d be happy to share more about our process of how we help organizations successfully navigate digital initiatives just like this.


Adam
Adam Kurzawa
Director, Business Development
Joe Rosenthal
Business Development, Midwest