Digital Fan Engagement As Exciting As A Hockey Fight

Like all major professional sports leagues, the National Hockey League is always looking for new and exciting ways to engage their loyal fans and create new ones. Few events in the course of an NHL season afford more opportunity for this than the Stanley Cup Playoffs. The culmination of an 82-game regular season, this post-season tournament reliably provides fans with a thrilling and grueling spectacle as the league’s top 16 teams battle it out for the claim to the Stanley Cup.

In 2017, the NHL, Disney Digital and ETR began a multi-year partnership to reimagine the Stanley Cup Bracket Challenge. Similar in nature to the NCAA’s March Madness bracket format, the Stanley Cup Bracket Challenge allows fans to predict the round-by-round outcome of the NHL playoffs and test their hockey punditry against millions of fellow NHL fans.

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.

Branding Elements from NHL for The 2019 Bracket Challenge

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.

Early wireframe mobile screens and a list of programming tools we used

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 2019 Challenge mobile screens example NHL Bracket Challenge mobile screens from 2017, 2018, 2019 NHL Bracket Challenge 2017 desktop screen

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.

A graph depicting request count on the NHL server during the NHL Bracket Challenge 2019

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 promoting NHL Bracket Challenge 2019 on TV

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.

How can we solve your problem?