Product Design ConceptUXGame-Based LearningVibe CodingChess.comPrototype

Game-BasedPuzzles

Your own blunders, handed back as puzzles. The loop finally closes.

Solve three yourselfWatch the story
RoleProduct Design

End to end, solo

Timeline2 weeks

Jul–Aug 2026

ToolsClaude · Figma

Next.js, Stockfish 18, chess.js

PlatformDesktop web

6 surfaces designed

TypeWorking prototype

Engine-verified, not mocked

The context

Reviewing isn't the
same as learning from it.

Chess.com already lets players review a finished game — see exactly where it went wrong, and read the engine's explanation of what should have happened instead.

That's useful, but it's a single-session activity. Once the analysis is over, the player moves on to the next game — the mistake was understood once, with no natural reason to see that exact decision again.

Right now
Play→Review→Understand→Move on

The gap

The review ends.
The lesson doesn't continue.

The problem isn't that Chess.com can't identify a mistake — it's what happens after. Once it's explained, that decision disappears back into the player's game history, with no built-in way to bring it back for practice. The missing piece isn't better analysis. It's practice, and a reason to return.

Current experienceEnds at step 4
1 Play
↓
2 Review
↓
3 Understand
↓
4 Done
OpportunityCould extend to step 6
1 Play
↓
2 Detect
↓
3 Practice
↓
4 Feedback
↓
5 Progress
↓
6 Return

Scroll story

One blunder,
end to end.

The solver on the left is the real screen. Scroll to move through it.

Blundervs. M. Kowalski · Rapid
Medium
0.0
Coach

A rapid game, move 14. Nothing looks wrong yet.

01 — Play

A real game, from your archive.

Not a curated library position. Yours.

02 — Detect

Move 14: Rd3

A forced mate was on the board. After ♜d3, Black plays ♜xd3 and takes the rook instead.

03 — Rewind

The board rewinds.

Back to the instant before the decision. Red on the bar is what you gave away.

04 — Decide

Find it again.

Legal dots, a ring for the capture. Hints cost your clean solve, never your progress.

05 — Feedback

Checkmate on the back rank.

Green sweeps up the bar — you won back exactly what the blunder cost.

06 — Return

Home updates instantly.

One shared progress state. The two screens can't drift.

Interactive

Your turn — three puzzles.

This one is live — a back-rank mate, a knight fork and a hanging queen, playable right here, with each state explained as it happens.

Missed TacticPuzzle 1 / 3
Queue cleared

You're all caught up!

3/3Solved
3/3Clean
100%Accuracy

Three clean solves — that's the number the product treats as real.

−5.0M1
Coach

…

M1 → −5.0

The hard part was never generating puzzles. It was generating fair ones.

— The finding that reshaped the product

How the set gets built

Rating decides how
wide we cast the net.

Prototype heuristic: a lower-rated player's games may hold more teachable moments, while a stronger player's games may need a wider search to find worthwhile ones. So the depth of analysis is read off the player's Elo, rather than fixed at one number of games.

An exploration rule, not a validated formula — the bands below are a starting point to test, not a measured result.

Under 1000

6games analysed

1000 – 1400

10games analysed

1400 – 1800

16games analysed

1800 +

25games analysed

The set size is still never padded — the net widens, the quality gates don't move. If the games only held eight fair puzzles, the set is eight.

The central question

Which games become
which puzzles, and when?

Two answers were arguable. Rather than argue in the abstract, both were built — so they can be tested on real players rather than decided in a room.

V1The rolling window
vs. Kowalski 2 puzzles
vs. Ferreira 3 puzzles
vs. Novak 1 puzzle
vs. Reyes 4 puzzles
vs. Adeyemi 2 puzzles
vs. Haddad 0 puzzles
vs. Petrov 2 puzzles

+ 3 more recent games

One standing set · 12 puzzles

Your last N reviewed games

Everything mineable goes into one pool; the best of it becomes a single set that's always there.

  • Zero navigation — open the page, puzzles are waiting
  • Best-of selection from a wide pool
  • No sense of time or rhythm — it's a bucket, not a record
  • Once solved, there's nothing to come back to
V2The diary
■ Cleared■ Has puzzles□ Today

Puzzles from the day you played

Grouped by date, with a stepper and a month calendar. No target, no padding — a day is as long as that day's chess deserved.

  • The calendar is the progress record — streaks and gaps become visible
  • An uncleared day sits there, visibly uncleared
  • Play nothing, get nothing — empty days are real
  • A navigation decision before you can solve anything
? Still open

Both are live in the prototype behind a switch, so the same account can be run on either.V1 optimises the session — always full, no decisions.V2 optimises the return — an uncleared day pulls you back. Which one wins is a research question, not a taste one — so both were built to be put in front of players.

Built pieces

The parts that
carry the feature.

Real screens from the prototype. One line each.

Game Puzzles

4/12 completed

Home hero card

Reads the same progress state the solver writes to — it can never drift. Hover.

+5.0
Available
+1.04.0↓
Dropped 4.0
1-0
Won back

Evaluation bar

The red band carries the size of the drop — or the mate thrown away. No subtraction required.

BrilliantGreatBestExcellentGoodBookInaccuracyMistakeMissBlunderPuzzles are mined from the bottom four.

Classification badges

Official art, one colour each — the taxonomy the queue is built on. Hover.

Coach

♜xd8# — checkmate on the weak back rank. Spot a forced mate in one and start it with the right move.

The coach

Two halves: what happened, then the pattern to take away.

