My friend Kevin, a talented mobile developer, had been working on a baseball statistics mobile app for a couple years off and on, spending most of that time laying down the foundation and pipes of the data architecture. Being a huge fan of the sport and statistics, he wanted to create the kind of app he would use:

An app that is comprehensive as well as user-friendly
That shows current and historical data
Covers teams, players, leaders, standings, scores
Ability to comb through robust data

In passing, he asked if I’d be interested in helping out with the UX and content strategy. Even though baseball isn’t something I’m all that familiar with, the challenge to create a unique, compelling, and (of course) user-friendly experience with complex data is always a fun challenge for me. And we already know who the user is. So naturally, I jumped at the chance.

First things first

Kevin walked me through the app:

Home
There was a big opportunity being missed with the home screen. It was serving more as a table of contents. But since it’s the first thing users will see, it needed to be more dynamic and useful—invite the user to engage and interact.

We also did not want to get rid of the reference guide type of interaction that existed on the Home screen. If a user needed to browse all the data, we wanted to still give them that option.

Player profiles
We needed to give profiles a structure and better way-finding, to make it easier for the user to digest the player's data, and not overwhelm them by showing everything on a single screen/page. Also, you’ll notice the upgrade CTA. There is a free vs. paid experience a.k.a. minimal information vs. full access. I suggested we drop the free app, and dedicate everything to the paid experience. There wasn’t a lot of incentive for the user to keep the free version.

Search
It was a little wonky. It only supported a player’s last name and first name, and as separate inputs. It shouldn’t force the user to input last name and then first name, or even the other way around.

Few things worth noting:

The data is organized by batters and pitchers. So even if the player is a shortstop, they still have batting statistics. Pitchers do too, but pitchers have their own separate set of data.
We won’t be able to use team logos due to copyright, but can use their colors.
Images and bio information will be pulled from Wikipedia
The app had ~2,000 users. Potential group for future user research and testing.
Competitors: Baseball Reference and potentially MLB’s website
Only supported on iOS

The game plan

After reviewing the app, our next steps were:

Review the data. Streamline for content structure and carve out specific utilities—searching, browsing, data as reference.
Prioritize the main screens and user flows. Figure out what to fix, update, add—developing the product requirements.
Update UI to reflect new direction.

Market data but baseball? Yes.

Pretty early on, I had a hunch taking the app into a more data-driven experience would be really compelling.

We combed through the database schema together. First, it helped me get familiar with specific statistics that make up the players, teams, and the history. Second, it helped us figured what to prioritize, omit, and consolidate. This gave us a clearer picture of essentially our content, and eventually our direction.

I immediately thought of market data, stocks, finance. From my experience working with market data, you always needed to balance the utility, activity, and story on the market, which sounded a lot like what we were trying to do but with baseball data.

Market data apps and Google’s MLB “cards” in Search

Here are the patterns we noted and our takeaways:

Use data widgets
A lot of baseball data can be chunked up into widgets. For instance, yesterday’s games and current standings are consumed similarly by baseball fans.

‘Markets’ screens, home for all market data
For Baseball Numbers, we give the Home screen’s table of contents its own dedicated section—and we call it Numbers.

Sketches for the ideas on how some of the data can be charted

Charts treated as content
Charts are one of the main pieces of content for market data. For Baseball Numbers, we can use the same approach for the player profiles. Instead of another table of numbers, why not create charts so they’re easier to consume, understand the player’s performance over time, and potentially compare the player with other players?

Search is always accessible
Kind of a given as this usability is pretty commonplace on a lot of apps, but the current app did not have this. So this is more a low-hanging fruit but important to note.

Favoriting or adding to a portfolio was commonplace
The current app already has this feature, but pared down compared to the market data apps. Probably will keep that as is and maybe tuck it under Search since favoriting a player is basically saving a search query.

Editorial content
Market data is news, so not a lot to explain there. But we thought maybe could we create historical and current content, and give it a section called Explore.

The product requirements

