World class Football Coaching

Perfect Play is a training app designed for the consumer market made together with some of the main football couches and sport psychologists from Chelsea FC.

The app is in fact a scale down version of the official training method used at the academy, it is tailored to the age and experience of the user in order to bring the right mix of challenge and effort.

How does it work?

The main focus is to create a ‘well rounded’ individual, with skills raging from Technical, Physical, Football Intelligence, Mental Skills to Lifestyle.

In order to achieve this the team prepared 75+ activities each with 3-6 levels and stages, resulting in a fully personal training plan that challenges and improves your football skills.

Team Structure

I’ve worked in the Product Team along:

Our Product Team worked along Chelsea’s maketing team and video production among others.

As a product team we were fortunate to use lots of new cool tools and our mission was also to take time and help others learn the setup.

I’ve helped the team migrate from Sketch to Figma, this move helped us to get closer with our developers and facilitate access to everyone to the designs.

Our management was in Asana, where we made tickets to Figma, Google Docs, Notion or Miro.

For user testing we used Lookback and for internal recording Loom.

We used Slack and Teams to communicate along other tools that we tested on the way.

How to design 100+ Activities?

One big elephant in the room when I’ve started the project where all the different activities developed for the app.

Here is a short oversimplification of how we solved the problem by creating a templating system!

Grouping

The first thing was to group activities and create the main categories based on similarities

Key Activities

In every category we found that 1-2 activities would be more complex and always include all the screens that were in others

User Journeys

We created user journeys and validated them with the tech team to review the number of screens and data entries

Wireframes

For each key screen we created wires

Breaking up into Organisms , Molecules & Atoms

After the low fidelity wires we analised and matched components that can be reused across the app like atoms.

Each atom (component) had slight variations, like different CTA’s of a button.

Coppa Registration

In the US we were require to make a special registration flow for kids under 13 years old, compliant with COPPA. A short abbreviation for Children’s Online Privacy Protection Act, enacted by the the US congress in ‘98.

TLTR: Our task was to create a reg flow where we could not store or save any data, until their parent or guardian would give its permission. Also once granted, options to retrieve, admin or modify permisions were created.

AR Scanning

Here we have two steps to setup the AR with Apple’s ARkit (as in 2019).

When you start the AR setup, it will prompt to scan your environment to the minimum space required to place the objects.

From here there are two routes, either continue scanning to the desired ideal needs, or start placing objects (and potential ask later to move and scan more).

Gate Setup: Left Cone

The first step is to place the first point of the gate between the floor and wall.

As Arkit 2019 did not detect walls yet we needed to rely on users to place the points in the right spot, without any backend validation.

Gate Setup: Right Cone

Once the user placed their first marker, they will move away the device in the right (or left as it will be calculated automatically).

Now the gate has a min, ideal and maximum required space.

If the space is too short to set the gate, the ruler will be red and placement button disabled.

Gate Height

Ok, we have now the two points of the gate, we only need the height to start the play!As the users move their screen up the gate height ruler will show point to adjust height.

Confirm & place Markers

We have the gate setup, now it’s the time to review the position (they can drag and adjust if needed) and set up real life markers like tape, two bottles of water, clothes etc.

Place phone on tripod

In order for the computer vision to work, it needs a good overview of the gate and starting position. The starting position is the yellow rectangle at a specific distance from the gate (this will vary level by level) where players will be ask to start and remain while playing.

Move to the starting point

So now to start the users will need to just move with the ball to the yellow starting point.

By this point they will only *hear* the app giving instructions.

The game will start automatically after a couple of seconds they are in the starting position.

Gameplay

Gameplay begins and the interactions happens only by voice instructions and sound.

Edge Cases

We worked with the

Prototyping

Rapid prototyping for players input screens was issued in order to test our interaction hypotheses

User Testing

We conducted user testing sessions that gave us research and valuable insights.

On each session our design team tasks was to create a prototype(s) of the features or versions we liked to test, question list along the overall facilitation.

Launch

We conducted user testing sessions that gave us research and valuable insights.

On each session our design team tasks was to create a prototype(s) of the features or versions we liked to test, question list along the overall facilitation.