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 build and manage their fantasy lineups and games using the DraftKings website or a mobile app that supports iOS or Android.
My Contributions
After playing several years of season-long fantasy football, I started to explore the various daily fantasy sports platforms. I actively play on both DraftKings and their main competitor, FanDuel. I've become familiar with both products, and I strongly prefer DraftKing's scoring system over FanDuel's. However, DraftKing's presentation and user experience is not nearly as polished and puts them at a competitive disadvantage. There are some tweaks that I would like to see in their lineup building experience, so I took the time to do some self-initiated redesign work.
Selecting a contest from the DraftKings lobby will redirect you to a contest entry page. From this page, you can view detailed information about the contest, build a lineup, and enter the contest after building a valid lineup.

While building a lineup, you can tab through different player positions and click on a player's name to trigger a modal that displays more detailed player information about that given player. This modal is quintessential in delivering more in depth news and statistics to the user. However, this modal also spans nearly the entire page and can make it difficult for a user to reference the lineup that they are building. As part of my redesign, I decided to eliminate this modal and re-home the player information in a separate module on the page as part of the lineup builder.

I also consolidated the global navigation bar. DraftKings offers multiple products (Daily Fantasy and Sportsbook), and they have allocated space above their navigation menu to promote these services. I rearranged the menu and placed the "Sportsbook" link inline with the main navigation items. Lastly, I removed some extraneous text from the navigation to further clean it up.
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 the lineups can be viewed and accessed from the "Lineups" page. Each lineup is presented in a card layout 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 somewhat 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 profile photo and arranged the lineups as rows of data in lieu of the cards.
2. Lineups List View
Figure 2.0 - Current lineups list view page example
Figure 2.1 - Lineups list view page redesign
While on the lineup list view, you can select "Edit" on any lineup to launch the "Edit Lineup" modal. This modal stays fixed along the bottom of the browser window. This interaction was seen previously on the contest entry page. Similar to before, having an overlay like this blocks pertinent information from view, specifically the user-created lineups in this case. This becomes further problematic when displaying a player information modal on top of all of this data.

To solve this problem, I placed my lineup builder component on screen as part of the edit workflow. Clicking on "Edit" or removing a player from a lineup will open the lineup builder directly below the lineup row. When a lineup is in edit mode, any adjacent lineups displayed on the page will be disabled and non-interactive 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 on the App Store (iOS): DraftKings Fantasy Sports, DK Live - Fantasy Sports News, and DraftKings Sportsbook. Of the three apps, their flagship DraftKings Fantasy Sports app seems to be the least on-brand. The DK Live and Sportsbook offerings are relatively newer products in comparison, and a lot of my design direction for the desktop lineup builder was informed by these applications. My colors and type choices were heavily influenced by where I believe the DK 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 darker to match the look and feel of DK Live and Sportsbook. I also reused the typography, iconography, buttons, tables, and salary gauge components that I defined for the desktop experience to make it feel more cohesive. Additionally, the current presentation feels very text-heavy so I stripped out some of the redundant labels, and I used a table header row to indicate what the different values represent. Most of these updates are minimal cosmetic changes, but I believe this approach is more easily digestible and leads to a better overall customer experience.
4. Mobile
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's still a ton of things left to explore. I want to take a 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 desktop.
5. Next Steps
Iconography - DraftKings
Iconography - iconmonstr
Player Avatars - ESPN
iPhone Templates - Artem Konkin
Isometric iPhone Template - Dustin Tanner
6. Credits