UI/UX Spec - The MMO Metaphor

Concept: "Guild Management Interface" Philosophy: The Group is a Party. The Treasury is Health. Governance is Quests.

The Layout (Desktop/Tablet)

Imagine a clean, modern MMORPG interface (like Valheim or Genshin Impact menus), but flat and usable for productivity.

1. The HUD (Heads-Up Display)

Always visible, overlaid on the "World View".

• Top Left (Party Status):
  • Treasury Bar: $150.00 (Shielded). Visual: Gold coins icon.
  • Reputation/Governance: "Level 3 Group" (Unlocks features?).
  • Active Members: Avatars of Joe, Sam, Tony. (Green dot = Online).
• Top Right (System Menu):
  • Settings (Gear).
  • Notifications (Bell).
• Bottom Left (Chat Log):
  • A scrolling, semi-transparent chat box.
  • Interaction: Click to expand to full "Tavern Mode" (Standard chat view).
  • Input: Quick chat always available.
• Bottom Center (Action Hotbar):
  • 1: Vote (Brings up pending proposals).
  • 2: Pay (Quick Send Venmo/Tokens).
  • 3: Map (Toggle Main View).
  • 4: Docs (Toggle Main View).
  • 5: Trade (Needs/Offers Board).
  • 6: Invite (Generate Link).

2. The "World View" (Main Stage)

This is the background layer. It changes based on context, but defaults to the most "alive" view.

• Mode: The "Market" (Needs & Offers)

  • Visual: A bulletin board or map overlay.
  • Cards:
    • 🟩 OFFER: "Extra Wetsuit (Size L)" - by Sam.
    • 🟥 NEED: "Ride to the lake" - by Joe.
  • Scope Slider: [ Group Only ] <-> [ Federation ] <-> [ Global ].
  • Interaction: "Claim", "Chat", or "Barter" (Propose a swap).

• Default: The Map (OpenMapServer)

  • Shows member locations (if shared), event pins ("Swim Here"), and resource nodes (local shops?).
  • Why: It grounds the group in reality ("irl.coop").

• Mode: The "Quest Board" (Governance)

  • A visual board of "Active Quests" (Proposals).
  • Quest: "Hire Kayaker" (Reward: Safety).
  • Progress: 2/4 Votes Cast.
  • Action: [ Vote Yes ] [ Vote No ].

• Mode: The "Inventory" (Treasury & Files)

  • Grid view of Assets:
    • [ Venmo Balance ]
    • [ Debit Card ]
    • [ Insurance Policy.pdf ]
    • [ Waiver.docx ]

3. The "Universe Navigator" (Discovery)

A 3D / Force-Directed Graph visualization of the cooperative ecosystem.

• Visuals:
  • Nodes: Groups (Size = Membership/Influence).
  • Edges: Federations, Shared Assets, or Trust Links.
  • Colors: Sectors (Green = Ag, Blue = Water, Red = Tech).
• ZK Metadata (The "Fog of War"):
  • Groups self-reveal info via Zero-Knowledge Proofs:
  • Badges: "Verified >$10k Treasury" (without revealing exact amount).
  • Badges: "100+ Active Members" (without doxxing list).
• Interaction:
  • Fly-Through: Zoom from "Global View" into "Local Neighborhood".
  • Zap: Send a paid "Vibe Check" (Tip/Message) to a group.
  • Join: Request access (if open).

4. The "Quest Log" (Side Panel - Collapsible)

• Active Objectives:
  • "Vote on Kayaker" (Ends in 2 days).
  • "Sign Waiver" (Pending).
• Completed:
  • "Funded Account" (Success).

Mobile Experience

• Portrait: Standard "Chat App" view (The Tavern).
• Landscape: Switches to "Map/HUD" view.
• "Inventory" Button: Floating Action Button (FAB) opens the radial menu for Money/Docs.

Why This Works

• Gamification: Making governance feel like a "Quest" increases participation.
• Clarity: Money isn't a spreadsheet; it's a Health Bar. If it's low, the group dies.
• Focus: The "Hotbar" limits options to the 5 things you actually do (Vote, Pay, Map, Docs, Invite).