Get Unlimited Puzzles!

3/3
Clean
0
Hint
9
Locked

You're all caught up!

9
Clean
2
Hint
1
Failed

Completion — free vs premium

The set is never trimmed. Free members see all 12 and exactly where the wall sits.

You played♜d3M1 → −5.0
♜xd8#is correct!
Solved · 1-0

Solver rows

Figurine notation, because "Rd3" reads wrong in a Chess.com context.

Product decisions

Five calls that
changed the product.

Left is what the first build explored. Right is the direction I refined and carried forward. Read the colours and you have the argument.

01

The engine's best move is not a puzzle.

Not every engine disagreement is a mistake worth teaching — mining raw disagreements mostly produced unsolvable positions. Three gates now separate disagreement from a genuinely teachable puzzle.

Ruled out Puzzles that are unfair rather than hard.

✕ First build
Quiet move, pays off in 3Two equally winning ideasWins a tenth of a pawnEngine-only, no human line
every disagreement became a puzzle
→
✓ Refined direction
✓ Findable — a capture, check or mate
✓ Singular — beats second-best clearly
✓ Worth it — decisive material or mate
8 good puzzles beat 15 with 5 duds

02

One mistake is one lesson, however many disasters followed it.

A player repeating one error made the generator fire on it four times, teaching the same idea four ways. Near-duplicate mistakes from a game now collapse into the clearest instance.

Ruled out A set that drills one mistake and calls it four.

✕ First build
Move 24 · hanging rookMove 26 · hanging rookMove 28 · hanging rookMove 31 · hanging rook
one game, one idea, four puzzles
→
✓ Refined direction
Move 24 · hanging rook
3 repeats folded in
the clearest instance survives

03

Rating sets how deep we look, never how hard the puzzle is.

The first system truncated a mate in three to one move for a 1100-rated player — half a lesson, the wrong half. Rating now sets search depth, not puzzle difficulty.

Ruled out Deciding in advance what someone can handle.

✕ First buildRated 1100 → "Casual band"
Mate in 3 · cut to 1 move
the reason the first move works was removed
→
✓ Refined direction
<1000 · 6 games1400+ · 16 games1800+ · 25 games
Mate in 3 · all 3 moves
depth of search, not depth of lesson

04

The bar explains the loss, so the copy doesn't have to.

Quoting two numbers made a player do the arithmetic themselves. The bar instead gives a visual read of the cost — anchored at what was available, draining to what the move left.

Ruled out A sentence doing a picture's job.

✕ First build
"Your move dropped the evaluation from +5.0 to +1.0, losing much of your advantage."
read it, then imagine it
→
✓ Refined direction
+1.04.0↓
1-0
the drop, then winning it back

05

Show free members the whole set, including what they can't reach.

Trimming the queue to three made the feature look small and removed the reason to upgrade. The set is never trimmed — free sees all twelve, and upgrading resumes at the exact puzzle.

Ruled out Hiding the thing you're selling.

✕ First build
123
"Puzzle 3 / 3" — nothing left to want
→
✓ Refined direction
"Puzzle 3 / 12" — the wall is the pitch

Free vs premium

The wall is
the pitch.

The set is never trimmed for free members. They see all twelve, and exactly how far in the wall sits.

Free

3 puzzles a day
Counter reads Puzzle 3 / 12not 3 / 3
Locked puzzles stay visible, greyed

A queue that looks three long has nothing to sell. The puzzles you can see but can't reach are the argument — stated as a fact, not a sales line.

Premium

The whole set
End card: You're all caught up!
Retry 3 · Next theme · Solve again

The end card is about improvement, not celebration. Actions are ordered by usefulness and the default focus moves down the list as options disappear — the most useful remaining action is always under your finger.

1 Hit the wall at puzzle 3→2 Upgrade in place — no reload→3 Short celebration→4 Resume at puzzle 4

The most common way to ruin an upgrade moment is to make someone find their place again.

The hypothesis

What this concept is designed to improve.

This was a working prototype, not a production launch or a test at scale. These are the outcomes I would expect to validate rather than claim.

  • Close the loop

    Review shouldn't be the final step. The mistake becomes something the player can practise.

  • Relevance over volume

    Every puzzle comes from a position the player has already experienced.

  • Fairness over difficulty

    A difficult puzzle can still be useful. An unfair puzzle cannot.

  • An honest wall

    Free players should understand the value of the complete set before reaching the premium limit.

What I would measure

Future validation metrics for a next phase — not results from this prototype.

Primary metric

Repeat-mistake rate

Do players make fewer of the same mistakes after practising them as personalised puzzles? This is the metric that tests the core hypothesis directly.

Clean solve rate

Can players solve generated puzzles without hints or solutions?

Puzzle abandonment

Do players leave because the puzzle feels confusing, unfair, or irrelevant?

Return rate

Do players come back to solve more of their personalised puzzles?

Review → puzzle conversion

How many reviewed games produce at least one puzzle worth practising?

Reflection

What I'd refine next.

Biggest gap

Spaced repetition

The prototype builds the puzzles. It doesn't yet schedule their return — three days, a week, a month.

Comprehension

Named weaknesses

"Blunder" is a severity, not a lesson. Cluster into back rank, hanging pieces, rook endgames.

Structure

One pipeline, two views

Carry the rolling queue forward as the default, layer the diary calendar on top as a view of the same pool.

Proof

Correlate with rating

Did drilling a theme move the number? That's the claim the feature has to earn.

Create a free website with Framer, the website builder loved by startups, designers and agencies.