Dialed·Lab

The Post-Game Problem

After a solo game, the player has a score and an emotional reaction. Right now two things compete for attention: entering a name for the leaderboard and... nothing else. The challenge/share mechanic doesn't exist yet.

The question: how do we present two paths — "See where you rank" and "Challenge your friends" — without cluttering the clean total screen? These 12 treatments explore that tension at the pixel level, respecting the game's 30px grid, typography, and spacing.

1. Two Paths, Equal Weight

Leaderboard and Challenge are presented as peers. The player chooses. These treatments assume the name input is above and doesn't collide with the path zone.

A1 — Side-by-side buttons
EXPLORE
45.72/50
You could calibrate screens for a living.
Saved!
Made by the designers at Lightspark
Two equal buttons. "Challenge friends" is filled (primary). "High scores" is ghost. Clear fork. Risk: two CTAs = decision fatigue. The go-arrow button is removed — these replace it.
A2 — Stacked pills
EXPLORE
45.72/50
You could calibrate screens for a living.
Saved!
Made by the designers at Lightspark
Vertical stack. Challenge is the primary (filled). High scores is secondary (outline). Clear hierarchy. Arrows reinforce navigation. Uses the space between name entry and credit bar cleanly.
A3 — Split footer bar
STRONG
45.72/50
You could calibrate screens for a living.
Saved!
Replaces the credit bar with two equal-width actions. Clean. Systematic. No collision with name entry since it's at the very bottom. Go-arrow is removed — the right half IS the forward action. Credit moves to intro screen only.
A4 — Stacked text links
STRONG
45.72/50
You could calibrate screens for a living.
Saved!
Made by the designers at Lightspark
Minimal footprint. Two text-only links in the dead zone between name entry and credit. Challenge is white (primary), high scores is muted. The go-arrow stays for "play again." Lightest possible treatment that still offers both paths.

2. Challenge-Forward

These prioritize the challenge/share path. The leaderboard is still accessible but secondary — either through the existing trophy button on intro, or through a smaller link. The bet: challenges drive more growth than leaderboard views.

B1 — Share link row (after name save)
STRONG
45.72/50
You could calibrate screens for a living.
Saved!
Challenge others with this round
colormatching.vercel.app/?c=K8M3PQ
Made by the designers at Lightspark
The link is already there. Visible. Tangible. "This URL exists — just copy it." Matches the multiplayer setup screen's link row. Challenge is created lazily when link is first tapped. Go-arrow = play again.
B2 — Woven into description
EXPLORE
45.72/50
You could calibrate screens for a living. See if your friends can beat it.
Saved!
Made by the designers at Lightspark
Zero extra UI. The description text does double duty — it's editorial AND a CTA. The link text changes based on score. Underline makes it tappable. But it's easy to miss, especially on mobile.
B3 — Post-name nudge
STRONG
45.72/50
You could calibrate screens for a living.
Ranked #12. Challenge friends to beat your 45.72
Made by the designers at Lightspark
Appears only after name is saved. "Ranked #12" validates them AND links to leaderboard context. The challenge link is a natural follow-up. Both paths in one line. Extremely compact. The ranking creates competitive fuel.
B4 — Single smart button
EXPLORE
45.72/50
You could calibrate screens for a living.
Saved!
Challenge friends
or see high scores
Made by the designers at Lightspark
One filled button for the primary path. Leaderboard is a tiny text link beneath. Go-arrow is removed — this button IS the forward action. Clear hierarchy: challenge > leaderboard > play again (use back button).

3. Ranking-Forward

These lead with "you ranked #XX" — using the competitive ranking as the hook that drives both leaderboard views AND challenge creation. "You're #12. Can your friends beat that?" The ranking is the emotional trigger.

