Flox is a player development tool that allows soccer players and coaches to improve performance by incorporating augmented reality (AR) technology into practice sessions.
Note: This was a personal project.
Planning & Discovery
How can design solve the problem?
This was a side-project I envisioned after the U.S. failed to qualify for the 2018 World Cup. I was inspired to design a solution that would completely revolutionize the sports industry as a whole. The goal is to be a pioneer in utilizing augmented reality (AR) experiences to educate, train and develop youth players to give them the same opportunities given to those from the world’s best countries. In theory, the AR elements would be implemented via light-weight smartglasses.
UX Project Plan
I started by conducting a UX Questionnaire to elaborate the product concept and the user experience that I'm trying to design. I aimed to answer the question: "What do you plan to improve through user experience design?" To effectively answer this, I focused on brainstorming potential strategies and making assumptions about users.
All assumptions I made were tested during future user-interviews. Overall, performing this UX questionnaire forced me to focus in on how I could convert my idea into a reality. My biggest takeaway was the need for a supplementary SaaS application that could be used by coaches for performance analysis.
Where is the opportunity?
Augmented reality apps have the potential to be as ubiquitous as smartphone apps in the near future. The sports industry has already invested in various technology solutions for performance analysis, so AR could be a natural progression for teams that embrace technology.
Increase in Americans who engage in AR experiences monthly
Americans believe that AR could help them learn new skills
Increase in cost of soccer equipment (balls, training gear, protection).
Empathizing with users
User Interview Questions
Based off my UX questionnaire, I began brainstorming questions to ask users. I finalized a set of questions for both soccer players and coaches, and set out to conduct user interviews. I talked with both youth teams and rec-league teams to understand what types of problems they face while training. This enabled me to design a product that could help them improve performance and win games.
Not all teams have access to the same resources (expensive training equipment, facilities, etc).
Ensuring that teams have access to the same resources by taking advantage of virtual elements.
Setting-up training equipment for practice is time-consuming and lacks customization.
Allowing coaches to quickly setup and customize training and optimize specific drills (shooting, passing, defending, goalkeeping, etc).
Teams are limited by their own ability when training. For example, if a team has a bad goalkeeper, their attacking players don’t improve their shooting abilitiy because they are not being sufficiently challenged at practice.
Enabling coaches to experiment with new game-plans against virtual players (holograms). Coaches can specify the holograms’ attributes (acceleration, defending, dribbling, shooting) and have their team train against life-like AI.
Modeling user needs
What are the accepted market standards?
The next step was to experience other augmented reality apps and understand best practices that users are likely to expect. Unfortunately, I couldn't find any apps that specifically dealt with sports, but there were plenty of other AR apps on the market.
Prioritizing Design Features
My design goal was to have an AR interface that could be quickly used before training sessions, similar to what is shown in the promo video. To ensure my design was user-centered, the comparative assessment and user-interviews guided my decision making when prioritizing Flox's features.
Overlay AR elements such as bullseye targets, cones, and mannequins.
Ability to configure how difficult training challenges are.
Different variety of training options.
Supplementary SaaS application for advanced performance analytics.
Ability to record training footage for further analysis.
Results page to display basic insights.
Wireframes & User Testing
Evolution of design solutions
Transitioning into the design phase, I began conceptualizing ideas for solutions to the problems discovered throughout my research. I used Balsamiq to create wireframes and dived right into early-stage testing to identify improvements to the design. I walk through a few examples here:
For the “Choose Training Type” UI, the third and final iteration was most favored because it limited the number of clicks (3) and did not waste any space. Iteration #1 was least liked because of the "empty" space in the top right corner. For the final UI, I chose to use familiar icons to represent the training options. I learned that it’s best to minimize text and simplify the UI.
For the "Results" UI, I decided to display statistics graphically. This was received quite well based on user tests. Some pointed out that the UI resembled the "Wii Sports" results page, which is what I was going for. Most users thought that incorporating a “skill level” was a good idea for added incentive during training.
"Results" Page Wireframe
"Results" Page Mockup
The future of the product
I'm still currently working on Flox's design. User feedback from paper prototypes was extremely helpful in ensuring that I was on the right path to user delight. I compiled all the information I received and made a promo video using Adobe After Effects. I am now learning Unity to design an interactive prototype with Microsoft Hololens, though I'm also exploring other AR headset options!