california app design company

Baseball Rules in Black and White

The Official Rules of Baseball At Your Fingertips

  • product development
  • mobile apps
  • React Native

Download the app

"Baseball Rules in Black and White" is a series of three books that distill the somewhat byzantine official rules of baseball umpiring into simple and understandable content.

To continue the mission of “Baseball Rules in Black and White” it’s author hoped to create a mobile app that would provide umpires, coaches, players, and fans with the ability to easily navigate the rules of baseball at all levels of play.

The often difficult to understand official rules would be re-summarized in simple, easy to grasp language and include real game scenarios and embedded videos explaining and demonstrating each rule.

Challenge

Turn the content of the “Baseball Rules in Black and White” books into an easily navigable mobile app, putting simplified versions of the official rules of baseball at the fingertips of coaches, players and fans.

Solution

An easy to use, streamlined app built in React Native, providing users with the simplified rules of baseball, including embedded video demonstrations

Outcome

The Baseball Rules in Black and White App has successfully launched on iOS and Android and is currently available in the Apple App Store and Google Play Store, and already has thousands of downloads

What a great app. I love it. An excellent resource when you are sitting at home or in the stands talking about the rule of baseball... Kudos to the dev team for designing/building an easy reading app. Looking forward to version 2.0.

-Robert Keane

The Challenge

Our goal was to create an easily navigable mobile app that would allow users to easily access  and understand the sometimes intricate and confusing nuances of the rules of baseball while also providing them with the ability to watch embedded videos demonstrating examples each of these rules.

The mobile app would provide users with the ability to switch and navigate between three different rule sets: The Official Baseball Rules in Black and White, the High School Baseball Rules in Black and White and the College Baseball Rules in Black and White, while additionally providing users with the ability to choose between viewing the rules in 4 languages: English, Japanese, Spanish and Chinese.

Because the client would be entering and updating the rules displayed in the app, it was important for us to choose an admin portal that would provide them with a streamlined and easy to follow solution that had well defined fields and data types for ease of use.

Our biggest challenge in creating this app would be working through the Information Architecture of the application. In order to create an effective app, it would be necessary for us to determine how to effectively place an entire book's worth of content into a reference application that is quickly and easily navigable by the user.

The Solution

In order for the user to easily navigate the app, it was necessary for us to first understand specific use cases and how specific users reference the manual.

In order to do this we worked with the author to break down his books into logic chunks/sections based on how his data was organized. Based on this work we broke down the information into the following categories:

  • Rule Topic
  • Categories
  • Featured Rulings
  • Related Rulings


When using the app for the first time, users are first presented with screens allowing them to choose their league and language. Then, and on subsequent visits, the user is presented with the “Rule Topic Screen”.  A Rule Topic is the top most category of data and is defined generally as a large area of related baseball rules. “Appeals” is an example of a Rule Topic.

Once a rule topic is chosen, the user is then presented with a definition of the topic, and more  defined categories within that topic - for example, within the “Appeals” topic you will find “A Runner is Out Out on Appeal When:” and “Batting Out of Turn”

After the user has chosen a category they will be presented with a list of rules. “Featured Rulings” are at the top, and have videos tied to them. At the bottom we have "Related Rulings" which are similar to Featured Rulings but just do not have any videos.

Because there can be many Related Rulings, we used an accordion style layout, allowing users to quickly scan the list and open up the ruling they want more detail about.

The mobile app was built using React Native. As a studio we are very comfortable with this framework and, given the lack of native elements needed to finish this project, and React Native’s ability to build simultaneously to iOS and Android platforms, it seemed a natural choice for us.

In order to allow our client to enter and change the content of the app at will, it was necessary for us to use a CMS system. Rather than building a CMS system from scratch, we chose to use an off the shelf content management system, reducing time, effort and cost.

We chose Graph CMS as our content management system because it uses GraphQL, our preferred API technology, and because it also supported localization - necessary because our app is provided in multiple languages.;

GraphCMS stores our content and allows our developers decide how they would like to present it. In practical terms, it allowed us to create a streamlined and easy to follow template for our client, presenting them with well defined fields that they could fill out in simple language, which they would then see reflected in the app itself in real time.

One of the challenges we faced during the course of this project was that of embedding the rule demonstration videos and providing our client with a way to add them to the correct sections of the app.

The client wanted to keep his videos private on youtube, but still accessible through GraphCMS. Our solution was to set the youtube videos as private while saving the url of the video and using third party libraries to build the video player on the front end with the video url. Configuring user interaction with the video was challenging, due to the default settings in the video player, though through some work we were able to create settings of our own.

Outcome

The Baseball Rules in Black and White App has successfully launched on iOS and Android and is currently available in the Apple App Store and Google Play Store, and already has thousands of downloads. Our client is currently in the midst of multiple investment and sponsorship conversations.

This is an awesome app for so many reasons! It’s user friendly and written in common language that’s easy to follow for players, coaches, and athletes of all levels! The best part is the videos that are available for clarity! 

-Lauren McDonald
  USA Bobsled and Skeleton