Case study · CreativeTech Studio
Building Unbeaten & Unrivaled
How I turned Indiana's 16–0 national title into an interactive dashboard that lets any fan settle the "was it a fluke?" argument with evidence, on their phone, in a few taps.
- Scoring margin
- +29.9
- Turnover margin
- +22
- 2nd-half edge
- +166
- Role
- Concept, data modeling, design, front-end build, documentation
- Stack
- React 19, TypeScript, Tailwind CSS v4, Chart.js, Vite
- Scope
- 16 games, 10 rivals, 7 views, a simulator and a PDF brief
- For
- IU fans and sports-debate regulars. Free, no sign-up, any device
The story on TV didn't match the numbers
Indiana opened the 2025 season ranked #20 in the AP preseason poll and finished 16–0. Commentators kept calling the run "miraculous" or "lucky," but nobody showed what actually separated IU from the preseason favorites.
The evidence existed. A +29.9 scoring margin led FBS. A +22 turnover margin came from 30 takeaways against 8 giveaways. IU went 8–0 against ranked teams and outscored opponents by 166 points after halftime. Those numbers were scattered across box scores and stat sites, where fans couldn't use them in an argument.
My goal: one place where a fan could check the "fluke" claim for themselves.
Start with the two questions fans actually ask
Instead of opening on a wall of stats, the home screen asks two plain questions. Each one leads to its own tool, and every other feature hangs off them.
"Was Indiana's title a fluke?"
Compare IU side by side with every team in the 2025 preseason AP Top 10, from #1 Texas to #10 Miami.
→ Tale of the Tape"How did they pull off 16–0?"
Walk through all 16 Saturdays with box scores, drive charts, halftime adjustments and highlights.
→ Digital Film RoomUnder each question sit jump links (Texas, Ohio State, Alabama; Miami, Oregon, Alabama) so a fan arguing about one game gets there in one tap. The framing told first-time visitors where to start and gave every deeper feature an obvious home under "More."
Two tools, a simulator and four deep dives
Tale of the Tape
A debate cheat sheet contrasts the August media claim with what happened, then a 10-stat table and a 6-point radar chart compare the teams.
Digital Film Room
All 16 wins, filterable by postseason, Big Ten, one-possession games and blowouts. Each opens to key plays and a drive chart on a field.
Matchup Simulator
Adjust turnover margin, red-zone TD rate, venue and second-half adjustments, then see a projected score and win probability.
Stats & Highlights
Team and player stats, six marquee games and five strategic takeaways.
Championship Story
The season in four parts, from #20 in August to the trophy in January.
Thesis Tool
Four arguments for why Indiana won: offense, defense, ball security and the Cignetti blueprint, each with a chart.
Executive Dashboard
The whole season on one screen, charted against the preseason Top 10 average.
Matchup Brief
A one-page, print-to-PDF report for any IU vs. Top 10 matchup.
Document Hub
How the app was made, with a production blueprint and an APA citation.
Typed data feeds two engines, which power every view
It's a single-page app in React 19 and TypeScript, styled with Tailwind CSS v4, charted with Chart.js and bundled with Vite. It deploys as static files on creativetech.studio, so there's no server or database to run. Every view reads from the same typed data, so a stat fixed once is fixed everywhere.
Data layer
types/football.tsTyped schema for teamschampionshipData.tsIU and Top 10 season statsgameMomentsData.ts16 games, key playsEngines
NormalizationEvery stat on a 0–100 scaleSimulation enginePower ratings + Poisson seedsReact views
HeadToHeadQ1 comparison and radarGameLogExplorerQ2 Film RoomMatchupSimulatorWhat-if gamesThesisToolFour arguments, chartedFive stages
- Data model first. Typed JSON for Indiana and the preseason Top 10, cross-referenced against box scores and season totals from 160+ team games.types/football.ts · championshipData.ts
- Comparison engine. Formulas that put points, percentages and turnover margins on one scale so they can share a radar chart.HeadToHead.tsx
- Matchup Simulator. Counterfactuals: what if IU loses the turnover battle, settles for field goals or plays on the road?MatchupSimulator.tsx
- The 16–0 game log. Every win with quarter breakdowns, a three-play turning-point timeline and a 100-yard drive chart drawn on canvas.gameMomentsData.ts · GameLogExplorer.tsx · GameDetailModal.tsx
- Polish and brand pass. Simpler navigation, clearer instructions and the IU palette enforced on every screen.
One scale for every stat
A radar chart only works if every axis means "farther out is better" on the same scale. Each metric gets its own formula:
| Win rate | S = Win% × 100 |
| Scoring defense | S = max(30, 100 − (PA − 9.0) × 4.5) |
| Turnover margin | S = min(98, max(35, 50 + TM × 2.2)) |
| Third-down rate | S = round((3D% ÷ 57.0) × 95) |
The floors and ceilings (highlighted) keep one extreme stat from collapsing or blowing out the chart, so the shape stays readable for every matchup.
Three problems that shaped the build
Defensive stats point the wrong way
On a radar chart, a great defense that allows few points would draw a tiny shape and look weak.
I inverted the defensive formulas so allowing less pushes the point outward, matching every other axis.
Pure randomness gave silly scores
A plain random-number simulator produced final scores no college game would end with.
I combined real power ratings with controlled Poisson-distribution seeds, so re-rolls vary but scores stay realistic.
A 100-yard field on a phone
A drive chart drawn at fixed sizes clipped sideways on small screens.
I placed hash marks, yard lines and drive paths in relative percentages so the field scales to any width.
Four colors, one job each
The color rule doubles as a charting rule: crimson is always IU, black or gray is always the other side. Fans never need a legend to see who's winning a chart.
#990000Primary. Always Indiana.#EEEDEBPage background#DCDDD9Structural borders#191919Contrast. The opponent.Type pairs Merriweather, Inter and JetBrains Mono. Every card and chart was laid out to look good as a screenshot, because that's how fans share.
The biggest wins came from taking things out
After watching how people moved through early versions, I reworked the app around clarity rather than adding features.
- RemovedDuplicate simulator buttons that confused people about which one to use
- CutOff-brand yellow and amber accents, moving everything onto the IU palette
- AddedHigh-contrast instruction panels so each tool says what to do first
- RebuiltThe home screen around the two questions, jump links and four headline stats
- GroupedSecondary hubs under one "More" menu, keeping the top bar to six items
- LinkedEvery view to every other with hub cards at the bottom, so no screen is a dead end
Shipped like a product
The app launched with the materials a real release needs: a ten-part user guide, shorter Q1 and Q2 guides, a printable Executive Matchup Brief, one-tap "Copy Debate Card" and "Copy to Chat" sharing, a fan-facing marketing page and social preview cards so shared links show a proper title and summary.
What I'd carry into the next project
Start from the question
Two plain-language questions did more for usability than any chart.
Model the data before the screens
A typed, normalized data layer made every later view faster to build and consistent.
Make the math honest for the chart
Inverting defensive stats and capping extremes is what lets the radar chart tell the truth at a glance.
Simplify after you ship
Removing buttons and colors improved the app more than adding features did.
Ship the docs with the product
A guide, a PDF brief and a marketing page made it usable by people I'll never talk to.
Go settle the debate
Free, no sign-up, works on any device.
