Guild Portal UI Mockups
ASCII wireframes for the member portal redesign. The core concept: this is a character sheet, not a dashboard.
Five pages, each with a clear purpose:
Character Sheet · Adventure Log · Quest Log · Rewards · Guild Hall
1. Character Sheet (Home)
The primary view when a member logs in. Identity and progression at a glance.
┌─────────────────────────────────────────────────────────────────┐
│ ⚔ DUNGEON BOOKS GUILD Character Sheet ◆ Quest Log │
│ Adventure Log ◆ Rewards │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ PANAT "VOID" │
│ │ │ Fighter · Level 7 · Law │
│ │ ( ◠ ) │ ───────────────────────────────────────────── │
│ │ /│││\ │ XP ████████████████████░░░░░░ 82,000 / 120,000 │
│ │ │ ▲ 38,000 XP to Level 8 │
│ └─────────┘ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ GOLD TIER │ │ POINTS │ │
│ │ 2x Multiplier│ │ 1,500 ($15) │ │
│ │ 20% Store │ │ │ │
│ │ 15% Events │ │ [Spend →] │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ┌─── STATS ────────────────────────────────────────────────┐ │
│ │ Purchases: 47 Visits: 23 Member Since: Mar 2026 │ │
│ │ Quests: 5/12 Events: 8 Streak: 🔥 3 weeks │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌─── RECENT ACTIVITY ──────────────────────────────────────┐ │
│ │ ● +500 XP Purchased "Dungeon Crawler Carl #3" 2h ago │ │
│ │ ● +100 XP Daily check-in Today │ │
│ │ ● +1,000 XP D&D Night attendance Yesterday │ │
│ │ [View full log →] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌─── ACTIVE QUESTS ────────────────────────────────────────┐ │
│ │ ◇ Visit 3 events this month 2/3 [Uncommon] │ │
│ │ ◇ Recommend a book to a friend 0/1 [Common] │ │
│ │ ◇ Draw your character 0/1 [Rare] │ │
│ │ [View all quests →] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key decisions:
- XP bar is the dominant element — progression is the product
- Points always show dollar equivalent (“1,500 ($15)”)
- Recent activity and active quests give reasons to come back
- Stats are compact, not 6 separate cards
- Character identity (class, level, faction) is immediate
2. Adventure Log
Chronological feed of all activity, grouped by month, filterable by type.
┌─────────────────────────────────────────────────────────────────┐
│ ⚔ DUNGEON BOOKS GUILD Adventure Log │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Filter: [All ▾] [Purchases] [Check-ins] [Quests] [Events] │
│ │
│ ── April 2026 ────────────────────────────────────────────── │
│ │
│ APR 3 ● PURCHASE +500 XP +500p │
│ │ Dungeon Crawler Carl #3 $12.99 │
│ │ The Goblin Emperor $8.99 │
│ │ Base: 2,198 pts × 2.0 (Gold) = 4,396 pts │
│ │ │
│ APR 3 ◆ CHECK-IN +100 XP │
│ │ Daily visit · NFC tap │
│ │ │
│ APR 2 ★ EVENT +1,000 XP │
│ │ D&D Night — "Tomb of the Serpent Kings" │
│ │ Streak: 4th consecutive D&D Night! +500 XP bonus │
│ │ │
│ APR 1 ◇ QUEST COMPLETE +1,500 XP │
│ │ "Attend 3 events this month" [Uncommon] │
│ │ Approved by Carrie │
│ │ │
│ ── March 2026 ────────────────────────────────────────────── │
│ │
│ MAR 31 ● PURCHASE +200 XP +200p │
│ │ Cyberpunk RED Core Rulebook $49.99 │
│ │ │
│ MAR 29 ▲ LEVEL UP! Level 6 → 7 │
│ │ 🎉 "The quest continues..." │
│ │ │
│ MAR 28 ◆ CHECK-IN +100 XP │
│ │ Daily visit · NFC tap │
│ │ │
│ [Load more ↓] │
│ │
└─────────────────────────────────────────────────────────────────┘
Key decisions:
- Grouped by month, not flat list
- Filterable by type (purchases, check-ins, quests, events)
- Level-up moments are first-class entries in the timeline
- Streak bonuses are visible inline
- Quest completions show who approved them (the DM)
- XP and points shown separately (XP permanent, points spendable)
3. Quest Log
Active, available, and completed quests. The core engagement loop.
┌─────────────────────────────────────────────────────────────────┐
│ ⚔ DUNGEON BOOKS GUILD Quest Log │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [Active] [Available] [Completed] │
│ │
│ ── ACTIVE QUESTS (3) ─────────────────────────────────────── │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ◇ Visit 3 events this month [Uncommon] │ │
│ │ ██████████████░░░░░░░ 2 / 3 │ │
│ │ Reward: 1,500 XP │ │
│ │ Expires: Apr 30 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ◇ Recommend a book to a friend [Common] │ │
│ │ ░░░░░░░░░░░░░░░░░░░░ 0 / 1 │ │
│ │ Reward: 500 XP │ │
│ │ Permanent quest · Submit in Discord │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ◇ Draw your character [Rare] │ │
│ │ ░░░░░░░░░░░░░░░░░░░░ 0 / 1 │ │
│ │ Reward: 3,000 XP │ │
│ │ Permanent quest · Submit in Discord │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ── AVAILABLE QUESTS ──────────────────────────────────────── │
│ │
│ WEEKLY │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ○ Buy a book you've never heard of [Common] │ │
│ │ Reward: 500 XP Resets: Mon [Accept] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ SEASONAL — Spring 2026 │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ○ Read a book outdoors and photograph it [Uncommon] │ │
│ │ Reward: 1,500 XP Until: Jun 1 [Accept] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key decisions:
- Three tabs: Active (accepted, in progress), Available (can accept), Completed (history)
- Progress bars on active quests
- Rarity badges (Common/Uncommon/Rare/Very Rare/Legendary) with D&D item color coding
- Expiration and reset info visible
- “Submit in Discord” directs to the social loop
- Available quests grouped by rotation type (weekly, seasonal, permanent)
4. Rewards / Inventory
What you’ve earned and what you can spend points on.
┌─────────────────────────────────────────────────────────────────┐
│ ⚔ DUNGEON BOOKS GUILD Rewards │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Points: 1,500 ($15.00) │
│ │
│ [My Inventory] [Rewards Shop] │
│ │
│ ── MY INVENTORY ──────────────────────────────────────────── │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 🎭 │ │ 🔮 │ │ 🏷️ │ │ │ │
│ │ Fighter │ │ Law │ │ Guild │ │ │ │
│ │ Discord │ │ Faction │ │ Sticker │ │ Empty │ │
│ │ Role │ │ Discord │ │ Pack │ │ Slot │ │
│ │ │ │ Role │ │ │ │ │ │
│ │ Equipped │ │ Equipped │ │ Claimed │ │ │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ── REWARDS SHOP ──────────────────────────────────────────── │
│ │
│ DIGITAL │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 💀 │ │ 🐉 │ │ 🎵 │ │
│ │ Undead │ │ Dragon │ │ Custom │ │
│ │ Slayer │ │ Hoarder │ │ Kiosk │ │
│ │ Discord │ │ Discord │ │ Sound │ │
│ │ │ │ │ │ │ │
│ │ 5,000 pts│ │ 10,000 p │ │ 15,000 p │ │
│ │ ($5) │ │ ($10) │ │ ($15) │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ PHYSICAL │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 👜 │ │ 👕 │ │ 💰 │ │
│ │ Guild │ │ Guild │ │ $10 │ │
│ │ Tote Bag │ │ T-Shirt │ │ Store │ │
│ │ │ │ │ │ Credit │ │
│ │ │ │ │ │ │ │
│ │ 50,000 p │ │ 100,000p │ │ 10,000 p │ │
│ │ ($50) │ │ ($100) │ │ ($10) │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key decisions:
- Points balance always visible with dollar equivalent
- Two tabs: Inventory (owned) and Shop (available)
- Inventory items show status (Equipped, Claimed, etc.)
- Shop items show point cost with dollar equivalent
- Grouped by Digital (zero fulfillment) vs Physical
- Empty inventory slots create aspiration
5. Guild Hall (Tiers)
Tier comparison with real value math based on the member’s actual spending.
┌─────────────────────────────────────────────────────────────────┐
│ ⚔ DUNGEON BOOKS GUILD Guild Hall │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Your Rank: GOLD [Manage Subscription] │
│ │
│ ┌──────────────┬──────────────┬──────────────┬──────────────┐ │
│ │ BRONZE │ SILVER │ ► GOLD ◄ │ MITHRIL │ │
│ │ $10/mo │ $20/mo │ $50/mo │ $100/mo │ │
│ │ │ │ │ │ │
│ │ 1x XP │ 1.5x XP │ 2x XP │ 3x XP │ │
│ │ — Store │ 10% Store │ 20% Store │ 25% Store │ │
│ │ 10% Events │ 10% Events │ 15% Events │ 50% Events │ │
│ │ │ │ │ │ │
│ │ │ │ ──────── │ │ │
│ │ │ │ You are │ │ │
│ │ │ │ here │ │ │
│ │ │ │ │ [Upgrade] │ │
│ └──────────────┴──────────────┴──────────────┴──────────────┘ │
│ │
│ ── WHAT YOUR TIER GETS YOU ───────────────────────────────── │
│ │
│ This month with Gold: │
│ • Earned 4,396 XP from purchases (2,198 base × 2.0) │
│ • Saved $12.40 on store purchases (20% off) │
│ • Saved $8.00 on event tickets (15% off) │
│ • Total value this month: $70.40 │
│ • Tier cost: $50.00 │
│ • Net benefit: +$20.40 ✓ │
│ │
│ ── WITH MITHRIL YOU WOULD HAVE ───────────────────────────── │
│ │
│ • Earned 6,594 XP (3x instead of 2x) │
│ • Saved $15.50 on store (25% instead of 20%) │
│ • Saved $26.67 on events (50% instead of 15%) │
│ • Total value: $92.17 │
│ • Tier cost: $100.00 │
│ • Net benefit: -$7.83 — not worth it yet │
│ │
└─────────────────────────────────────────────────────────────────┘
Key decisions:
- Horizontal tier comparison (progression path, not isolated cards)
- Current tier highlighted with marker
- Real value math based on actual spending data
- “What if” comparison with next tier up
- Honest about when upgrade isn’t worth it (builds trust)
- Upgrade button only on tiers above current
Design Principles
- Character sheet, not dashboard — every element reinforces that this is a game
- XP bar is king — the primary visual element on every page
- Points always show dollar value — transparency builds trust
- No dark patterns — show when upgrades aren’t worth it, never hide information
- Social hooks — quest submissions route to Discord, not a form
- Progressive density — Character Sheet is the summary, other pages go deep
- Level-up moments are events — they appear in the timeline, not just a number change
- Rarity language everywhere — Common/Uncommon/Rare/Very Rare/Legendary for quests, rewards, achievements
Related
- guild-portal-ui-implementation — build plan for these mockups
- guild-visual-direction — cassette futurism aesthetic
- rpg-loyalty-system-creative-direction — Neopets/RuneScape feel
- dungeon-club-game-design-document — full game design document