Fixing the Bracket Picking Process
The NCAA March Madness Bracket Challenge Game is the official NCAA bracket picking game that opens on Selection Sunday and closes with the tip off of the first game. There’s a super short window of opportunity (4 days) to onboard players and get them to complete their brackets, so the user experience and marketing campaign are critical to the success of the game. I worked with a UX designer and a web designer, providing both the UX direction and design direction for the project. I also did the actual ideation, wireframes, user testing, and design for refactoring the picks process.
The Problem
After getting analytics back in 2015, we realized that about 20% of NCAA Bracket Challenge Game users had incomplete brackets. We’d received a number of heated emails from customers who thought they’d completed their brackets and were mistaken. Since the tournament had started, these customers couldn’t fix their brackets and were effectively shut out from participation. Looking at the data we had we saw that the majority of those who had incomplete brackets had missed completion by one pick. Our data wasn’t specific enough to tell us which pick they’d missed, but it had to be either...
a random pick that they couldn’t find in the lists of match-ups, or...
they’d missed picking a champion for the final game.
We decided to hedge our bets and design for both cases.
Examining the Dashboard
There were two main locations that users could get tripped up: the dashboard or the actual picks screen. Starting with the dashboard, we took a hard look at what elements on the screens might be confusing users.
The first thing we noticed was that the original dashboard design had an irrational use of color. Red was a brand color and green was used as the indicator color of both complete and incomplete brackets. This was confusing.
Secondly, the navigation between regions and the indicators showing complete and incomplete regions seemed like overkill at this point. We’d seen user tests where users couldn’t explain the navigation blocks and didn’t understand the “E 2/15” or “W 7/15” indicators. They were originally included to help users quickly get to the region of the bracket where they needed to complete their picks. But especially at this stage, it was overkill. Users just needed to know that a bracket was incomplete. We could guide them to the precise picks on a later screen.
Also, the user’s winning team pick would fill in the color and logo for each bracket. This seemed like a perfect place to alert users if there was no winning team picked.
The New Dashboard
The first task was to make better use of typical colors: red for incomplete, green for complete. This was would be a change that we’d make throughout the picking experience.
Secondly, we also removed the region navigation on each bracket. Initially, our team was very reluctant to remove it because it provided a shortcut to reaching a missed pick. But since we wanted to narrow the focus of what users needed to think about, I persuaded the team to remove it to simplify the experience. We also added distinct text callouts to help users know what still needed to be done on a bracket to complete it (“Enter Champ,” “Finish Picking,” etc.).
Thirdly, we reworked the design of the champ logo and color so that it looked more like a champion flag. The subtle connection to championship flags hanging in college gymnasiums across the country served several purposes:
it gave a more collegiate feel to the app
it helped contextualize the use of the team logo and color—users knew that was their champion for that bracket
it gave a clearer and more pronounced shape for us to show a missing champ pick
Overall, the design was far more usable in testing. Users understood clearly when a bracket was finished and when it wasn’t.
Examining the Picking Experience
The original picking experience had several problems with it.
Because a bracket is a large data visualization, it doesn’t fit onto a phone very easily. So having region navigation was supposed to help users navigate the complexity of 4 different bracket regions converging on the Final Four. It was also trying to pull double duty by showing how many picks had been selected in each region.
But in testing, users didn’t notice the top tabbed navigation. They didn’t notice it as navigation and they didn’t notice it as an indicator of what they still needed to do to complete their bracket. The navigation suffered from the same red/green color confusion as the Dashboard, and the Round and Date title bar further disconnected the nav from the user’s focus.
We needed to bridge the nav to the content, fix the colors, and fix the confusing “MW 12/15” region and numbers in the navigation. There needed to be more immediate, intuitive focus on picks being incomplete instead of just keeping a subtle tally of how many picks had been selected.
The New Picking Experience
I pitched a new design that dialed back the visual noise from the round headers and brought the grey background color of the page into the selected tab. That made the tabbed nature of the navigation far more evident and visually connected the navigation to the picking experience.
I also created a clearer system for indicating which sections had missing picks and which were finished. The circle indicators on the different region tabs were colored red with a number (indicating the number of missing picks in that region) and then turned to a green circle with a check mark when completed. This removed the need for the “MW 12/15”-type labels and gave us the space to spell out the region names.
I also added a champion banner with the user’s selected champion’s school logo on the banner. This made it more evident to the user that they’d picked a champion.
In user tests, every single participant saw the navigation, understood it, and used it to navigate the picks process. This was a huge increase over the previous design where, in user tests, fewer than 20% used the navigation and about half could explain what the region navigation was once it was pointed out to them.
The Results
2015
2016
The bracket completion results from the 2016 NCA Bracket Challenge Game were much better. Incomplete brackets dropped to only 8% of users—a 60% decrease in incomplete brackets. And the number of users who only missed one pick was practically zero. We received no complaints from users who thought they had completed brackets but hadn’t.