Engaging NHL fans with an interactive playoffs prediction platform
NHL
Working with the NHL, we made the Bracket Challenge as fast, exciting, and engaging as the playoff games themselves.
SERVICES
UX DESIGN
UI DESIGN
FRONTEND DEVELOPMENT
BACKEND DEVELOPMENT
PROTOTYPING
USER TESTING
PROJECT INFO
Gamifying the fan experience
The National Hockey League (NHL) is the world’s biggest professional ice hockey league. Their Bracket Challenge platform, available online or via the mobile app, is the loyal fans’ companion app for predicting the outcomes of the Stanley Cup playoffs, competing with fellow hockey fans, and winning valuable prizes.
The Bracket Challenge reimagined
The NHL wanted to redesign the platform and extend the Bracket Challenge experience with fans. But before we designed any buttons, sliders, or dropdown menus, we restructured the entire concept of the Bracket Challenge experience by introducing the idea of Bracket Leagues.
With Bracket Leagues, fans can register, set up their profile, and create groups to compete with friends and rivals for bragging rights, all before the postseason matchups are determined. This feature enabled the NHL to engage fans on the platform earlier, well before the end of the regular season when the playoff predictions take place.
THE SOLUTION
Body checking the mobile problem
The typical design of tournament brackets, intended for predicting playoff outcomes, isn’t suited for the mobile screen. It’s too wide to fit in the portrait view and too small to see in the landscape view, causing as many users to abandon their brackets as those who complete them.
We optimized the mobile experience using a dynamically animated bracket. This compact design allows users to zoom in on specific bracket sections or see the whole thing at once by expanding and collapsing.
Tested and approved by real fans
We brought prototypes of the design to NHL games around New York City and live-tested our ideas with real fans.
Advertiser-friendly, user-centered design
The design incorporates NHL sponsors’ branding without overwhelming users, ensuring an enjoyable experience focused on what matters most to them —tracking their team’s progress.
Optimizing the backend for a power play
A key challenge on the backend was configuring servers to handle massive spikes in traffic within a limited timeframe.
This is crucial as millions of fans submit their brackets in the few days between playoff pairings announcements and the start of games, after which they can no longer make submissions or changes.
After fans submit their brackets, a real-time scoring engine updates a live leaderboard for each submitted bracket. Our goal was to maintain a familiar, fun, and consistent user experience from pre-playoff bracket completion to real-time scoring during the playoffs.
Behind a simple interface lies a complex backend reliant on multiple different technologies. The system is built to dynamically respond to different phases of the Bracket Challenge.
THE PROCESS
The four phases of purpose-driven design
Equal parts proven process and design philosophy, purpose-driven design is our unique framework for solving design challenges.
We look for purpose in every decision, making sure it’s rooted in improving the user’s experience. The ultimate goal is to give people their time back by reducing friction.
GAME-WINNING RESULTS
Increasing engagement with fans
We continued building on the initial success by collecting user feedback, introducing new features, and improving the user experience of the Bracket Challenge platform across multiple seasons.
We were excited to take on each new set of challenges as our creative partnership enabled the NHL to build an even deeper and more meaningful engagement with fans.
This project was executed by our US team, formally known as ETR. The company was acquired by Infinum in 2023.