Case study · Citizen

An app for a soccer ball that measures your kick

At Citizen our team designed the miCoach KickApp for Adidas: an iPhone app that talks to a digital soccer ball and shows each kick's speed, distance, bend and flight.

Role: DPM
Organization: Citizen
Platform: iPhone app paired with the Adidas miCoach digital soccer ball

Four iPhone screens of the Open Kick flow on a dark soccer-ball background: a miCoach splash, a large Tap when ready to kick button with left and right foot choices, a talking to ball spinner, and a ready to kick screen with an upward arrow

In short

01Adidas was building a digital soccer ball for miCoach and needed an app for an executive prototype: kick the ball, then see what the kick did.
02Our team at Citizen mapped the kick flow, explored five visual directions, and designed the screens, motion and sound.
03The work produced the Open Kick and Get Better flows, locked for asset slicing and handoff to Adidas's developers, plus motion studies and a sound set.

application flow · OmniGraffle
visual design concepts · Retro Crisp, Font Flick, Precision Strike, GeoSport, Eclipse
background image options
motion studies
sound design · real-life and digital directions
UX concepting · Record Book
asset slicing and handoff

01Opportunity

A ball that records the kick needs an app that explains it

Adidas was developing a digital soccer ball for its miCoach line. The ball senses the kick. The phone has to pair with it, wait for the kick, pull the data down and show what happened.

The first goal was an executive prototype. Our team at Citizen started with the flow: position the ball, ready to kick, kick detected, downloading data, then a 3D view of the kick and its numbers.

Open Kick drops the player straight into kicking. Power, Bend and Lift add coaching: instructional video, tips, and where the foot met the ball. A demo mode in settings could simulate a kick, so the app could be shown without a ball.

Flow diagram: Position the Ball leads to Open Kick or Power, Bend and Lift, then Ready to Kick, Kick Detected and Downloading Data, each with an audio alert, then 3D Visualization and Metrics, Kick History and Coach's Notes, with a kick again loop back — The demo application flow. Every step between the tap and the result has an audio alert, and every result loops back to kick again.

02Hypothesis

The phone is on the grass, so the app has to work at a distance

We drew where the ball, the phone and the player are during a kick. The ball sits still for a second. The player kicks it downfield. The data downloads when the phone comes within 5 feet of the ball.

For most of that time nobody is looking at the screen. So we bet on two things: sound tells the player what's happening, and the screens are readable from a few steps away.

Our concept notes say it plainly: large geometric shapes for easy reading from a distance, bold large type, and a portrait layout for one-handed use.

Diagram in three bands, downfield, player's starting position and device messages, showing the ball and phone side by side, a silhouetted player kicking, the ball downfield, and the phone downloading data within 5 feet of the ball — Where the ball, the phone and the player are during one kick. It showed us the app mostly speaks while the screen is out of reach.

03Experiments

Five looks in a week, then backgrounds, motion and sound

We turned around five visual concepts on a one-week fast track so Adidas could pick a direction for the prototype: Retro Crisp, Font Flick, Precision Strike, GeoSport in dark and light, and Eclipse.

GeoSport Dark went furthest before the reviews settled on Retro Crisp: clean shapes, minimal type and a tactile feel. We then tried six background images behind the same two screens.

Motion studies tested each hand-off: splash to tap, the pulsing kick button, the button collapsing into the talking to ball state, and the result drawing itself.

For sound we wrote cues for three moments: ready to kick, kick detected and data downloaded. One direction used real-life sounds, like a referee's whistle, a crowd and a vuvuzela. Another used digital tones, bells and whistles.

Four GeoSport Dark screens on a grass background: a Kick App splash with the ball, a position ball screen with left and right foot buttons, a bend result of 28.3 rpm in a large ring, and a More Power screen showing the strike zone on a boot — GeoSport Dark, one of the five directions. Big numbers in a single ring, readable from the ground.

Six background options labelled A to F, each shown behind the miCoach splash and the position ball screen, ranging from a lit ball on grass to close crops of ball panels — Six background options for the prototype, each tested behind the splash and the kick screen.

Four frames from a motion study: the Tap when ready to kick button, the button ring expanding on tap, the screen fading, and the talking to ball spinner — Frames from the talking to ball motion study. The tap expands and dissolves into the spinner, so the player sees the phone has started listening to the ball.

04Learning

Show one kick clearly before showing all of them

The result screen leads with five numbers: speed, distance, bend, height and spin. Below them, the flight path draws as an arc, with a side view and a rear view.

In motion, the distance counts up while the arc draws, then speed and spin settle in. The number and the picture arrive together.

History lists every kick in the same columns. For a second phase we concepted a Record Book: all-time bests at the top, then highlights like a streak or a best kick to beat. Highlights are an approachable way to understand kick data without working through a ton of numbers and charts.

Four Retro Crisp screens: kick detected with an upward arrow and a skip kick button, downloading with a spinner, your kick with speed, distance, bend and height above a green trajectory arc and side and rear view toggles, and a kick history table — From kick to result. The trajectory sits on a light panel so the arc reads at a glance, with side and rear views.

Four frames from a motion study of the your kick screen: the distance counts up from 1 to 18 yards while a green arc draws from a silhouetted kicker, and speed and spin appear at the end — Frames from the your kick motion study. The distance counts up as the arc draws, so the number and the flight arrive together.

05Outcome

Screens locked for slicing and handed to Adidas's developers

Get Better completes the loop. Pick more power, loft or bend, then see the strike zone on the ball and on the foot, a short list of tips, and a video.

Over five weeks the work went from kickoff to screen design, sound design, then asset slicing and handoff, with support for Adidas development after. The final review locked the Open Kick and Get Better screens for slicing.

We don't know from the files how much of the prototype reached the finished product.