The 2019 CrossFit Open saw the return of of Custom Leaderboards, which allowed athletes to create and customize their own leaderboards with their interests rather than the traditional overall, country and age leaders. It also made available a brand new feature, Hashtag integration which allowed for further customization for athletes. To help with this new feature, the Hashtag Wizard was created to help athletes learn how it worked and how they could use this important feature for further customization.
As the lead designer, my role was to identify ways for our athletes to easily understand the goal of the new feature while navigating through the wizard. I was also tasked with creating the layout of the page for all viewports, badge icons, testing with PMs, stakeholders and selected athletes. Once approved, I helped assure it looked and behaved as designed with developers and our QA team.
With this being a new feature, there wasn't much in place. The first key was identifying exactly what our stakeholders wanted the feature to do and what value it was adding to the CrossFit Open leaderboard experience. Once that was understood, the next step was identifying potential flow solutions and if the feature needed in-depth explanation or if it was easily understood from the start.
Every project began with the idea that the stakeholders have for a feature, enhancement or new product.In this case, the Games team and IT at CrossFit HQ were eager to create a more personal experience within the 2019 CrossFit Open. Working in parallel with the brand new Custom Leaderboard, our team wanted to add an additional layer to provide more value to the overall social experience. The idea was to give athletes the ability to tag themselves based on their interests. These could be anything ranging from words that describe themselves, what they do or characteristics they would like to compare against others. Hashtags were the solution from the beginning, and were continuously emphasized throughout the research portion.
Once the project ask was defined, we had to figure out a series of potential flows the athlete would follow in order to create their hashtags. It was determined that each athlete would have the feature available to them within their athlete profile. They could type whatever they wanted to be identified as, with the upcoming Custom Leaderboard able to take that data and create a leaderboard for that input. However, we wanted to provide a bit more explanation of how it could work. We explored a page that would explain exactly how the hashtag identifier could work. Our lead project manager, working closely with the Games team, identified a list of example identifiers that they wanted displayed. The initial listing included hundreds of potential identifiers, which created a bit of a challenge for displaying in the Wizard. Too many names in one spot could overwhelm the user, which we wanted to avoid. We divided the identifiers into common categories and I began a few different layout options based on how the site would work based on user-flows. The UI would maintain the look and feel of the CrossFit Games design system.
Initial list of hashtag suggestions categorized
There were a few different approaches I took for the layout, ranging from the most simplistic to most advanced. These flows would be designed in Sketch and then tested in InVision which provided stakeholders the opportunity to interact with the potential layout and flow and the ability to instantly comment. I had also created badges for the categories. Since the marketing art for the open was going to take more of a material approach, the badges mirrored this with their look and feel.
Hashtag Category Badges
As the simplistic design was reviewed, there was a concern that the athlete would not know to click on the suggested hashtags. The next goal was to make them look more "clickable". The next layout incorporated an enclosed button look, however it need to be distinguishable from the normal action buttons that would take the athlete through each step. These "chips" also needed to be removable, so an action was added to the left of each button label. The athlete could click and add each identifier, as well as easily remove them if they felt it did not fit.
At this point, there was still a bit of a push from stakeholders to include as many identifiers as possible. As stated earlier, this was a bit of a design problem as we did not want to overwhelm the athlete. I created an example flow utilizing a tab-based layout, as well as an option to "load more" within each tab.
Tabbed layout prototype with reveal
The next ask was to show all the categories on one page. The athlete would first be presented a hashtag suggestions (categories), with the next step being custom fields for creating their own, then the final step being incorporating them into their own leaderboard. This was more of an exploration, and our team decided to move forward with simplified approach where there was less suggestions within the categories. This was validated when through the flows being A/B tested within HQ, as well as a select group of CrossFit athletes.
Layout exploration with flow
The final layout was integrated with the approved flow for the brand new Custom Leaderboard, which was also in production as both features would be released together in time for the 2019 CrossFit Open.
Desktop layout exploration and iterations
Shipped with the Custom Leaderboard in January 2019, the hashtag wizard has been a key feature for users to be able to personalize their CrossFit Open experience. It was launched with video marketing, as well as quick how-to's.
You can view the Hashtag Wizard at games.crossfit.com
Back to top