Product design — a case for baseball event data entry app.

Jaroslaw Kitkowski
5 min readAug 3, 2021

The brief:

The user adds game actions through the main interface. And each added action appears on the Action Log component on the right side of the screen.

Business wants to collect information and each action should contain this information: Period, Current game score, Team, Action name, Action output, Action status (completed or not completed).

Users want to:
- be able to easily see all actions that happened during the latest half-inning (20–30 actions)
- some actions are more important than others as they change the game result.
- the user also needs to identify incomplete actions and quickly edit them.
- app will be used in direct sunlight, so increased contrast is the play.

So I need to prepare a solution that meets business and user goals, present my thought process, steps I’d take to address it, and at least one concept wireframe.

Desktop app, and action log at the right side where all the actions should appear.

The process:

First thing is, what are the rules of baseball? So I watched a short video that explained the rules of baseball. And got a little familiar.

Then I created a version that fits all business needs but is totally terrible from a UX standpoint. Here how it looks:

A version that fits business needs, expect the need to display 20–30 actions. But has terrible UX.

Then I wanted to research how sports data is presented in baseball and other sports, so I can spot some common rules, and maybe figure out the general direction of this. So I did some research and found a general direction.

Also, I watched how baseball scorekeeping was done in the past, on the paper sheets, the thing looked i little complicated for me, but it could be a good thing to understand it, to see whats the foundation of modern solutions.

Also, I see a need to know the game really well. So If I work on this full-time, my plan would be just to download some baseball games and only play the game for a few days. Playing games is one of the fastest ways to learn something.

Action log on Gamechanger scorekeeping app
Action log on Iscore baseball app

Some observations:

  1. In order to display all 20–30 actions information has to be presented in columns and rows, that way it’ll all fit.
  2. Regarding fitting 20–30 items, there is not enough space to fit information in 210px space the way it is presented. Only by trying to make this a table, it’s possible. Or by making a scrollbar.
  3. If scoring plays are highlighted and if the score is shown only when the score changes it would be a good consistent way to showcase important events.
  4. I noticed that there is a filter to filter out more important events when plays are scored and all plays, which is good for the user who wants to see the scoring plays first.
  5. Each event has a dropdown with information on how exactly the play went, but it’s only displayed when the user wants to open it as see. That way it saves some space.
  6. By extending the interface I noticed that there is around 210 px for the action log space, which is a little low, but it forces to minimize the data to fit it in.
  7. Either is action finished or unfinished can also be displayed like a dropdown.
  8. Innings are showed either on each action, or there is one master action that has smaller actions under it.

So here is the top concept wireframe I came up with:

I think by adding something like this, actions can be grouped better, but it challenges the newest actions concept of the log. So it might not be a good idea to mix things up.

Navigation to filter actions in the innings.

Summary

It was hard to think of a process and steps to take on this task since it was something new and I had very little understanding about the game. So my approach was to learn about the game, learn about the current and vintage and tools of scorekeeping. Observe, observe, observe.

I did not address the direct sunlight factor, well I’d like to use the tool and see myself what issues arise in that environment. At this moment best practice is to have big contrast and if possible increase the size of elements.

In my concept, only about 13.5 actions fit into the action log element. If the dropdowns would be extended the number would increase, but I do not know if that counts. Making a scrolling option is a viable solution. Unless the users already abandoned that option, but in user need, I did not see that type of information.

The finished/unfinished action button could be of great help for scorekeepers, to quickly notice what needs to be edited and edit that.

The score could be shown only when it changes, and the whole row could be highlighted, that way scorekeepers can see the most important action. Of course, maybe there are types of important actions, which are somewhere in between irrelevant action and scoring.

--

--

Jaroslaw Kitkowski

I am a former international business manager turned software developer and UX designer. Passionate about great UX. Co-founder of Esquia, Plandok.