FanDuel

Drafting by Batting Order

My Role

Product Design

Launch Date

Summer 2019

PROJECT OVERVIEW

When it comes to fantasy baseball, FanDuel’s statistical analysis shows that on average the highest scoring lineups stack four players from the same team. And anecdotally most dedicated DFS players of fantasy baseball will tell you that they like to stack 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 fielding position, without an easy way for them to view all the starting players on a given team. This construct made sense for other sports like basketball and football but was less useful in baseball. 

The Original Drafting Experience

Traditional Drafting ViewTraditional Drafting View

THE IMPORTANCE OF STACKING

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. 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 is a very natural way to draft. To solve this workflow problem for users we decided to create a drafting experience based around viewing a team’s batting order. 

Initial Sketches

sketchessketches

HOW IT WORKS

From the initial draft screen, users could select a draft by batting order CTA and then select a matchup from a list of games displaying not only the teams playing but also the game location, weather, and starting pitchers. This information is crucial for understanding what teams might best to stack. The starting pitching matchup is both the most obvious and most important aspect of the matchup to understand when stacking hitters, but things like wind or the stadium size and layout can also increase or decrease the chances of home runs among other things.

Navigating into the Draft by Batting Order Experience

New Drafting View and Games ListNew Drafting View and Games List

VIEWING THE BATTING ORDER

From there the user would be taken to a view of the away team’s lineup with the ability to toggle into a view of the home team’s lineup. However because team’s don’t release their official batting orders until about three hours before game time, we knew there was going to be a crucial window of time when a batting order would be projected rather than confirmed, until the actual lineup card for each team was released. As such, an important feature was clearly showing the distinction between lineups that were projected (and hence subject to change) vs those that are confirmed. For users who draft projected starters, we send push notifications to update them once a drafted player is confirmed to be starting or not.

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.

Batting Order Views

Projected and Confirmed Batting Order ViewsProjected and Confirmed Batting Order Views

THE WEB EXPERIENCE 

We initially applied this basic paradigm to both web and our native clients. However as I started to think about what really made up draft by batting order, I came to the conclusion that a different design might be best for web. One key difference between web and native is that on web you can view a list of all players without selecting a position like you have to do on native. At its core, draft by batting order is filtering all players, regardless of fielding position, by the team they are on and then applying a sort to those players based on their batting order.

The Original Web Experience and All Players View

DBBO for WebDBBO for Web

A NEW WEB EXPERIENCE

Given that, it seemed unnecessary to separate this drafting experience into its own tab. Furthermore, there was clear utility in giving users the functionality to filter by a team or sort by batting order even if they weren’t specifically trying to stack players from the same team. We decided to user test this concept and after a lot of qualitative feedback from users supporting the concept we decided to implement it as the new draft by batting order experience for web.

 

The New Web Experience

DBBO Baked InDBBO Baked In

VIEW THE LIVE EXPERIENCE

The full feature is now live on the Android and iOS apps and on the web at fanduel.com for MLB contests.