March Madness is one of the biggest ticketing events of the year, but with 68 teams competing across 14 cities over a period of nearly three weeks, wading through dozens of games and ticket packages to find the right seats is an exercise in tedium. Just about every site you could buy an NCAA Tournament ticket from displays these various packages as one big, ugly list, but we decided there had to be a better way.
Designing a new experience
The objective of this project was to reduce the friction of purchasing tournament tickets, and to do this, we needed to make the experience as streamlined and simple as possible. For March Madness, it seemed obvious that a bracket would offer the most intuitive experience.
But there was plenty of nuance to consider in the design of the bracket. Every decision about spacing, colors, size, information density, and interactivity affects its usability, and with so many events on the page at once, making the wrong design choice could throw off the balance and make it difficult to follow.
To keep this balance, only the absolute minimum amount of information is shown at any given time. Dates and locations are only shown for upcoming games, losing teams are grayed out to make it easier to scan through, and the “Tickets” calls to action are subtle yet clear.
Prototyping
From the very beginning, I knew that I wanted this bracket to be interactive in some way. I built a simple proof of concept to test out designs and interactions, as well as the underlying technology.
The games are set in place using CSS3’s new flexbox model. This makes the code much simpler, since it can automatically handle vertical centering and evenly distributed spacing of elements. But more importantly, it also allows the bracket to be responsive right out of the box, so it can work well on a variety of screen sizes without additional code or markup.
The connecting lines are drawn using Canvas, which offers a simple and high-performance way of rendering lines and polygons. This posed an interesting challenge and was the most difficult part to get right. Drawing lines and bezier curves is easy, but combining them in a way that is responsive is harder.
The S-curves between the round of 64 and the round of 32, for example, require four lines and two bezier curves. The points for each line segment and curve are calculated based on the position of each team. This example demonstrates how the connectors are drawn.
Iterating
Even though it worked well in that demo, the prototype still had several issues. Aside from messy code that’s difficult to maintain, the interactions (based entirely on jQuery) are bad for performance when scaling up to 63 games for a total of 126 teams rendered. Every time an element on a page is updated to, say, add a hover effect, it requires an expensive DOM update that slows down the page. This is difficult to optimize using just jQuery selectors and events.
Resolving this issue was easy thanks to React, Facebook’s reactive UI framework. React’s virtual document object model means that we can limit the number of times that a DOM update has to happen. That can even allow us to build complex interactive elements like this graphic in a relatively high-performance way without sacrificing usability.