Challenge
We decided to build an all-new GameStream for three main reasons:
It was our number one feature, but it was difficult to update and add new UX and performance improvements because it was a few years old at this point.
The GameStream had certain features available only to subscribers, but we felt we could increase conversion by optimizing the free GameStream experience.
We were creating an engine for stat calculations that would have required a significant amount of refactoring of the GameStream anyway.
Research
At the outset of the project we interviewed department heads and the founders to learn more about the decisions they made in creating the GameStream. We also analyzed several customer support cases regarding the feature. Next, I conducted user interviews to understand how people were currently watching games and what frustrations they had with the current experience.
From the research we found that:
People enjoyed the current experience for the most part. We provided an avenue for parents and grandparents to know in real time what is happening in the life of their kids and grandkids.
Some of the content was hard to understand for people with little baseball/softball experience. They did not know which team was up to bat or what certain abbreviations meant.
They felt like the GameStream froze a lot, which sometimes was the fact that the scorekeeper stopped scoring temporarily or they had lost internet connection.
The free experience felt like a “bait and switch” since we would let people watch for a limited time and then we would show a paywall in order to continue watching.
Finally, I performed an external audit of other apps that had similar experiences to see what we could learn from them. Here are a couple of our findings:
Wireframes & early concepts
As we were doing our research we started identifying the different types of content we wanted to support. The main behaviors we observed were:
I want to see what’s happening now.
I missed what happened so I want to catch up on what I missed.
How is everyone performing overall and how is my kid doing?
I therefore explored different ways to group this content and how to present it.
Final Designs
After many iterations and with the baseball/softball season starting in just a few months, we decided to build the following:
The Scoreboard
I wanted the current status of the game to be clear, so I focused on making the scoreboard easy to consume. I added the on-base indicator for when you were not on the Live tab. I also added a dot to indicate which team was batting. In order to address some confusion around whether the game was truly live, I added an indicator that would change from “Live” to “Delayed” when there was a long pause in scorekeeping updates. It also needed to be able to adapt to pre and post game states of a game.
Live Tab
Most of the work in this tab involved animating the plays. I took a lot of inspiration from old baseball video games and explored different animation techniques.
However, the engineering effort required to build some of these animations was too extensive, so I tried to find a simpler but still informative animation. Since the scorekeeper recorded the location of where the ball was hit, I created a set of hit paths for different types of hits that would animate to the approximate area that was indicated. I then created storyboards like this one, to communicate how we should animate different plays.
On this tab I also added batter and pitcher boxes which showed more detailed information about those players.
Plays Tab
The main objectives I had for this tab were to make it both easier to scan overall and easier to understand for someone who is not familiar with baseball. With the help of our baseball experts, I rewrote our play-by-play wording to produce over 160 variations of play outcomes. I also added headings to indicate the main play, if there was an out on the play, and whether a team scored.
Box Score
Although we captured over 150+ stats we had to decide which ones to present in this tab. We wanted to mirror the traditional newspaper box-scores.
The other use case for this tab was to show the correct lineup order which displays the order in which players are batting.
iPad UI
Since we had more space to work with on the iPad, we decided to keep the field view visible at all times during the game.
Android Designs
Due to the strong positive feedback we received, we then decided to implement the same experience in our new Android app shortly thereafter.
Reception
After implementing the new GameStream, we received a lot of positive feedback. We expected some pushback given that we completely redesigned the feature, but we were pleasantly surprised to only get a handful of complaints.
We also had a corresponding increase in revenue on our native platforms in the coming months after we released the feature.
Furthermore, the new and improved GameStream allowed us to release new features such as GameStream Radio on top of it.
