Quick Lineup

ESPN Fantasy is the #1 fantasy sports app with Fantasy Football, Mens Basketball, Fantasy Women's Basketball, Baseball, and Hockey. As lead designer I led the effort to add a feature that improves updating of rosters, assists with personnel decisions, and provides tool to improve performance.

Client

ESPN Fantasy

Services

Product Design

Industries

Fantasy Sports

Date

January 2024

Jump to Section

1 • Goals

2 • Concepts

3 • Roster Components

5 • Edit Lineup Action Sheet

4 • Prototypes

6 • Quick Lineup Components

7 • Edit Lineup - Shipped Design

8 • Results

Goals

1. Simplify lineup management

2. Save users time

3. Scale across all leagues

4. Increase usage frequency

5. Pass accessibility

6. Design system compliant

Concepts

I created initial concepts to present to respective design and product leads. The team liked the idea of using an action sheet for roster changes. Users can choose a players lineup position directly on the roster screen, which was a better option than what was currently in production.

Next: Roster Components

Roster Components

Next I started updating the exisiting player cell components from our library, and added the buttons to each row. I created different states of the roster to stress test adding a button. Each component needed variables tokens for dark mode, and consistentcy with the styles from ESPN's Fantasy Design System.

Next: Edit lineup components

Edit Lineup Action Sheet

I began building the sheet component for edit lineup, and the player cells that make up the sheet. I created variants for selected, locked/disabled players, and the position empty states. The colors had token variables in Figma for light and dark modes, which you can see below.

Next: Prototypes

Prototypes

The next step was to prototype the flows in Figma. I designed each screen, from end to end, and documented edge cases.

Edit Lineup Flows:

1. Move player into lineup
2. Move player to bench
3. Substitute from bench to lineup
4. Move 2 players within lineup
5. No eligible positions available

Quick Lineup Flows:

1. Set Today's lineup
2. Set Tomorrow's lineup
3. Set all lineups for duration of matchup
4. Set all lineups for duration of playoffs

Next: Quick Lineup Components

Replace player in lineup

Move bench player into lineup

Insert player into empty slot

Quick Lineup Components

I shifted my focus on updating exisitng interactions and adding a sheet component to our library for the lineup tool. I did a quick audit and found the radio selection components needed, and started updating them with type treatments, colors, and establishing our interaction states (ie selected, resting, disabled, etc). I started designing the animation for the loading state, and created the sheet which housed the main interactions.