Purple for auction, teal for everything else

Snake and linear drafts use Sleeper’s teal. I was asked to use purple as the accent for auction so the two draft types feel different at a glance.

Design the bar as a set of states

In a live auction one bar has to say whose turn it is, what the price is, who’s winning, and what just went wrong. I designed the bid bar as nine states: draft not started, a leaguemate nominating, your turn undecided, your turn decided, a leaguemate holding the highest bid, you holding the highest bid, drafted, and two errors.

Across all nine, the player, the price controls, the main button and Pass stay in the same place. The bid amount and the main button share one pill, so the number you’re about to commit sits right next to the button that commits it. Only the status line and the button’s label and color change, so you learn the bar once and then read it at a glance.

Try it

An interactive recreation of the bid bar, built from my frames, running a short demo draft with a faster clock. The rules are the ones I designed for: a $200 budget, a max bid of your budget minus $1 for every roster spot you still have to fill, a clock that resets on every bid, and if you don’t nominate in time, the highest-projected player in your queue goes up for you. Bid against your leaguemates, try an amount that’s too low or over budget, and switch between light and dark. It’s a desktop experience, so on a phone it shows a note instead.

Purdy’s Buddies · auction · budget $200 · 15 spots left · max bid $186

LightDark

# —POS# —OVERALL$ —PROJ$ —AVG

Draft Not StartedSet your nomination queue to prepare

$—

Bid $ —max $186PASS

Start the demo draftInteractive recreation for this case study · demo clock

Built for webThe auction draftboard is a desktop experience. Open this page on a computer to play the demo draft.

Put errors where the eye already is

“You must offer higher than the current offer” and “Bid amount exceeds max budget” appear right above the amount you typed. The amount stays in the field and the bid button greys out, so you can fix it before the clock runs out.

Show the bid history in the bar

Recent bids run along the bottom of the bar, under the player’s stats, with the amount and who made each one. Your own bids are highlighted, and the newest, highest bid sits at the right end. You can read the room without opening another panel.

The Drafted moment

When you win a player, the bar says DRAFTED with the price you paid. My original design had subtle confetti behind it, a small congratulations for getting the player you wanted. It was cut in review. I argued for it as a fantasy player myself, but an opinion is easy to set aside. Next time I’d bring a prototype, not just my opinion. The recreation above keeps the confetti, so you can see what I was arguing for.

Roster, Queue, Draft

The old board’s right panel was Queue, Results and Chat. I proposed Roster, Queue and Draft, with Auto-pick staying in view, and chat moved out of the tab strip into its own modal. Queue rows can be reordered, nominated straight from the row, and starred, with a “Next Nom.” tag on the one that’s up. The Draft panel lists each pick with its owner and price, filterable by position and team. Roster shows each slot and what you paid.

Filters in a modal

The old board kept its filters in the table header. I added a filters modal on top of the quick position pills: position, rookies, veterans, IR, watchlist, NFL team, bye week and years of experience, with Reset and Apply.