The Best March Madness Bracket, According To A UX Designer

I’m going to preface this by saying I don’t know much about college basketball. Yes, I’ve filled out a bracket for the past several years, but that’s just a byproduct of going to college in Kentucky. You’re actually an outcast there if you don’t.

What I do know is an intuitive digital experience from a complicated one. In making these brackets, I realized none of the bracket-creating tools I’ve used made my experience any easier or standout from the rest. So, I started thinking: Is bracket design stagnant for a reason? Are there other options out there that have some insane new tool that will change the game completely? Or maybe bracket design is so understood that there isn’t any room for improvement? No, certainly that couldn’t be the case.

The only way I could find out was by trying out four of the leading March Madness bracket sites to find the answers. What I discovered was quite illuminating about the still-evolving state of bracket design.

Yahoo Fantasy Sports

Yahoo Fantasy Sports was the first bracket I explored. Immediately, I was turned off by how difficult its bracket was to understand. Their dark basketball-court background with colored copy on top immediately makes understanding your bracket more complex. With five different text colors (one color uses both regular and strikethrough text), users have to study their bracket to fully understand it. There is a bracket key/legend, but it’s at the bottom of the map. Since the full bracket doesn’t fit on the screen, the key is lost, which makes identifying each team’s status difficult. Additionally, only two font colors and the one strikethrough style are listed in the legend.

When a team loses, it gets crossed out with the winning team in red above it. A better approach would be to only put the winning team in red, since the user can clearly see who the losing team was in the previous bracket. I don’t mind seeing the user’s choice as well as the actual winner, but their current way of displaying both is messy.

A redeeming part of Yahoo’s bracket is the ability to click on a game that has happened to get its full game stats on a new page. This information is pretty detailed, listing game leaders/MVPs, lists of point scorers, and even the total number of fans in attendance (which may or may not be superfluous). Below this information, users have the ability to join the conversation and comment on their happiness or lament.

ESPN

The next exploration was ESPN’s Tournament Challenge bracket. At the top of the bracket screen, the user’s stats are completely broken down, showing your national rank, point total, points per round, and a percentage that’s basically a grade in comparison to the rest of the entrants in the game. I actually looked at President Obama’s bracket, and although ESPN’s point system is different than CBS Sports’ (where my real bracket lives), I can definitely tell he’s kicking my butt.

ESPN does a great job of visually listing out competing teams, either before or after the game has happened that day. Including the logo for each team gives the user quick recognition of what they’re viewing, assuming they’re an actual college basketball fan and didn’t just join into an office pool like I did. However, for games that haven’t yet happened, the bracket looks quite boring. Besides featuring a large logo of your selected national champion in the center, upcoming games are simply indicated by a plain gray box with the names of the two teams you selected. Just above your bracket is a large call-to-action to play fantasy baseball. This didn’t really do anything for me, but that might be my own aversion to baseball. What did attract my attention was a small link hidden inside of the fantasy baseball module that offers users a second chance at their NCAA bracket (YES). This allows users to reselect who they think the Sweet 16 will be. It’s separate from your initial bracket challenge, but I think it’s an incredible way to keep pouty low-rankers like myself engaged.

At the very bottom of the screen is a full-page bar that expands into your Bracketcast. This is a list of all games, which includes visual indicators to show whether your prediction was correct or incorrect. The coolest part about the Bracketcast is the ability to click on a game and see the game’s details, or a complete side-by-side prediction for games that haven’t happened.

Fox Sports

Fox’s bracket is very similar to ESPN’s. The way each game is listed is visually almost identical, except that the whole experience in Fox’s bracket is lacking any sort of hierarchy. “National Champion” may be written in all caps, but it’s the same font size as the rest of the page in an even thinner weight. At the top of the page, the different point totals look exactly the same—again, with no visual hierarchy.

There’s no quick way to find your point total; so, quickly looking at your overall score takes more studying than it should. BracketTrax, which is similar to ESPN’s Bracketcast, isolates today’s games and their stats for easy consumption. There isn’t much else you can do with it, but it’s an easy portal to stay up-to-date with your upcoming games.

CBS Sports

Out of all the brackets, I think CBS makes it easiest for the user to understand their choices vs. the actual game outcome. Every selection the user made has a puzzle-like box around it that is exclusive to their choices. This eliminates any confusion between who actually won and what their selection was. Each game also has its own information button, giving users a pop-up modal with an aggregate of all users’ outcome predictions to compare against your choices. CBS keeps your scores pretty simple, only showing Rank, Score and Best Possible. These aren’t listed on the bracket page, which could be frustrating, but viewable on your group’s leaderboard page.

Conclusion

My March Madness bracket comparison left me feeling that from a UX perspective, there is still work to be done when it comes to perfecting the experience for the fan. Most of the brackets I tried did not feel intuitive. Spacing, font size, and color choice felt like afterthoughts in their designs, which with a little thoughtfulness, could have made their bracket the standout choice to use.

If I had to choose who had the best overall experience, I would have to say ESPN. Between their Bracketcast and CTAs for additional gameplay externally from your bracket, their experience keeps the user engaged and coming back to interact.

However, my favorite March Madness experience isn’t a fillable bracket. It’s actually an interactive ticket-buying bracket created by SeatGeek. Users can hover over any team name and see all of their tournament games highlighted in the bracket, making it very easy to see how far your favorite team has come.

This type of service engages fans throughout the entire tournament, instead of just during the selection process—something from which many of these brackets could benefit. After all, when we’re talking about sports, engagement wins.

Cover Photo: Streeter Lecka/Getty Images


 

 



<p/>CBS 1</p>
<p>” src=”http://a.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-cbs-1.png”></p>
<p> </p>
<p><img alt=CBS 2

” src=”http://d.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-cbs-2.png”>

 



<p/>CBS 3</p>
<p>” src=”http://c.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-cbs-3.png”></p>
<p> </p>
<p><img alt=ESPN 1

” src=”http://c.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-espn-1.png”>

 



<p/>ESPN 2</p>
<p>” src=”http://d.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-espn-2.png”></p>
<p> </p>
<p><img alt=ESPN 3

” src=”http://a.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-espn-3.png”>

 



<p/>Fox 1</p>
<p>” src=”http://b.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-fox-1.png”></p>
<p> </p>
<p><img alt=Fox 2

” src=”http://a.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-fox-2.png”>

 



<p/>Fox 3</p>
<p>” src=”http://d.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-fox-3.png”></p>
<p> </p>
<p><img alt=SeatGeek

” src=”http://d.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-seatgeek.png”>

 



<p/>Yahoo</p>
<p>” src=”http://a.fastcompany.net/multisite_files/fastcompany/imagecache/slideshow_large/slideshow/2016/03/3058375-slide-s-yahoo.png”></p>
<p> </p>
<p><a href=Fast Company , Read Full Story

(31)