Draft by Batting Order

FanDuel | iOS, Android, Web

The Context

Anecdotally most dedicated daily fantasy sports players of fantasy baseball will tell you that they like to stack, or roster, players from the same team and in particular players who hit close to each other in the batter order. In baseball, a hitter’s ability to drive in runs, score runs, and even, to some degree, to get hits is a direct reflection of the talent and performance of the players before and after him in the batting order. When we analyzed FanDuel’s baseball entries we found that this is largely true. On average the highest scoring lineups stack four players from the same team.

However, the default drafting UI for FanDuel was not designed to make it easy to quickly draft multiple players from the same team. Instead, the experience was designed to have users fill a roster by selecting players one by one according to position, without an easy way for them to view all the starting players on a given team. This construct made sense for sports like basketball and football where a player’s position is directly related to his role on offense but was less useful in baseball where position is related only to defensive alignment. In fact, users could not even filter by team. All they could do was filter a position by the players for both teams in a game.

Furthermore, because hitters hit in the order they are listed in the batting order, those players at the top of the order will get more chances to hit (and hence to score fantasy points). This means that players with higher batting orders are generally more valuable from a fantasy standpoint. As such, viewing a team’s batting order and selecting players from that view is the most natural way to draft for fantasy baseball. To solve this workflow problem for users we decided to create a drafting experience based around viewing a team’s batting order. 

Traditional Position-based Drafting on FanDuel


Initial Ideation

As we explored how to implement this feature, my product manager and I agreed that this feature needed to supplement, rather than replace, the traditional method of drafting on FanDuel. We decided to implement it as a CTA off of the main lineup drafting screen a user reaches when creating a new fantasy entry. This was a method we’d used for other features like Guru (which suggests players to a user based on their budget and roster holes).

After clicking the CTA, a user gets a list view of games for the fantasy slate they’re entering. Clicking a game brings the user to the batting orders for each team. For batting order itself I explored two versions. The first was a simple list of player names. Implementing the feature this way would have brought us to parity with our main competitor DraftKings and would be simple to build. However, it would also provide less of the context of our traditional player cells which feature things like fantasy points per game, recent news indicators, and injury indicators. So I also created a second concept that offered an enhanced version of our traditional player cells.

Sketching Explorations


Designing the Games List

After some internal user testing of both versions in higher fidelity, we settled on the complete player cell version. As we moved into higher fidelity, it became apparent that we needed to provide users with more information than just batting order to help them make good stacking decisions. We realized that the games list needed to not only show the two teams playing but also the location, weather, and starting pitcher matchups as these can have a huge impact on the number of runs scored.

iOS Designs


Designing the Batting Order

On the batting order view itself we realized we needed to enhance the traditional player cell with a bit more data. The first challenge was to solve for lineups in both a confirmed and projected state. Baseball managers don’t confirm their lineup until about three hours prior to game time, but many fantasy players build their lineups well before then. So we partnered with a service that offered both projected and confirmed batting orders and created a player cell indicator for both states.

Additionally we wanted to add in a handedness indicator for hitters (denoted in parentheses after the player's last name), to help users better understand which players had the most advantageous matchups. Generally, hitters hit better against opposite handed pitchers because they're able to better see the pitcher's delivery and pick up on what pitch has been thrown. This means that it's advantageous to stack righty hitters against a lefty pitcher and vice versa. 

The other enhancement that we made was navigational. In the traditional FanDuel drafting experience, once you draft one player, for example a shortstop, you are taken back to the view of your team and prompted to select another position to fill in order to draft your next player even if you can draft multiple players for position as is the case for outfielders. Obviously forcing a user to go through the steps of selecting draft by batting order and then the game he or she is stacking from every time he or she drafts a player, would be a bad userflow. So our approach keeps the user on a team view as he or she drafts players. When a player is selected, the salary remaining and positions open bar updates and the player cell add icon (indicated by a plus icon) transitions to a remove icon (denoted by a minus sign). This flow lets users quickly stack and also see what players they've already stacked from that team which is important due to the inherent advantage in stacking consecutive hitters.

Android Designs


The Initial Web Approach

Our initial approach to draft by batting order on desktop web was to add a new tab that would contain that drafting experience because that mirrored other new drafting experiences we’d added to web. Within this tab we replicated the mobile paradigm with a list of games the user then drills into to see team batting orders with a toggle to go between the two teams in the game.

Initial Web Designs


The Revised Web Approach

After not seeing the adoption we hoped to see on web and doing some user testing, we decided that hiding the new feature behind a tab and replicating the mobile approach was unnecessary for web. While native drafting lacked a default all players view, the all players view was the default drafting experience on web and a carousel of game matchups sits at the top of the screen above the player list. At its core, draft by batting order as a feature is simply filtering a list of all players by the team they are on and then applying a sort to the players on the team based on their batting order. So we simply added a teams filter and a column sort for batting order and removed the separate tab and the games list.

Revised Web Designs


Results

We released this feature in the first half of 2019 MLB season and initial analysis showed about a 14% use rate of the draft by batting order while lineups completed using draft by batting order showed a slight increase in average score and a higher rate of lineup stacking.