Perfect Play. Chelsea FC’s academy training method, redesigned as a consumer app.

World-class football coaching

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

The app is in fact a scaled-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 ranging from Technical, Physical, Football Intelligence and 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:

• 2 Product Owners
• Project manager
• Juniors academy coach (part time, 2 days per week)
• Sport Psychologist (part time)
• Game designer
• Data Analyst
• Creative Director / Artworker
• Myself, Product Designer ×2

Our Product Team worked along Chelsea’s marketing 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 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 started the project were 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 analysed and matched components that can be reused across the app, like atoms.

Each atom (component) had slight variations, like different CTAs of a button.

COPPA registration

In the US we were required 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 US Congress in ’98.

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

AR scanning

Here we have two steps to set up 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 potentially 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 the device away to 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 the 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 a 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 asked 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 a couple of seconds after they are in the starting position.

Gameplay

Gameplay begins, and the interactions happen only by voice instructions and sound.

Edge cases

We worked with the development team to map and document the edge cases.

Prototyping

Rapid prototyping for players’ input screens was used 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’s tasks were to create prototype(s) of the features or versions we liked to test, and a 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’s tasks were to create prototype(s) of the features or versions we liked to test, and a question list, along the overall facilitation.