Guild Onboarding Flow

Character creation as onboarding. Every step is its own screen, minimal and focused.

Current Flow (flat)

/signup → single form (name, email, phone, password, tier) → Stripe → "Welcome!"

Proposed Flow (character creation)

Step 1 — “Enter the Guild”

Just an email field. Big dramatic heading.

  • Magic link: “We’ll send you a scroll of verification”
  • Or password flow: email + password, verification email sent
  • Gate: no member record created yet, just email validation
  • Solves email squatting for free tier — verification before account creation

Step 2 — “Name Your Character”

  • Name (required)
  • Nickname (what shows on kiosk, dashboard, leaderboard)
  • Phone number (optional, for NFC fallback at kiosk)

Step 3 — “Choose Your Path”

Tier selection. Free tier front and center, paid tiers with benefits.

  • Free: “Apprentice” — earns 1x, no discount
  • Paid: Bronze/Silver/Gold/Mithril with escalating earn multipliers and store discounts
  • Framed as a choice, not a paywall

Step 4 — Payment (paid tiers only)

Stripe Checkout. Member record created after email verification, with nickname already set.

Step 5 — “Your Adventure Begins”

Character sheet reveal:

  • Name, tier badge, Level 1, 0 XP
  • Empty XP bar (motivating)
  • Class shows “Adventurer” (no class yet)
  • “Visit the guild hall to earn your first XP”
  • Link to dashboard

Class Unlock — MapleStory Style

Class is NOT chosen at signup. New members start classless (“Adventurer”). Class selection unlocks as a milestone on the dashboard when they hit the required level.

Why

  • MapleStory unlocks jobs at level 10. The tutorial IS the journey to your first job.
  • Gives members a goal from day one — “reach Level N to choose your class”
  • The class selection screen becomes a reward, not a form field
  • Members who earn their class feel ownership over it

When to Unlock

Using the BECMI Fighter XP curve, here’s what each level costs in real activity:

LevelCumulative XPBronze (1x) spendGold (2x) spendVisits only
22,000$20$1020
34,000$40$2040
516,000$160$80160
10360,000$3,600$1,8003,600

XP sources: 100 XP per check-in (4hr cooldown), 1 XP per cent spent × tier multiplier.

Level 3 (4,000 XP) is the sweet spot:

  • Achievable in 1–2 weeks of normal activity (a few visits + a purchase or two)
  • Early enough to sustain engagement during the critical first-week window
  • Late enough that it feels earned, not given away

Level 5 is an option if you want more weight, but risks members never reaching it — especially free tier.

Dashboard UX

  • Before unlock: XP bar shows progress toward Level 3. Class badge says “Adventurer”. Subtle prompt: “Reach Level 3 to choose your class.”
  • At unlock: Full-screen class selection overlay. Cards with art, flavor text, and class fantasy. This is the screenshot-and-share moment. Confetti optional.
  • After unlock: Class badge on character sheet, kiosk display, leaderboard. Can be changed later (cooldown or one free respec).

Why This Order

  • Email first — verification before member creation. Prevents email squatting on free tier.
  • Identity before payment — by the time they see pricing, they’ve invested in their character (name). Sunk cost works in your favor.
  • Class as milestone — not a signup decision but a reward. Drives early engagement.
  • The reveal — character sheet at the end makes it feel like something was created, not just purchased.

Technical Shape

Multi-step form on a single /join route (client-side state machine). No page loads between steps, animated transitions. Member record created in one shot after tier selection / Stripe confirmation. Everything before that is client-side state — no orphan records from abandoned signups.

Auth Strategy

Magic link is the ideal auth for this flow. Email verification IS the first step, not a separate chore. Payload supports custom auth strategies that can implement magic link. Password login can be offered later as a convenience in the dashboard.

See also: guild-portal-ui-implementation, membership-platform, rpg-loyalty-system-design