The CrossFit Games online leaderboard is the go-to source during the "Open" in which the entire global community registers and competes for their chance to qualify for the CrossFit Games. This process consists of performing a weekly workout and submitting your score online. The online leaderboard serves as the source of truth throughout the Open, and shows athletes scores updated each week. The leaderboard is displayed on desktop and mobile browsers, as well as through the official CrossFit Games App.
The CrossFit online leaderboard has evolved each season since it's initial release in 2011. For the 2019 Open, we were asked to add new features while maintaining the look and feel that athletes were accustomed to. There were three main asks;
CrossFit Open Leaderboard - 2017
I was tasked with interpreting the new features that stakeholders envisioned and provide layout options for desktop, mobile and mobile app.
Adding a flag view to the leaderboard had been in discussion for a few earlier iterations, most recently in the 2018 games leaderboard. I had put together a few options during the previous open season for how to display this request, however it was a feature that at the time was not implemented. For 2019, it was requested again as it was decided that the leaderboard would be adding the ability to show overall leaders and national champions. The addition of the country flag made sense to add into the design.
The leaderboard is a table-based layout. Each row shows the current standing, athlete name and their scores for each workout. In 2018, several of the design solutions incorporated the flag to be displayed next to the athletes picture.
Athlete Photo with flag
Since a collapsed row only shows the athletes name, they would need to expand the row in order to view their picture and country flag While this was an ideal solution then, it added an extra click for users to view. With the goal for 2019 to add the ability for users to click on the flag and view that countries leaders, this made that click more valuable than in previous years. We wanted to eliminate this extra step and display the flag in collapsed view.
While at first glance this is an easy ask, there were spacing issues to consider. The most important was one for games athletes with longer last names. The solution was to expand the row's height in these cases, at some points making the last name roll over to a third line.
I had put together several mock layouts of what the leaderboard could look like with different flag sizing presented. These included slimmer vertical flags to the left of the name, which would occupy a smaller space than a typical rectangle flag. While this was a decent solution for the cell spacing issue, it would create an additional concern for showing each flag and being easily identifiable.
Vertical Alignment Flag
It was ultimately decided to move forward with the rectangle athlete flag to the right of the name. Previously, this space was occupied for invite status, a new feature we had rolled out in 2018. With the removal of regionals, this space was now open and available for flags. There were a few visual explorations with how to show the flags in this space, namely rectangle and oval layouts. While the oval options took up less room, we moved forward with the rectangle based on the fact that your standard flag display is that.
Rectangle Display Flag
At this point, the design was taking shape. Old filters had been removed from the design, since they were no longer relevant. On the overall leaderboard, the flags would show only for those who were currently leaders in those countries. If an athlete was not a leader but was still top 20, their name would not display a flag. The flags were used to act as an indicator for those leading their country. The user could then click on that flag and the leaderboard would repopulate with that specific countries leaders. We also added a button toggle to the leaderboard to allow users to instantly view the overall leaderboard and switch to the national champion version, which would showcase the top athlete from each country. There were two icons added in support for the button toggle, which both would help when it was being developed for our mobile applications.
Open and National button states for desktop and mobile
At this point, production began with our team of developers to build based on the approved designs. As testing began, we received a new ask; every athlete will have flags. Rather than use the flag as an indicator for that specific countries champion, they would be shown for all and on-click would be filtered for that country.
Flag Indicators for all athletes
Shipped in January 2019, just in time for the new CrossFit Open, the leaderboard has been used by close to 500 thousand participants on Desktop, mobile browser and in the CrossFit Games iOS and Android applications. You can view the leaderboard at games.crossfit.com, as well as on the official CrossFit Games app.
2019 CrossFit Open Leaderboard for Desktop, Mobile and App
Back to top