Aftershow · Phase 3 · UI Design

Onboarding.

3-step first-run flow · Both themes · Three steps shown across three phone pairs
Step 1: Theme picker. Step 2: Contacts import. Step 3: Log your first show.

Step 1 — Choose Your Theme
First screen after sign-up. Theme picker with live preview. Both modes equal — not an afterthought.
Dark selected
9:41●●● ▲ ▮
Step 1 of 3
Choose your vibe.
Pick a theme. You can change it anytime in Settings.
aftershow.
Marshall Dark
✓ selected
aftershow.
Orange Vintage
✓ selected
Already have an account? Sign in
Light selected
9:41●●● ▲ ▮
Step 1 of 3
Choose your vibe.
Pick a theme. You can change it anytime in Settings.
aftershow.
Marshall Dark
✓ selected
aftershow.
Orange Vintage
✓ selected
Already have an account? Sign in
Step 2 — Find Your People
Contacts import. Framed as "find friends" not "access your contacts." Shows 3 matches found.
Dark · Prompt
9:41●●● ▲ ▮
Step 2 of 3
Find your people.
See who's already on Aftershow.
👥
Find friends on Aftershow
We'll check your contacts once to see who's already here. We don't store your contacts or show them to anyone.
Your contacts are checked locally and never uploaded.
Light · 3 Found
9:41●●● ▲ ▮
Step 2 of 3
You know people.
3 of your contacts are already on Aftershow.
3
Friends found Mimsie · xSasquatchx · Sako H.
Follow them all?
You'll see their show logs in your Friends Feed. They'll see yours once they follow back.
Step 3 — Log Your First Show
The payoff. Log any show — including From Memory. 1-show minimum before Feed unlocks. Shows the unlock moment.
Dark · Log Prompt
9:41●●● ▲ ▮
Step 3 of 3
Now tell us about a show.
Any show. Even one from 10 years ago. You don't need a ticket — just the memory.
0
shows logged
🔒
Log 1 show to unlock the Friends Feed
Light · Show Logged
9:41●●● ▲ ▮
That's it.
You're in the archive.
Your first show is logged. The Feed is yours.
Nine Inch Nails From Memory
Metro Chicago · Oct 14, 2019
★★★★★
1. Wish 2. March of the Pigs 3. Piggy + 18 more…
🔓
Friends Feed unlocked. See what Mimsie, xSasquatchx, and Sako logged.
Onboarding. Component Spec
ThemePicker (Onboarding)Molecule
PurposeFirst screen after sign-up. Signals that both themes are equal, first-class choices — not Settings afterthought.
PreviewMini mockup within each option card — shows real typography and color at micro scale
DefaultDark selected on first render — the Marshall amp reference is the brand identity
NamesMarshall Dark · Orange Vintage — amp references baked into the option names themselves
Live previewTapping an option updates the phone shell theme in real time. The whole screen switches.
ContactsImport (Onboarding)Molecule
Copy"Find your people" not "Allow contacts access" — no permission-gate language
Privacy note"Your contacts are checked locally and never uploaded" — inline, not a modal
Result stateShows match count prominently, then "Follow All" or "Choose individually"
SkipAlways skippable. This is onboarding, not a gate.
FirstShowStepOrganism
Gate1 show minimum to unlock Feed — per Phase 2 decision. Low enough to not alienate. High enough to seed value.
From MemoryProminent secondary CTA — the "I want to log old shows" path. No friction, no proof required.
Unlock momentAfter first log: 🔓 animation, personalised copy listing the 3 friends they just found. Feed becomes real.
CTA copy"Go to Feed →" (not "Get Started" or "Finish"). Destination-specific. You know what you're getting.
ProgressDotsAtomic
StatesDone (gold ring) · Active (gold fill) · Next (muted)
Count3 dots for 3 steps. Never more than 3 steps in onboarding.
Phase 3 · Screen 13 of 14 · Onboarding