Brackets App

UX Designer - August 2015 - Present
User Research, Flow Definitions, Low-Fidelity Mockups, High-Fidelity Mockups, Prototype.
The problem

For amateur sport tournaments administrators, there is no easy way to manage and organize sports tournaments providing at any time updated information with the teams and athletes.

Long story short

Brackets App was born from the need to have an easy way to manage and organize sports tournaments (only Basketball in its origins), providing at any time updated information. On its first phase, Brackets was a desktop web application, but then, they needed to deliver statistics and game information directly to the athletes. My role was to design an easy, accessible and intuitive app to provide tournament information to the athletes.

What is Brackets App?

Brackets App is a web tool for sports promoters and a mobile App for amateur athletes. Focused on managing sports tournaments and provide vital information to the amateur athlete. In this project, I work with Humberto Martin del Campo, Founder, and Developer of Brackets App.

The first step, empathize

I joined Brackets App in August 2015, Humberto started working with the project on web platform around 2013; he finished the first phase and then continued developing the iOS App in his free time. After all that, he asked me if I wanted to collaborate with him and we started working together reviewing the App, at that moment the App didn't have any design, it was just functionality App.


Screenshots of the version 0 of BracketsApp

One of my first tasks was to define the style of the application, on those days we didn't have branding or logo. But before all that, before getting into modifying screens, flows and all that stuff we went to a Basketball and Flag Football matches, from two local leagues from Tijuana.

I chatted with a couple of athletes, and we learned that our primary user would be amateur athletes: They play sports for fun spending some time with their friends but also, they take their competition very seriously, and they want to win the tournament.

Our first iteration

By knowing our main user we started to define and redesign the flows and screens, after several mockups and having different versions of each screen, I meet up with Humberto to discuss and decide together the new UI.


I started to work with the first screen: tournament categories, it went easy, no big deal. Then, the second one came: Game list. I thought it was going to be the same but PBOOM!... nope, this became a great challenge. 

"How can we show the user the played games and the upcoming ones?" 

All in just one single screen? After an ideation session and some sketches we chose what we thought it was the best option BUT... not satisfied with the decision I did a quick paper prototype to validate with the users if the screen meets our goal, deliver information that is easy to understand. After the user testing, we discovered that the way we were showing the game list was confusing, there wasn't anything making a difference between previous and upcoming matches.


Screenshots of the version Beta of BracketsApp

 The work continued with more screens such as Game Details, Team Profile, Standings, etc. On December that year, the project was paused because of work and holidays.

Second iteration, the good one

On March 2016 Brackets came back to life, Humberto had the opportunity to test the web platform in a Flag Football tournament. After having this test phase with real users, the application needed a redesign to be able to support multiple sports.

I had a meeting with Humberto and Daniel Alcantara (Android developer for the beta android app), we defined the new application flow with different sports. After a few wireframes and sketches, that screen was ready to be developed.

At the end of July, Humberto worked with Viridiana López, a graphic designer that helped to define the branding for Brackets. Having these guidelines for the product, I started to work on the new version of Brackets, finally the v1 with the final UI Design. In the meantime, I started to check and design the different swipe gestures for the app, animations for some screens and loadings animations. I started using Pixate (RIP) to be able to prototype and explain myself with Humberto about what I’m trying to propose. 


Humberto's hand, the official hand model of Brackets App

On August 2016 we launch the first official version of Brackets App to the Play Store and App Store, the Flag Football league (Tijuana, Ensenada, and Mexicali) was our first and regular client, we had some small clients (small tournaments) to gain feedback and improve technical things about the platform.

That is so 2016, what about now?

One year later, in July 2017, we got our second big client, but we needed to do some changes to the platform before the tournament started, we started to giving support to manage multiple sports on the platform, we added Softball, Volleyball, and Soccer.

These are the numbers of our second client:

  • 61 Teams registered
    • 15 Basketball
    • 9 Volleyball
    • 22 Soccer
    • 15 Softball
  • 851 Players registered
  • 155 Played matches

On September 2017 the Brackets team grew, now we are three! Diego Medrano is developing the Android App. It's November 2017, and we are planning to start the design of BracketsApp V2 for the first quarter of 2018, because, for BracketsApp, this is just the beginning.

More screens of Brackets App