Lineup Builder Redesign
Project Overview
DraftKings is a daily fantasy sports contest and sports betting provider. The company allows users to enter daily and weekly fantasy sports contests and win money based on individual player and team performances in a variety of sports, including MLB, NHL, NFL, NBA, PGA, Premier League and UEFA Champions League soccer, NASCAR auto racing, Canadian Football League, the Arena Football League, Mixed Martial Arts (MMA) and Tennis. Users can manage their fantasy lineups and games via the DraftKings website or the DraftKings mobile app for either iOS or Android.
My Contributions
After several years of playing season-long fantasy football, I started exploring the various daily fantasy sports platforms. I actively play on both DraftKings and their main competitor, FanDuel. I have a preference for DraftKing's scoring system, but the DraftKings brand and presentation and overall user experience is not nearly as polished when compared to FanDuel. This puts them at an obvious competitive disadvantage. There are some changes that I would like to see in the lineup building experience, so I carved out some time to do some self-initiated redesign work.
Selecting a contest from the DraftKings lobby redirects to a contest entry page. From this page, a user can view detailed information about the contest, build a lineup, and enter the contest after building a valid lineup.

While building a lineup, a user can tab through different player positions and click on a player's name to open a modal that contains more detailed information about that specific player. Unfortunately, the modal spans nearly the entire page and makes it difficult for a user to reference the lineup they are trying to build. As part of my redesign, I removed this modal and relocated the player information to a new module on screen as part of the lineup builder.

The information on the navigation bar was also consolidated and simplified. There is space allocated above the navigation menu to promote both the Daily Fantasy and Sportbook services. I reorganized the menu and placed the "Sportsbook" link inline with the main navigation items. Lastly, extraneous text was removed to further clean up the global navigation.
1. Contest Entry
Figure 1.0 - Current contest entry page example
Figure 1.1 - Current player information modal
Figure 1.2 - Contest entry page redesign with player information module
All user created lineups can be viewed from the "Lineups" page. Each lineup is presented in a card format and arranged 4-up on the page. Each card displays information about the contest format, remaining salary, current winning amount, aggregate remaining minutes, total accumulated score, and every player at each position. This card format is fairly text-heavy and can be difficult to parse. In my redesign, I took a page out of FanDuel's playbook and displayed each player's avatar and arranged the lineups as rows of data in lieu of the cards. This visual treatment allows a user to scan through the page and quickly understand their player pool without having to read through each individual lineup.
2. Lineups List View
Figure 2.0 - Current lineups list view example
Figure 2.1 - Lineups list view redesign
While on the lineup list view, a user can click "Edit" on any lineup to open the "Edit Lineup" modal. This modal stays fixed along the bottom of the browser window. This interaction pattern was seen previously on the contest entry page. As before, an overlay like this blocks pertinent information from view. In this case, the user-created lineups are now inaccessible. This becomes even more problematic when triggering a "Player Information" modal on top of the "Edit Lineup" modal.

To solve this problem, the redesigned lineup builder component is placed inline on screen as part of the edit workflow. Clicking on "Edit" or removing a player will open the lineup builder directly below the lineup row. When a lineup is in edit mode, all adjacent lineups will be disabled and non-interactable until edit mode has been dismissed.
3. Lineup Editor
Figure 3.0 - Current "Edit Lineup" modal
Figure 3.1 - Inline lineup editor redesign
Figure 3.2 - The lineup editor redesign applied to a NHL slate
Figure 3.3 - The lineup editor redesign applied to a NBA slate
DraftKings has three mobile apps available in the App Store (iOS): DraftKings Fantasy Sports, DK Live - Fantasy Sports News, and DraftKings Sportsbook. Of the three apps, the flagship DraftKings Fantasy Sports app seems to be the least on-brand. The DK Live and Sportsbook offerings are newer products in comparison, and most of my design direction for the desktop lineup builder was inspired by these two applications. The colors and type choices were heavily influenced by where I believe the DraftKings design team is taking the product based on the appearance of these applications.

To close the visual gap between the apps, I looked for opportunities to make the main DraftKings app match the darker mood and feel of DK Live and Sportsbook. I also reused the typography, iconography, buttons, tables, and salary gauge components defined for the desktop experience to make it feel more cohesive. Additionally, the current presentation felt very text-heavy so I identified and removed the redundant labels, and a table header row is used to indicate what the different values represent. Most of these updates are slight cosmetic changes, but this kind of approach is more digestible and leads to a better overall user experience.
4. The Mobile App
Figure 4.0 - DraftKings has three mobile apps available in the App Store: (1) DraftKings Fantasy Sports, (2) DK Live - Fantasy Sports News, and (3) DraftKings Sportsbook
Figure 4.1 - Create Lineup screen redesign (before and after)
Figure 4.2 - Draft Position screen redesign (before and after)
Figure 4.3 - Player Information screen redesign (before and after)
There are still a ton of things left to explore. I would like to take a closer look at the lobby experience and discover ways how to streamline the contest selection process. I also would like to dive deeper into the player information component and experiment with toggling an expanded view on the desktop.
5. Next Steps
Iconography - DraftKings
Iconography - iconmonstr
Player Avatars - ESPN
iPhone Templates - Artem Konkin
Isometric iPhone Template - Dustin Tanner
6. Credits