C1 — Rank headline + fork
RECOMMENDED
45.72/50
You ranked #12 of 847
You could calibrate screens for a living.
Saved!
Made by the designers at Lightspark
The ranking appears below the score. It's the first thing they process after the number. Then the description. Then the name entry. Then the two paths — both referencing the rank. "Challenge friends to beat #12" is more motivating than generic "Challenge friends." Go-arrow = play again.
C2 — Rank in description + nudge
RECOMMENDED
45.72/50
You ranked #12 of 847. You could calibrate screens for a living.
See high scores · Challenge friends
Made by the designers at Lightspark
Ranking woven into the description naturally. Two terse links after name save, separated by a dot. Ultra-compact. Everything is in its natural position — nothing repositioned or floating. The go-arrow stays for play again.
C3 — Rank + visible challenge link
STRONG
45.72/50
You ranked #12 of 847 — see leaderboard
You could calibrate screens for a living.
Saved!
Think your friends can beat #12?
colormatching.vercel.app/?c=K8M3PQ
Made by the designers at Lightspark
Ranking line has inline "see leaderboard" link. Challenge link row at bottom with personalized copy. Both paths present, neither competing. The ranking fuels the challenge text: "Think your friends can beat #12?" is much stronger than "Challenge friends."
C4 — Rank IS the description
EXPLORE
45.72/50
#12 of 847 players. That puts you in the top 2%.
See leaderboard · Challenge friends to beat you
Made by the designers at Lightspark
The sassy description is replaced by rank-focused copy. "Top 2%" is powerful social proof. The description becomes data-driven instead of humorous. Trade-off: lose the personality of the current descriptions. Could combine both: rank first, then personality.

4. Progressive Disclosure Sequence

Regardless of treatment, the total screen reveals content over time. This section explores the timing and sequence of reveals. The principle: each step earns the next.

Step 1: Score animates (0–2s)

Number climbs from 0 to final score. This is the hero moment. Nothing else visible yet. Pure emotional impact.

Step 2: Description fades in (~2s)

Sassy text appears. If ranking is woven in, it appears here too: "You ranked #12. You could calibrate screens for a living." Two pieces of info, one moment.

Step 3: Name entry appears (~2.5s)

Input field fades in. Keyboard opens on mobile. This is the current behavior. Player types their name and hits enter.

Step 4: Post-name state (~on save)

"Saved!" confirmation. Then the two paths appear: leaderboard and challenge. This is the fork. The player has committed (name saved) and is now ready for the next action.

Alternative: Auto-save

Remember the last name used (localStorage). Pre-fill and auto-save. The name input still appears (editable) but the paths appear immediately without waiting for manual save. Reduces friction for repeat players.

RECOMMENDED

Alternative: No name for challenge

If the player skips name entry (score below threshold, or they dismiss it), the challenge path should still be available. The challenge link works with "Anon" as the creator name.

MUST HAVE

5. The Ranking Question

Showing "You ranked #12 of 847" requires fetching the leaderboard count and finding where the score falls. This is a query we don't currently make on the total screen. Worth it?

Fetch cost

One Supabase query: SELECT count(*) FROM leaderboard WHERE score >= [their score]. Returns their rank position. Fast query, small payload. Could run in parallel with score animation.

LOW COST

What if they don't qualify?

If score is below QUALIFY_THRESHOLD (currently 30), they don't enter the leaderboard. We could still show "You scored higher than X% of players" using the total count vs. their position. Or skip ranking entirely for low scores.

Ranking drives challenge sharing

"Challenge friends to beat #12" is significantly more motivating than "Challenge friends." The number is concrete. It creates a target. It turns the abstract act of sharing into a specific competitive claim.

HIGH VALUE

Ranking drives leaderboard views

"You ranked #12" immediately makes people curious: "Who's #1? Who's #11?" The ranking creates a pull toward the leaderboard that doesn't exist today. Currently, most players never see the leaderboard.

6. Recommendation

Based on the exploration above, the strongest direction combines ranking with both paths in a clean, progressive reveal.

Best treatment: C1 or C2

Lead with the ranking. Use it as fuel for both the leaderboard link and the challenge CTA. C1 (rank headline + stacked links) gives more visual prominence. C2 (rank in description + dot-separated links) is more compact.

RECOMMENDED

Fallback if ranking is too complex: A4 + B3

Stacked text links (A4) with the post-name nudge (B3). No ranking query needed. Still offers both paths. Lighter engineering lift. Can add ranking later.

ALTERNATIVE

Must-do regardless: remember last name

Store the player's name in localStorage. Pre-fill on subsequent plays. Auto-save after a brief delay. This removes the biggest friction point before the share/challenge moment.

EASY WIN

Must-do regardless: challenge below threshold

Even if a player scores below 30 (no leaderboard entry), they should still be able to create a challenge. The challenge path should not depend on qualifying for the leaderboard.

EASY WIN

This study explores 12 treatments across 3 strategic directions, plus flow timing, ranking integration, and progressive disclosure. No code has been written for any of these. The existing "Challenge friends" pill button from the previous attempt is still in the codebase and should be removed before implementing a chosen direction.