The CrossFit Games are a global fitness phenomenon. Beginning with the CrossFit Open, athletes from across the world compete in weekly workouts and are judged and scored at their affiliate or via video entry, with the top competitors receiving invites to the CrossFit Games. The Open Leaderboard is an online tool comparing nearly half a million athletes progress throughout the five-week competition. In 2019, the goal was to bring back the Custom Leaderboard, which allowed athletes to create their own personal leaderboard to track friends, fan-favorites, and self-identifying hashtags, with the ability to share and encourage social interaction
As the lead UX/UI Designer on the project, my role was to gather as much information from Stakeholders and Project Managers, as well as research the past iterations and how they succeeded and could grow. It was my responsibility to work within the CrossFit branding guidelines, in this case the CrossFit Games, and maintain the look and feel and how the Open Leaderboard currently behaved.
2016 CrossFit Open Custom Leaderboard
Identifying the best way to navigate through the actual user process for creating a custom leaderboard was the primary focus. Should it be a step by step? Does the process need to have suggestions and more of a "hand-holding" approach, or will our users understand from the start? How would the Custom Leaderboard behave on other viewports like mobile and within our mobile app?
As our project team met and began to sketch out potential flows, the first step was to take a look at potential solutions for displaying the Custom Leaderboard creator. There were a few concepts that were mapped out to start. We discussed and walked through a step by step approach, exploring if it would work all-in-one or if it would need to go page by page as steps. It was determined that all-in-one would be the ideal flow, as having to go to a different page on each click could produce issues for our user. All in one place was the plan of attack for now.
Another problem to solve was exactly how the leaderboard would be built on the backend, and the prototypes needed to show this process accurately for stakeholders and QA testing. The leaderboard would need to be built around inputs that acting as a filtering system for all of our competitors. We explored the option of when the athlete inputs what they want, step-by-step, the leaderboard would begin to build. However, our developers pointed out that this would cause a huge burden on our system, which would have to send a request for every user-input. A few requests at a time are one thing, but we had anticipated, based on traffic from previous years that during the Open there would be hundreds-of-thousands of users utilizing this re-released feature. It was decided that the athlete would go through all the filters first, ie "Build, Preview, Save". This reduced the load on our system.
The first step was to create wireframes and begin to add potential flows based on the previous sketches. Luckily, I was able to pull in our previously-created assets from our design system, which sped up some of the design process. Prior projects did not have this in place, so the system greatly helped speed up the design and producing options for our team.
There were a few sample layouts that we explored to identify the best way to present the step by step process for creating a leaderboard. It would be important to explain to the athlete what each filter did. We explored adding them as guides on the creator screen for each step, showing them on the main splash page, as well as a small blurb underneath each filter as a sub descriptor. We tested the options with a small group of selected athletes, and found that a hybrid of the splash page and sub descriptor being the best option.
Early layout exploration featuring step-by-step input descriptors.
Since it was decided early on that we would take the approach of "Build, Preview and Save", we needed to find a way to show the athlete what they inputted had been collected. In the initial builds, the athlete would go through without this, which created confusion. There were a few different approaches to solve this issue, including a success message for each input, a tracker of all inputs to the right of the inputs or some form of an indicator at the bottom. We explored all these options, ultimately deciding on creating "chips" containing what was inputted, with the option to remove them if the athlete made a mistake. They would be loaded as the athlete inputted at the bottom of the screen before either clearing the filters or saving and viewing. This would also play well with mobile, which was a large concern with layout considerations.
User "chips" displaying what they had inputted on mobile.
The final ask was having a central spot to view all of the custom leaderboards that an athlete creates. We created a screen that showcased the most important information; The Leaderboard Name, the Competition, the ability to Edit and Delete, as well as social sharing. Desktop was straight-forward, leveraging a simple table approach. Mobile display created the biggest issue, since there would be 7 columns, and there was always a possibility that an athlete may create a long leaderboard name. We simplified the design on mobile to include a simplified button indicating a slide-out reveal that would overlap the leaderboard name.
Solution for limited space on mobile. "Click to reveal" action option.
One important aspect of all prototypes is the scenario builds. These ranged from creating hundreds of leaderboards to edge-cases where the leaderboard filters returned more than our system could support. It was important to build out these cases and what the flow would be, as well as what it would return on Desktop, Mobile, Tablet and our CrossFit Games App (iOS and Android). These were utilized by our project team, developers and our QA team to test the build vs the design.
The CrossFit Open Custom Leaderboard launched January 2019, a month before the Open began. This was a feature that had a great deal of excitement and was one of the most-requested features for CrossFit HQ. It was launched with video marketing, as well as quick how-to's.
You can view and create your own Custom Leaderboard at games.crossfit.com
Back to top