DRAFT. BUILD. WIN.
CASE STUDY
iOS + WEB
SWIFTUI + NEXT.JS
DESIGNED & BUILT BY TYLER
MetaDraft

MetaDraft

Building a daily fantasy sports game with roguelike drafting mechanics, from concept to App Store in 25 days.

visit metadrafts.com →
MetaDraft Draft Screen MetaDraft Results Screen
01 // problem

Architecting a New Way to Play

Daily fantasy sports has a participation problem. Platforms like DraftKings and FanDuel optimize for experienced players who use lineup optimizers and spreadsheets. The drafting experience feels like homework: fill out a form, set a lineup, wait for games. There's no tension, no real-time decision making, and no social interaction during the draft itself.

The most exciting part of fantasy sports is the draft, but nobody has made the draft the core gameplay loop.

02 // vision

Product Vision

Build a fantasy sports experience that feels like a game, not a spreadsheet. Every decision should happen under time pressure, with incomplete information, against real opponents.

  • Speed over optimization — 30-second rounds, not 30-minute research sessions
  • Scarcity creates tension — shared player pool, limited copies, what you pass is gone forever
  • Strategy through composition — position stacking bonuses reward intentional team-building over pure stat-chasing
  • Accessible depth — simple rules (pick 1 of 6) with layered strategy (when to reroll, what to stack, how to read the meta)
03 // role

My Role

Everything. Product design, game design, full-stack development, App Store submission. Solo creator from concept through shipping.

25 days Timeline
426 Commits
~25K Lines of Code
129 Files Shipped

Stack: iOS (Swift / SwiftUI), Web (Next.js 15 / TypeScript), Backend (Supabase / PostgreSQL), Payments (StoreKit 2), Auth (Sign in with Apple + Google).

Status: Submitted to App Store, live at metadrafts.com.

04 // shipped

What I Shipped

Core Game Engine

7-round timed draft with escalating star-tier probabilities. 8-player lobbies with progressive bot fill. Global scarcity pool with copy limits per tier. Position-diverse shop generation (guaranteed 1G/1F/1C per shop). MMR-based matchmaking with rank tiers from Bronze to Diamond.

Position Stacking System

Replaced an initial 8-composition synergy system after playtesting revealed the dominant strategy was "always pick highest star, ignore position."

The design challenge: How do you make a 2-star Center more appealing than a 3-star Guard?

The solution: Individual stat multipliers applied to ALL players at a stacked position. Stack 3 Guards and every Guard gets AST x1.4, STL x1.2, 3PM x2.0. This creates genuine draft tension — "Do I complete my stack or take the higher-star player?"

Verified balance through simulation: an intentional 3-Center stack with mid-tier players scores within 6 FP of a lucky star-chaser who drafted two 3-stars. Strategy competes with luck.

Ticket Economy

Free tickets regenerate (1 per 90 min, cap at 3): a pacing mechanic, not a hard paywall. Paid tickets via StoreKit 2 IAP ($0.99 for 3) in a separate pool, consumed after free. The free/paid split ensures buying doesn't disadvantage free players; it just lets you play more.

Cross-Platform

Native iOS app (SwiftUI) and web app (Next.js 15) with full feature parity. Real-time opponent picks via Supabase Realtime. Both clients share the same backend, auth, and data layer.

iOS

Draft in Progress Home Screen Leaderboard Ticket Purchase Profile

Web

Web Scoreboard
Web Team Detail Web Players
05 // process

Design Process

Start with the Core Loop

Before touching any UI, I defined the 30-second decision loop: see 6 cards, evaluate, pick or reroll, wait for opponents, next round. Every feature was evaluated against whether it enhanced or interrupted this loop.

Playtest the Math

The original synergy system looked good on paper (8 compositions x 3 focus options = 24 build paths) but playtesting revealed it was meaningless: the optimal strategy was always "pick highest star." I ran simulations against 400+ real NBA players to validate the replacement stacking system before building it.

