top of page

AAF Play Caller Console

Play_Caller_Console_–__First_Play_–_Snap

A brief history

The very first play caller console was developed in one night to provide the football field operators a way to drive the prediction game found in the mobile app. As one can imagine, the play caller console has a lot of room for improvement.

old workflow 1 and 2.png
old workflow 3 and 4.png
old workflow 5 and 6.png

Match selection page

The original match selection page displayed a dizzying array of every team combination for the field operator to choose from.

old workflow 1 and 2.png

Match selection redesigned

The new design takes into consideration that games are scheduled each week. Therefore, showing only the games relevant for any given weekend is sufficient for the field operators.

Play Caller - Match Selection.png

Play caller home page

The original play caller home page empty state only has one button and nothing else.

old workflow 1 and 2.png

Home empty state redesigned

The new design shows the game date information on top, and future app state on the right, so the field operators have a better understanding of the context.

Play_Caller_Console_–__Empty_State.png

Play situation settings

The original play situation settings used drop-down menus and form inputs to set up play situations.

old workflow 3 and 4.png

Situation settings redesigned

The new design has a separate column for play history and each play has play number, game time, date time, and status included. It also has two distinct and separate sections for play situation and play outcome for better context.

Play_Caller_Console_–__Play_Situation.pn

Better indication with toggles

The new play situation settings use toggles instead of drop-down menu to show more clearly which team has the possession, the toggle background color also reflects the team color. Similarly, the toggle is also used to indicate which side the ball is located.

Play_Caller_Console_–__Play_Situation.pn

Toggle enables one tap/click operation to select the state of down and formation. Toggle also gives an immediate understanding of all possible choices to pick from and an obvious display of current state.

 

In our case, the possible choices are limited, so toggle is the most clear and simple UI

element to use.

Play outcome settings

The original play outcome settings panel is a grid of choices to pick from by the field operator. Once the outcome is confirmed, the result of the outcome will be sent to the mobile app the fans are using to validate the fans' predictions.

old workflow 3 and 4.png
1.x preCast - Next Play.png

Outcome settings redesigned

The new design follows a similar pattern as the mobile UI layout. It is designed to be top-down, so the field operators can have a natural left to right, top to bottom workflow from setting up the play situation to confirming the play outcome.

 

Bigger buttons to help the field operators to more easily select the option and clearly identify

what they have selected.

Play_Caller_Console_–__Play_Outcome.png

Optimized for touch

Every user interface element was re-imagined, larger, and more touch-friendly.

play caller console mockup.png

Video Demo

This is only an UX prototype to demonstrate the general flow and interaction of the tool.

bottom of page