UX Case Study | Online CrossFit Competition Platform
Client: Team Aretas | 2-Week Sprint | Team Project
Background
CrossFit is a competitive fitness sport incorporating elements of high-intensity interval training, weightlifting, gymnastics, strongman and other exercises. It is a global phenomenon with millions of participants.
Team Aretas has developed a web-based platform that enables CrossFit competition organisers to set-up events and for competitors to register, pay and compete. A link to the Team Aretas website can be found here.
A competition is held in a CrossFit box and the Team Aretas platform is used to track the scores and creates an electronic leaderboard which athletes use to track and compare scores.
Challenge
Team Aretas wants to increase market share by enabling geographically separated CrossFit athletes to compete against one another. Event organisers would be able to set-up ‘virtual’ competitions where athletes could upload their score & video for review by an online judge before being posted onto an online leaderboard.
Client Kick-Off Meeting
A client kick-off meeting was held in a CrossFit box with Team Aretas to define the scope and identify constraints.
It was recognised that it would not be possible to provide a complete end-to-end solution and the following scope constraints were agreed:
- The solution will build on the current website including branding.
- UX issues associated with the current website will not be addressed.
- The solution will be a responsive website in a mobile configuration.
- The solution will only focus on the athlete user flow.
- Direct video capture into the platform is out of scope — users will capture video using the phones integral camera or a rival CrossFit app.
- The solution should be structured to enable a transition to a planned native app (due in 2020).
Brief
The following brief was agreed with Team Aretas:
Planning & Process
Team Organisation & Process
Our team consisted of Charlie Adsett, Marc Lee, Harry Parkin and myself (Neil Winchester). We utilised a flat structure where team members contributed to all activities and issues were resolved through open discussion. The process below summarises our approach.
Part 1 | Research
Competitor Analysis
This was performed across a range of existing Crossfit websites and applications as well as a series of equivalent tools for other sports.
The CrossFit websites (CrossFit Games & Competition Corner) are similar to the existing Team Aretas except that they consolidate competitions and provides links to websites rather than a platform that can host and manage a full competition.
WodProof is an app that enables individuals to record their training and share within a community. It has integrated video recording that overlays a timer onto the video and should be used as a benchmark for the Team Aretas app.
User Research
A screening survey was distributed via the client's social media base and a total of 87 participants responded. A breakdown of the key stats is shown below.
The team visited a number of CrossFit boxes (six) and performed contextual enquiry in order to familiarise themselves with CrossFit.
Fifteen telephone & face to face interviews were conducted with athletes who had competed in CrossFit competitions, had used a CrossFit app or online service.
Typically these were ‘hardcore’ CrossFit athletes who had previously uploaded a score & video on to a web platform to pre-qualify for an event.
Part 2 | User Research Synthesis
The team took the output from the user research and generated an Affinity Map and a series of experience maps enabling the synthesis of insights & opportunities.
Four key insights/themes were identified.
Notification: Users stated that competitions were typically discovered by word of mouth however it would be useful if they were made aware of new competitions via electronic notification — especially if competitions are online-only events.
For clarity online event would require:
- A description of the exercises & movements to be performed
- The criteria for video submission.
Capture: Mobile phones were used to capture footage, however, users often spent time setting up their exercise station so that a clock was contained within the video (key criteria for many exercises). Users want a seamless solution with integrated video recording, timer and countdown start & stop alerts.
Upload: Uploading video in CrossFit Gyms has been an issue and users often returned home to perform this task. Users stated that often it was not clear if the upload had been successful.
Submission Feedback: Users stated they often received no feedback on the progress of their application for online events. The following parameters were identified as required by users:
- Status of submission — In progress / Accepted / Rejected / Amended.
- Why the submission has been Amended / Rejected.
Proposed Use Cases: Two types of use case were identified:
- Prequalifying Open Events: Used as a method by competition organisers to select the top athletes for an open event.
- Online Competition: An online-only competition with geographically separated Crossfit athletes competing against one another.
These are represented below and it can be seen that there is a common core sequence.
It was agreed with the client to take forward the ‘Pre-qualifying event’ use case.
Scenario Development
The output from the synthesis led to the generation of 4 main scenarios.
Whilst Scenario 2 is a key element, it is outside the scope.
Jobs to Be Done
For each scenario, a ‘Job to Be Done’ (JTBD) was defined together with ‘How might we’ (HMW) questions. These were reviewed and the team selected the HMW question that would best serve the Design Studio.
The JTBD framework was selected as CrossFit athletes have a varied demographic and the team considered it important to understand the jobs of the user rather than who they are (persona).
Part 3 | Ideation
Design Studio
A design studio was held with the client covering 2 of the scenarios:
- Scenario 3: Submit score and video
- Scenario 4: Track progress of submission
This led to the development of a series of sketch concepts to be taken forward during prototyping:
- A high-level sequence for the user flow and sketches of associated pages.
- Use of a graphical representation of an athlete performing a CrossFit exercise to provide feedback on the status of a submission.
- Provision of a hardcopy ticket sent in the post for athletes that qualify for an open event using the platform.
User Flows
‘Happy path’ user flows were developed based on the output from the Design Studio — an example is shown below.
Site Map & Navigation
The team reviewed the existing site map of the current Team Aretas platform and determined where the new user flows with intersecting with the existing site.
Part 4 | Prototyping & Testing
A three-stage prototype & testing process was applied running from a paper prototype, through to mid-fidelity wireframes and onto a high-fidelity interactive prototype (developed using Sketch & InVision).
User testing was performed with 4–6 users for each iteration that was underpinned by a test plan & script to ensure consistency.
The following sub-sections provide an overview of several of the issues resolved as part of this process.
Scenario 1 | Notifying athlete of a new competition
As the solution was based on a responsive website the notification was determined to be an email generated by the competition organiser directing the athlete to the Team Aretas platform.
The paper prototype tested well, however, users struggled to find the email link (Image A).
This was resolved on the mid-fidelity concept through the use of a standard hyperlink design pattern (Image B), however, there was negative feedback with regards to the email copy.
The email was restructured using the Team Aretas branding / CTA as shown on the high-fidelity concept(Image C).
Another area of change was a reduction in the number of steps required to access the competition information. Initially, as shown below, this required 5 steps.
Users found this frustrating and as it was reduced to 2 steps on the final solution—enhancing the user experience and aligning with expectations.
Video 1 demonstrates the full process from email notification through to the user reviewing the competition information including competition standards.
Scenario 3 | Submit score and video
Through user testing, an interactive high-fidelity prototype was developed providing the following functionality:
- Enabled users to log-in to access the video/score upload capability (minimising the need for users to input their personal details when applying for a competition).
- Enabling users to upload a video directly from the phone or by providing a link to a video sharing site.
- Enabling users to input score associated with the video.
- Enabling users to submit information when they have a clear data connection.
A key area developed through testing was to ensure that the user could only submit information once both a video & score had been selected. This removed the opportunity for the user to submit an incomplete application that would create frustration for athlete and organiser alike.
Video 2 below provides a demonstration of the video/score submission sequence and the capabilities listed above.
Scenario 4: Track Progress of Submission
Through testing & iteration the concept for scenario 4 was developed to provide the following functionality:
- Provide email notification to the user when they qualify for an event.
- Enable the user to check the progress of their application.
- Provide the user with the status of the submission via text & images.
- Inform the user whether their score is rejected/amended and provide explanation/method of improvement.
- Provide access to the event entry ticket (if they qualify).
Testing highlighted a series of issues relating to the copy used. In the example below the term, ‘Golden Entry Ticket’ (defined in the Design Studio), led users to believe that they have qualified with a ‘special’ ticket with bonuses (i.e. free equipment)— it wasn’t!
This was rectified to simply read ‘Entry Ticket in subsequent iterations.
Video 3 demonstrates the user checking the status of their submission including (in this example) being told amendments have been made to their solution and receiving access to the entry ticket.
Accessibility
A number of the components from the existing site were required for the new site to maintain consistency. Unfortunately, some of these did not comply with the Web Content Accessibility Guidelines (WCAG).
Where this was the case they were modified appropriately to achieve compliance.
As can be seen from Image A below, colourblind simulation tests were performed and the solution passed.
However, elements such as the ‘Sign-on’ page shown in Image B have residual accessibility issues. These were amended to achieve WCAG compliance as shown in Image C where the following was implemented:
- The background of the ‘email’ and ‘password’ fields was changed from light green to white and the entry text was changed from white to black to satisfy contrast requirements.
- The text entry boxes have been increased to enable the full email & password length to be displayed and the sequence of data entry follow a top to bottom flow.
Transition to an App Solution
A requirement of the brief was that the solution should take into account the need to transition to a native App. The diagram below provides a comparison of the user flow for the current web variant and the future app variant.
Excluding the development of the native app, the transition requires:
- Push notifications are used instead (or in parallel) of email.
- Video capture is integrated into the app — thereby removing both the need to use a third-party app creating a seamless user experience.
Part 5 | Achievements & Next Step
As has been shown in the previous discussion, an interactive prototype has been developed that notifies an athlete of an online competition and enables them to compete by uploading their workout scores & videos to the Team Aretas platform.
The solution provides the following functionality:
- Notify athlete of new competition/workout.
- Enable athlete to enter score & upload a video.
- Enable competition organiser approve / amend / reject athletes submission.
- Notify athlete of approval / amendment / rejection of submission.
- Provide functionality that can be reused in the future App.
The solution was developed through in alignment with the user research thereby addressing the identified insights and themes and through a robust testing & prototyping approach.
Client Feedback
The concept was presented to Team Aretas Managing Director Steve Batchelor through a 20 min presentation. The following quotes summarise the positive feedback received:
“You have nailed the brief and developed far more than I expected.”
“I am glad that you have validated our belief that there is a need for a CrossFit platform that can be used for online competitions.”
“Can you send through the presentation so the developers can start work as soon as possible?”
“I wasn’t aware of the accessibility issues on the current site — we will address these moving forward as the product is developed.”
Lessons Learnt
The most significant issue within the timeframe of the project was gaining access to the required user base.
CrossFit is a specialised activity and unfortunately, it is not just a case of being able to turn up to a normal gym and find suitable users.
This, in part, is due to the project being part of the GA UXDI programme, however, it does highlight the need to be able to robustly source and plan access to end-users.
Next Steps
It is proposed that the following activities are performed by Team Aretas to continue to develop the concept:
- Develop ‘judge’ and the ‘competition organiser’ workflows need to be to create a complete solution
- Perform additional testing with a captive CrossFit athlete audience — the team suggest that occurs in the field when the Team Aretas supporting the administration of a CrossFit event.
- Perform a full accessibility review of the existing site to address all accessibilities
- Develop a roadmap indicating the path to move from the current position to a viable MVP native app.
Contact
If you enjoyed this read, like to learn more about this project or have any questions, email me or contact me on LinkedIn.