Design for the Timer

With 30 seconds per round, information density matters. The draft screen evolved through several iterations:

  • V1: Scrollable page with cards, roster, opponents, synergy panel — too much scrolling, couldn't see everything
  • V2: Fixed card grid + sliding info panel — everything visible, layered depth on demand
  • V3: Added grid/list toggle — power users can compare stats in table view

Make the Invisible Visible

The stacking bonus system is powerful but invisible if you don't surface it. I added position requirement indicators during drafting, composition badges on results, yellow-highlighted boosted stats in team detail, per-player bonus deltas, and stacking bonus pills in team headers.

06 // decisions

Key Design Decisions

Position Requirements as Draft Constraints

Rather than letting players build any lineup, requiring 1G+1F+1C creates forced decisions. In Round 6 with 5 Guards, your next pick MUST be a Forward or Center. The UI communicates this by dimming blocked cards to 35% and showing an error banner. This transforms a mindless draft into a puzzle.

Free vs Paid Ticket Separation

Most games put free and paid currency in one pool. I separated them so free tickets regen independently. A player with 2 free + 3 paid tickets uses free first, preserving their purchased tickets until they run out of free ones. Buying never feels wasted and free players always have their regen working.

Projected vs Final Score Distinction

Early versions showed projected scores alongside actual final scores on the leaderboard, which was confusing. I filtered the leaderboard to only show live and final scores, keeping projections in the team detail view with clear "Projected" labeling.

Game Header as Persistent Context

The game header (avatar, username, ticket count with regen timer) appears on every tab. It's the player's identity and resource state: always visible, tappable for ticket details. A unified, game-like HUD instead of per-tab navigation titles.

07 // learnings

What's Working & What I've Learned

What's Working

  • Mechanics before UI — the core draft loop was playable before any visual design existed. This meant I was tuning game feel, not pixel-pushing, during the critical early days.
  • Quantitative design validation — running simulations against real NBA data caught the synergy balance problem before players did. The replacement system was designed in a spreadsheet and verified with code before a single UI component was touched.
  • AI-assisted development — using Claude Code and an autonomous agent system for mechanical implementation freed me to focus on product thinking and design decisions.
  • Cross-platform from day one — building web and iOS simultaneously forced clean API boundaries and caught platform assumptions early.

What I've Learned

  • Playtest the system, not the feature — the original synergy system was elegant in isolation but collapsed under gameplay. Players always picked the highest star because the bonuses were multiplicative, not transformative.
  • Economies are products within products — the free/paid ticket system, regen timers, and purchase flow became their own design surface with UX implications that ripple through the entire experience.
  • Real-time systems demand full-stack thinking — building live drafts taught me a lot about optimizing for latency and designing around the constraints of real-time data. I'm learning to pair technical capabilities with smart design to mask limitations, like using projections while waiting for live scores to sync. Creating a seamless product in this space requires a full-stack effort where design and engineering decisions are deeply intertwined.
08 // next

What's Next

This is an active project. The roadmap is shaped by game balance, App Store feedback, and my own drafting experience:

  • Onboarding — the 30-second timer is intimidating with no context. A guided first draft would dramatically improve retention.
  • NFL support — the stacking system is sport-agnostic. Football's positional depth maps naturally to the same mechanics.
  • Social layer — friend lists, direct challenges, draft lobbies. MetaDraft is more fun with people you know.
  • Seasonal ladder — MMR resets, seasonal rewards, ranked mode with real stakes.
  • Draft replays — step through each round to understand where you could have optimized.
  • iPad-native layout — take advantage of the larger screen instead of scaling up the phone UI.

The goal isn't to build a DraftKings competitor. It's to build the best 5-minute fantasy sports experience: something you can play during a commercial break and still feel like you made meaningful decisions.

contact

tylerbkung@gmail.com

resume LinkedIn GitHub

Design + Code by Tyler Kung