Home:
1. Previous day’s game scores
2. Today’s game schedule
3. Current standings
4. Stat leaders in batting, pitching, players
Search:
1. Allow for more natural search inputs, including typos
2. For results, display first name and last name
3. Stays at the top right
4. Include recent searches and Favorites
Player Profile:
1. Create a layout that works for all types of player
  - The average player
  - The decorated player
  - The cup of coffee player - played less than 10 games. They make up ~20% of player database.
2. Required statistics for batters:
  - PA - plate appearances (hero stat)
  - OPS - on base plug slugging
  - WAR - wins above replacement
  - WRAA - weighted runs above average
  - SLG - slugging %
  - OBP - on base %
  - BABIP - batting average for balls in play
3. Required statistics for pitchers:
  - Outcome total (hero stat)
  - ERA - earned run avg (hero stat)
  - K - strike outs
  - W - wins
  - S - saves
  - IP - innings pitched
Explore
1. Historical data
  1. Birthdays sharing the same date as present
  2. Highlight historical events sharing the same date as present
2. What’s trending or most popular
  1. Most searched for players or teams
3. Recent debuts
4. News
Numbers
1. Past seasons’ standings
2. Leaders in batting and pitching
3. Players organized by awards, season, origin, position
Add a bottom nav that links to:
1. Home
2. Explore
3. Numbers

Figuring out the new branding

Before we got too far ahead, I wanted to make sure we figured out a direction for the branding. I wireframed some of the main screens, which gave us a nice blueprint to work with. I was roughly following the Style Tile methodology.

Starting from top left: Loading screen, Home, Explore, Numbers, Search, Batter Profile, Pitcher Profile, Cup of Coffee Profile

Then we threw around some words that described how we envisioned the app:

Warm
Retro
Dynamic
Friendly
Informative

When we said “warm” and “retro,” vintage baseball cards popped into my head. I asked Kevin to pull some baseball cards that caught his eye.

These are the cards Kevin chose. All Hank Aaron’s, but from different years.

There was a lot to work with as far as color. What really caught my eye was the use of the blocky typeface. I knew we could use something similar as our decorative or CTA font.

I put together a few fonts that would fit, and created a few color palettes, using Adobe Color CC, to get us going. I chose colors that definitely leaned towards warm and vibrant, while still staying neutral.

We chose Archivo Black to use for bold decorative or CTA type treatments, and Open Sans as the interface typeface for readability and its neutral appearance. I chose fonts from the Google Fonts library since they are open source and optimized for mobile.

The design all comes together

When I was fleshing out the product and the user experience for Baseball Numbers, it was very iterative and fluid. I didn’t wireframe everything and then move onto visual design. I wireframed in chunks—figuring out the interactions and content structure—and played around with the UI to see how things were starting to fit and if the interactions made sense. This helped me follow my own iterative process, and in my opinion, really helped the overall design and UX.

For the app icon, I wanted to try to create a chart graphic blended with easy-to-recognize baseball symbols like the ball and field.

From left to right: Home, Explore, Numbers

I used a universal template for the different player types. This kept it modular, and allowed for easy swap in-and-out of content blocks and charts.

From left to right: Batter Profile, Pitcher Profile, “Cup of Coffee” Player

We identified three basic user flows:

Find a player by searching with player’s name
Searching for a player is the most common user scenario.

Find a player by browsing Numbers
As mentioned earlier, we carried over the reference guide interaction from original app. We think users will want to browse through a rolodex of players. But to keep that interaction from feeling overwhelming, we added categories with multi-levels.

Compare key statistics of a specific player with other players.
For batters, compare OPS statistic with other players. For pitchers, compare ERA statistic with other players

Chart interactions on player profiles

Development

This is still an ongoing project and in the process of starting development. But in the meantime, check out the Invision prototype and see how it all comes together.

Credits:

Software development and architect, overall vision extraordinaire: Kevin Zimmerman
Creative direction, UX architecture, and product management: Jennifer Lee

Mar 12 A mobile app for a baseball statistic enthusiast