Mobile · Auth · Nickname
Pick a nickname
Screen 3 of 3 (first-time users only). User has typed "MarkN" — live preview below shows exactly how that'll appear on a bar leaderboard, with their starter 500 IQ. Creates immediate investment in the choice.
Design Mechanics · Nickname
Same shell as phone/OTP — back arrow, centered wordmark, live teaser pill. User perceives 3 steps of one flow.
Headline = production copy — "Pick a nickname" matches the exact string in the live bundle. Subtext adapted: "This is what everyone sees on the leaderboard" (production says "what the bar will see" — but nicknames are visible app-wide too).
Text input with live count — "5 / 15" character limit indicator top-right. 15 chars is a reasonable cap (fits in leaderboard rows without truncation).
Real-time validation — "✓ Available" appears in green when the name is taken-test + profanity-test + length-test all pass. Other states: red ✗ "Already taken" · "Too short" · "Not allowed".
Live leaderboard preview — shows what their nickname will look like on an actual leaderboard. Their row glows purple, "—" rank because they haven't earned one yet, 500 IQ (starter gift). Creates immediate emotional investment in the name choice. Seeing "MarkN · 500" right there makes them care what they pick.
CTA is action-naming — "Start Playing →" (not "Continue" or "Submit"). Signals the next thing is playing, not more setup.
Auto-navigates to Play — after tapping CTA, user lands on
play-first-time with everything set.
Returning users skip this screen entirely — they already picked a nickname on first signup. After OTP they route directly to Play.