Designing a tournament bracket with a mobile-first approach

Here in North Carolina, we're known across the country for our deep love of college basketball.

The story is no different for our team at New Media Campaigns, where we're all seriously passionate fans. It's hard not to catch the fever when you're located in Carrboro, just next door to the traditional basketball powerhouse schools of Duke, N.C. State and UNC-Chapel Hill! As a firm that specializes in higher education web design, we've also been extremely fortunate to have the opportunity to frequently partner with each of these outstanding institutions on a myriad of projects.

Therefore, you can imagine our excitement when one of our long-time partners, the Central Intercollegiate Athletic Association (CIAA), approached us about creating a website with an interactive bracket for their conference basketball tournament. 

About The CIAA

The CIAA, headquartered in Charlotte, is one of the oldest athletic conferences in America, and their annual basketball tournament is an absolute juggernaut in terms of attendance and sponsorship dollars. With hundreds of thousands of attendees each year, this tournament is one of the collegiate highlights of the Queen City's already bustling sports calendar each year.

In terms of design, the CIAA trusted us to create an engaging and innovative bracket, based on the visually immersive style we created for the larger website project seen above. We were on a tight schedule for launch, so our project management and design team got to work immediately by brainstorming and scouting out examples of other digital brackets for inspiration. 

Building the Bracket

To start, our team knew that the majority of the traffic to the actual bracket page would be in real time on tournament weekend -- principally from mobile or tablet devices. Therefore, it was crucial that the interface of the bracket be smooth on mobile for visitors. 

The actual bracket build itself had two main goals:

1) The bracket needed to be set up in a way that visitors could easily swipe through rounds of play to stay up to date on teams left in the tournament, see the latest game scores, etc. Therefore, our team began both design and development with a mobile-first approach and worked to ensure that each additional responsive layout meshed well with our original strategy.

2) The content management system needed to be set up in such a way so the staff of the CIAA could easily update the teams left in the tournament during and following each game. NMC developed a content structure so CIAA was able to control all of the vital elements for each tournament team, including:

• University Names
• School Abbreviation
• Hex codes for school colors

The client could also dynamically create each round of play as it happened in both the Men's and Women's tournaments so scores, rankings and winners could be updated in real time. The CIAA could also include additional information like links to live-streams, post-game analysis and player stats. 

With this setup, the CIAA had full control over the bracket at all times and could constantly update it to show the latest scores, winning teams and other details about the games. Our development team worked to ensure that the positioning required to establish the 'descending tree' structure of the bracket occurred automatically to make the content updating process as easy as possible for CIAA. We were thrilled with how it all turned out!

What We Learned

The analytics after tournament weekend told us some exciting stories!

• Our earlier assumption about the heavy traffic from mobile devices was proven right, as 75% of the bracket traffic came from mobile and tablet devices.
• Visitors to the bracket page also spent more than 50% percent more time on the bracket page than on other pages of the site.
• Mobile visitors to the bracket were actually 10% more engaged with the bracket than desktop users, which is atypical for most mobile traffic.  

We were super excited to see our mobile-first approach pay dividends as the visitors to the bracket were so engaged during the tournament!