Baseball Scoring App
Swinging for the Fences
​
To design an interface for live game play input, we couldn't just brazenly call our shot. We really had to dig in and keep our eye on the ball before pushing a single pixel. Similar to the Football Scoring App, multiple iterations of flow diagrams and cause-and-effect matrixes needed to be visualized and tested to ensure we, uh...had our bases covered. Once that hard work was done, we were ready to swing away with the design and testing phases.
Research
Flow Diagrams
​
As an observer, there doesn’t seem to be anything particularly complex about the flow of a baseball game—until you need to provide a user interface to input the play-by-play.
In order to present a user with contextually relevant (and comprehensive) options at any point during a play (from wind up to dead ball to next pitch), a flow diagram of cause-and-effect actions, and accompanying meta data points.
In addition a matrix of potential options for baserunners was devised so the app could intuit the most likely outcome for a baserunner on any base depending on the result of a pitch (strike, ball, or in play) and allow a user to confirm or override those outcomes.
​
Play Detail Reference
​
In order to convert play action and data inputs into readable outputs for game logs, a comprehensive list of required and optional variables was created for every possible result of pitch or base running action.
A script was also devised to serve as both a demo of the app and to test and observe users during all stages of development.
Wireframes
Layout Explorations
​​
Using the flow diagrams and detailed lists of variables, user interfaces began to take shape that provided areas for entry of stats and game play as well as live readouts of results as they happen.
Layers of Details
​​
Flows for virtually every type of action needed to be mocked up and accounted for to ensure all possible entry options would be available for users in a live game scenario. Shown below is a flow of one of the simplest possible outcomes: a fly ball out.
Button options prioritized and gave prime real estate to the most common actions.
Interactive drag-and-drop features allow for designating which players recorded a put out (including where on the field), as well as the ability to manually advance base runners.
Final Designs
Play Ball!
​
The final interface added a level of depth, placing the scoreboard and play entry in the foreground, on top of the interactive ball field visual. Bevels and gradients were used for additional dimension. Color usage was purposeful, using the primary color of the team at bat to decorate the play input area and any batters and base runners in the field of play—reinforcing that connection visually.
The end result was a robust interface that was not only fully functional but also aesthetically pleasing.
