T O C A F o o t b a l l
UI / UX DESIGNER
Aug 2017 - Oct 2017
INTRODUCTION
TOCA Football makes machines that shoot out soccer balls consistently, in order to improve a player's touch (ball control) during training. They have a mobile app called TOCA Training, which controls the machine's delivery's trajectory, speed, and timing.
I was contracted to redesign the app's user experience and user interface in preparation for a new product launch of another soccer training equipment.
OBJECTIVES
The main objective was to find a way to use the app to control both the ball-delivery machine and the new equipment. The secondary objectives were cutting down on several points of friction such as signing in and using the training screen itself.
ACCOUNTS
Originally, trainers would log in using their “operator” account and players would have a separate player account. Trainers would have to enter PIN numbers to access training sessions since players are not allowed to connect to the ball machines. Overall, it’s confusing.
With the new app, I decided to go with one account per user (just like any regular app account). Anyone can access the ball launching machine.
GROUPS
In order to be trained by a trainer, players must search for and join the group the trainer had set up. This adds an extra step for both trainers and players. We decided to remove the concept of groups altogether since it wasn’t adding any value.
TRAINING (with Touch Trainer)
From the point of opening the app to getting the machine to shoot out balls with the desired delivery code, it takes on average 10 steps. The new design takes only 5. This was done by allowing the trainer to use a custom delivery code for their training exercise, which is faster and more intuitive. After interviewing several trainers (main app users) at the facility, we learned that they had to spend a lot of time going through a long list of exercises in order to pick one delivery code. They had to do the same after every exercise. With the ability to customize the delivery code right on the training screen, this cuts down on so many steps.
TRAINING (with New Equipment)
When connecting to the devices, I decided to visualize the configuration of the devices so it’s easier for users to see which one needs to go where in relation to the Touch Trainer.
On the training screen, I moved the play button to the bottom to make more room for important information such as the players and their stats in a training exercise.
OUTCOMES
From a UI perspective, we went for a cleaner but bolder look through the use of colors and typography. In the old app, when you look at the gray buttons, you’re not sure that you’re supposed to tap on it. The typography also looks outdated.
Overall, I think we did a good job redesigning TOCA’s mobile app given the constraints on the technical side. After talking to several coaches and iterating on various concepts, we achieved all our goals of making the user experience more simple and efficient.
Design Process
Conducted research and customer interviews to discover problems and potential solutions
Developed user flows and storyboards, and produced low-fi sketches of various concepts
Refined and created more detailed wireframes through an iterative design process
Tested and validated wireframes with multiple users and use the feedback to come to the best solutions
Created detailed high-fidelity designs and interactive prototypes of all the screens of the new app
Sketches of the profile screens and explorations for the app navigation and architecture.
Mid-fidelity wireframes for the end training flow.
Various screens within the redesigned app.
Training-related screens within the redesigned app.
Screenshots of the current app