Crypto gaming hub
Wage Fantasy Crypto
From the league to the wallet: I designed the hub where people join a fantasy league, set a team of coins and get paid.
- Role
- Product Designer
- Platforms
- Web app
- Status
- Design delivered
About
What the product is
UsersPeople who want to play fantasy sports with coins instead of athletes, newcomers to crypto included.
Separate parts
Problem
A league played with coins needs six parts. Taken one by one, they are loose pieces, not one game to join, play and win.
Main constraintMoney moves at every step: a fee to join, a fee to leave early, a wallet to cash out.
- Browse
- Roster
- Week
- Result
- Wallet
- Friends
One league
Solution
Six parts, one league they all share.
The team, the weeks and the standings belong to it, and the wallet lists every join fee and prize by its league.
League
- prize
- join fee
- interval
- access
- Browse
- Roster
- Week
- Result
- Wallet
- Friends
What I delivered
Outcome
A delivered design of every area a player uses.
My partI owned the UX and UI: how the hub is organised, how a player moves through it and how each screen looks.
- Desktopframes for every part of the hubDialogs to join and leave
- Phoneframes, a set of their ownSheets in place of dialogs
- Componentscoin picker, filter and week marksDrawn in their states
- Style guidecolours and the Montserrat type scaleTeal · gold · navy
Brief
Fantasy sports plus crypto: an idea without a product yet
The client wanted fantasy sports and cryptocurrency in one product, where good strategy could win real money. What did not exist yet was the experience: how to join a league, read its rules and build a team. My job was to design it: league terms anyone can read before joining, a team a newcomer can set up, and a wallet where the winnings arrive.
Find the needs, then pick one to mark the words it was read from. Three scenes: the client brief, the seats that work in the product, and the UX flows that followed.
The needs in the brief
Find the needs, then pick one to mark the words it was read from.
The brief, summed up
Fantasy sports where the sport is crypto: instead of players, people pick coins, and the market decides who wins.
They join a league, or create one with their own rules, and build a team for the week.
It has to be a week that resolves fairly, and the winners get paid into a wallet.
It should work for newcomers and for fantasy players, on a desktop and on a phone.
Role
What I owned, and where the work stopped
The brief named four problems to design: signing up and joining a league, creating a league with its own rules, resolving every week fairly, and an admin dashboard for league admins. The first three are in the delivered screens; the admin dashboard is not.
I owned
Join or create
Sign-up and sign-in, finding a league and joining it, and creating one in two steps.
A team of coins
Building a team: a coin picked for each of nine football positions.
Standings and wallet
Standings with W / L / D, match details, playoffs, friends and the wallet.
Desktop and phone
UX and UI across desktop and phone.
Outside my scope
Engineering
The scoring engine, custody, and anything after handoff.
Outcomes
Payouts and retention were never measured.
Constraints
What the design holds to
Weights in the open
Every position shows its weight, and the nine weights add up to 100%.
Terms up front
Before a join, the league’s page shows the prize fund and its split, the join fee, the number of players, access, start time and game interval; the join dialog adds the early withdrawal fee.
One wallet
Deposits, join fees, winnings and withdrawals all go through one wallet inside the hub.
Laid out for the phone
On the phone, the four main areas sit in a menu, and the wallet shows its assets and its transactions as two tabs.
Goals
What a player had to be able to do
These are the brief’s service goals and key challenges as design jobs, not measured outcomes: what a player had to be able to do, from finding a league to keeping up with friends. Each card shows the part of the delivered screen that does it.
A league that fits
Browse lists the leagues in one table with their start, game interval, join fee, teams, prize split and access, and a row offers Open, or Request To Join for a private league.
Terms set by its creator
A player can start a league of their own, setting its join fee, early withdrawal fee and prize split on the first step, beside its access, size, start and interval.
Missing funds in red
Setting up a team, a newcomer sees at once which coin they cannot cover: it shows in red, with Deposit The Missing Funds under its position.
A result every week
Each week ends in a result a player can check: the winner and the loser side by side, and each position’s coin with its change that week.
A name on each prize
In the playoffs, the prize bar puts a player’s name on each place, so everyone in the league sees who holds which share of the prize.
Friends and their leagues
Friends have a list of their own, with what each is playing and their wins and losses, and a friend’s page sorts their leagues into wins, losses, playing and their own.
Solution
Making rules, team creation and the wallet feel like one product
I designed the product from league discovery to team creation, weekly standings and the wallet. It had to feel like a game, not a trading screen: each position holds a coin with a public weight, the league shows its terms before anyone joins, and every join, team change and payout has a clear next step, on desktop and on the phone.
01 of 04
From idea to design
Three steps, from the first ideas to the delivered design.
Ideas
Ways a fantasy league could be played with cryptocurrency.
Prototypes
The ideas turned into interactive prototypes.
Delivered design
The screens, their components and a style guide.
02 of 04
Who plays on a team
What should a team be made of, when the game runs on coin prices?
Judged on three tests
- The coins a player picks shape the result.
- A newcomer can read a team without trading.
- There is a league to join and weeks to win.
- A
Athletes with a coin badge
Fantasy football as it is, with crypto only on the surface.
Fails test 1: the athletes decide the result, not the coins.
- B
A charting terminal
The market itself, with no league around it.
Fails tests 2 and 3: it asks for trading and has no league.
- Chosen
Coins in football positions
A team keeps the positions of football, with a coin in each.
Passes all three tests.
Why this one
It is the one answer that is a game and a market at once: fans know the positions, and the coins bring the market in.
Trade-off
Football fans have to learn coin tickers as players.
Risk
Someone who came for a game may see only a market and leave.
Reversibility
Athletes could be added later as a second kind of team. Taking the coins out would make it a different product.
03 of 04
What a position is worth
With a coin in every position, how should a player know what each position is worth?
Judged on three tests
- It matters which position holds which coin.
- A player reads the rule where the team is set.
- A newcomer does not have to calculate anything.
- A
Raw price change
Every coin counts the same, whatever position it holds.
Fails test 1: the position makes no difference.
- B
A formula in a FAQ
The rule is explained only after someone has joined.
Fails test 2: the rule is out of sight when the team is set.
- Chosen
Public weights
Each position carries a weight, set by the league’s creator and printed on the team.
Passes all three tests.
Why this one
With its weights on it, a team reads like a football line-up: the positions that count most are plain to see.
Trade-off
More to read before the first join: nine weights as well as the league’s terms.
Risk
A newcomer may read 25% as a chance to win, not as a share of the fee.
Reversibility
The weights could later be fixed for every league. Hiding them again, once leagues had run on them, would change the game.
04 of 04
The nine positions
The join fee is split by these weights.
Quarterback
25%
BTC by default
Running Back 1
20%
ETH by default
Running Back 2
15%
DOGE by default
Wide Receiver 1
12%
XRP by default
Wide Receiver 2
10%
SOL by default
Tight End
8%
SHIB by default
Flex
5%
RVN by default
Kicker
3%
XMR by default
Defence
2%
TRX by default
The whole join fee 100%
Three features run through the hub: friends, the multipliers and the weekly updates. Each has its own place: the Friends area, a week’s match, and a league’s page with Joined Leagues.
Friends across the hub
In the header, on a player’s page and in Browse Leagues
Friends is one of the four areas in the header, next to Browse Leagues, Joined Leagues and Wallet, and its list of friends can be searched by name. A player’s page has an Add Friend button, and Browse Leagues has a Friend’s tab beside All, Upcoming and Featured.
Multipliers in a match
The week’s match, position by position, in Detailed Mode
A week’s match has a Detailed Mode switch. Turned on, it adds a Multiplier and a Final Value to every position, and a total under each player’s table.
The season, week by week
A mark a week, and where each joined league stands
A league’s page gives every player a W, an L or a D for each week, with a clock on the week still to come, and arrows to step through the weeks. Joined Leagues lists every league a player is in, each with its score and its result: Playing, Winner or Loser.
Crypto Champions League Teams 12/14 Prize Fund $2800- G+ 15%
- N+ 13%
- B+ 11%
- X+ 10%
- E+ 9%
- B+ 8%
- A+ 7%
- B+ 7%
- L+ 6%
- A+ 6%
- A+ 5%
- N+ 4%
- E+ 4%
- L+ 7%
| League | Starts | Game Interval | Join Fee | Teams | Prize Distribution | Access |
|---|---|---|---|---|---|---|
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 6/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/4 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Hour1 H | $100.00 | 12/12 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 8/10 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 24/24 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 16/16 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 3/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 9/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/8 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 8/10 | 50%30%20% |
Crypto Champions League Teams 12/14 Prize Fund $2800- G+ 15%
- N+ 13%
- B+ 11%
- X+ 10%
- E+ 9%
- B+ 8%
- A+ 7%
- B+ 7%
- L+ 6%
- A+ 6%
- A+ 5%
- N+ 4%
- E+ 4%
- L+ 7%
| League | Starts | Game Interval | Join Fee | Teams | Prize Distribution | Access |
|---|---|---|---|---|---|---|
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 6/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/4 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Hour1 H | $100.00 | 12/12 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 8/10 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 24/24 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 16/16 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 3/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 9/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/8 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 8/10 | 50%30%20% |
Flow
One league, from the filter to the prize
Narrow the leagues
Set the ranges, then apply the filter.
The filter opens over the dimmed Browse page. League start, bid, interval, teams, early withdrawal fee and the share for first place each get a range, and Team Adjustment Mid Game has three boxes to tick. Pay to join
Check the league’s name, then pay.
The dialog opens with “You are joining” over the league’s badge and name. One button pays the join fee and joins. Behind it the league’s page stays dimmed, Join League still in its header. Adjust the team
Swap a coin, then confirm the change.
Your Team opens as a dialog over the league’s page, with Confirm at its foot. The line under its title says this league lets a team be adjusted while the league plays. A row marked Winner
Find the prize among the transactions.
Beside Transactions, a ring shows the coins a player holds and their total, and My Assets gives each coin’s quantity and price. Every amount is shown in dollars and in coins, and a tooltip splits one by coin.
States
Beyond the happy path
Not joined
A league a player has not joined shows Join League where a member sees Withdraw Funds & Leave.
A player outside the league still sees its weeks and standings.
Leaving early
A member can leave before the league ends, and the leave button says what comes back.
Joined Leagues shows each league’s early withdrawal fee.
Withdrawing
Coins can leave the hub for another wallet: the dialog asks for the coin, the amount and its token standard.
Last, the dialog asks for the address of the receiving wallet.
System
Every colour has one job
Almost every screen of the hub is full of figures: fees, prize shares, a week’s result, a wallet’s amounts. A player has to tell them apart at a glance, in a table on Browse Leagues as much as in a match, so each colour keeps one meaning on every screen.
Teal is what a player acts on and navy is what they read, with paler blues and a grey a step below. Gold, a blue-grey and orange mark first, second and third place. Green and red mark a win and a loss, and in the wallet the money coming in and going out; a draw has a yellow of its own.
Colours
Pick a colour on the wheel
- Inner ring: teal, gold, navy and the quieter tones, lightest to navy
- Outer ring: a win, a draw and a loss, at their own hues
Type
- Crypto LeagueH1 · Montserrat SemiBold 24The guide’s larger heading
- Team CreationH2 · Montserrat SemiBold 16Screen titles
- Available Mid GameBody · Montserrat Regular 14Text in a field
- Prize Fund · Join Fee · PlayersCaption · Montserrat SemiBold 12Labels over a league’s terms
- Regular 400
- SemiBold 600
Components
- Result marksWin, loss and draw: rings on the standings, pills on a match
- Filter buttonOpens the filter; its funnel pale, then teal
- Range filterTwo fields and two handles for one range
- Coin pickerA position’s coin, picked from a list
- Date pickerA day or a range, with quick picks
- Prize barThe prize, place by place
Delivered
A league you can join, a team you can set, a wallet that pays out
What “complete” means here
- BrowseFeatured leagues, then every league.
- RosterEach coin’s change, beside its weight.
- WeekA league’s terms sit above its weeks.
- WalletDeposit and Withdraw over the holdings.
League search and footer pages are drawn too.
The delivered design takes a player from finding a league to setting a team, following the standings and getting paid into a cryptocurrency wallet, all in one product. I owned its UX and UI, from the brief to the detailed screens.
Delivered designOnly the hub, in desktop and phone frames: league discovery, team creation, standings, friends and the wallet. The marketing landing page is not part of this case.
Crypto Champions League Teams 12/14 Prize Fund $2800
- G+ 15%
- N+ 13%
- B+ 11%
- X+ 10%
- E+ 9%
- B+ 8%
- A+ 7%
- B+ 7%
- L+ 6%
- A+ 6%
- A+ 5%
- N+ 4%
- E+ 4%
- L+ 7%
| League | Starts | Game Interval | Join Fee | Teams | Prize Distribution | Access |
|---|---|---|---|---|---|---|
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 6/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/4 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Hour1 H | $100.00 | 12/12 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 8/10 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 24/24 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 16/16 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 3/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 9/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/8 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 8/10 | 50%30%20% |
Crypto Champions League Teams 12/14 Prize Fund $2800- G+ 15%
- N+ 13%
- B+ 11%
- X+ 10%
- E+ 9%
- B+ 8%
- A+ 7%
- B+ 7%
- L+ 6%
- A+ 6%
- A+ 5%
- N+ 4%
- E+ 4%
- L+ 7%
| League | Starts | Game Interval | Join Fee | Teams | Prize Distribution | Access |
|---|---|---|---|---|---|---|
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 6/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/4 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Hour1 H | $100.00 | 12/12 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 8/10 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 6/12 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 2 Days2 D | $100.00 | 24/24 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 16/16 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 3 Hours3 H | $100.00 | 3/8 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 5/8 | 100% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 9/12 | 50%30%20% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Day1 D | $100.00 | 4/8 | 70%30% | ||
| Fri 13th, January 2023 GMT +313/01/2023 | 1 Week1 W | $100.00 | 8/10 | 50%30%20% |
Reflection
What I’d keep, change and validate next
What I’d keep
Everything set but the coins
Positions and weights come with the league, so the coins are the only choice a team leaves to its player.
What I’d change
Two numbers, two names
A team’s weights and a match’s details both say Multiplier, for two different numbers. I’d give each its own name.
What I’d validate next
Two questions, no data
Do players turn on Detailed Mode at all? Do people joining a league look for the mid-game rule its page leaves out?