CR8 Platform

Appearance

Agent L3 Screen Flows & User Journeys ​

Complete User Flow Diagrams ​

Flow 1: Agent Creator Journey ​

1.1 First-Time Creator Flow ​

┌─────────────┐
│ Main Website│
│   Homepage   │
└──────┬──────┘
       │
       │ Clicks "Create Agent"
       ▼
┌─────────────────┐
│ Agent Creator   │
│   Landing       │
└──────┬──────────┘
       │
       │ Clicks "Get Started"
       ▼
┌─────────────────┐
│ Connect Wallet  │
│   Modal         │
└──────┬──────────┘
       │
       │ Wallet Connected
       ▼
┌─────────────────┐
│ Step 1: Basic   │
│   Information   │
└──────┬──────────┘
       │
       │ Fills form, clicks "Next"
       ▼
┌─────────────────┐
│ Step 2: Select  │
│   Integrations  │
└──────┬──────────┘
       │
       │ Selects integrations, clicks "Next"
       ▼
┌─────────────────┐
│ Step 3: Config  │
│   Integrations  │
└──────┬──────────┘
       │
       │ Configures, clicks "Next"
       ▼
┌─────────────────┐
│ Step 4: Review  │
│   & Deploy      │
└──────┬──────────┘
       │
       │ Reviews, clicks "Deploy"
       ▼
┌─────────────────┐
│ Transaction     │
│   Confirmation  │
└──────┬──────────┘
       │
       │ Confirms in wallet
       ▼
┌─────────────────┐
│ Transaction     │
│   Pending       │
└──────┬──────────┘
       │
       │ Waits for confirmation
       ▼
┌─────────────────┐
│ Success!        │
│   Agent Created │
└──────┬──────────┘
       │
       │ Clicks "View Agent"
       ▼
┌─────────────────┐
│ Agent Detail    │
│   Page          │
└─────────────────┘

1.2 Returning Creator Flow ​

┌─────────────┐
│ Main Website│
└──────┬──────┘
       │
       │ Clicks "Creator App"
       ▼
┌─────────────────┐
│ Creator         │
│   Dashboard     │
│                 │
│ [My Agents]     │
│ [Create New]    │
└──────┬──────────┘
       │
       │ Selects existing agent
       ▼
┌─────────────────┐
│ Agent Config    │
│   Dashboard     │
│                 │
│ [Edit] [Test]   │
│ [Deploy Update] │
└─────────────────┘

Flow 2: Agent Investor Journey ​

2.1 Discovery & Investment Flow ​

┌─────────────┐
│ Main Website│
│   Homepage  │
└──────┬──────┘
       │
       │ Clicks "Browse Agents"
       ▼
┌─────────────────┐
│ Agent Registry  │
│   (Investor App)│
└──────┬──────────┘
       │
       │ Searches/filters
       ▼
┌─────────────────┐
│ Filtered        │
│   Results       │
└──────┬──────────┘
       │
       │ Clicks agent card
       ▼
┌─────────────────┐
│ Agent Detail    │
│   Page          │
└──────┬──────────┘
       │
       │ Reviews agent
       │ Clicks "Provide Liquidity"
       ▼
┌─────────────────┐
│ Liquidity Modal │
└──────┬──────────┘
       │
       │ Enters amount
       │ Sees ownership preview
       │ Clicks "Deposit"
       ▼
┌─────────────────┐
│ Transaction     │
│   Confirmation  │
└──────┬──────────┘
       │
       │ Confirms in wallet
       ▼
┌─────────────────┐
│ Success!        │
│   Liquidity     │
│   Provided      │
└──────┬──────────┘
       │
       │ Redirects to portfolio
       ▼
┌─────────────────┐
│ Portfolio       │
│   Dashboard     │
└─────────────────┘

2.2 Portfolio Management Flow ​

┌─────────────────┐
│ Portfolio       │
│   Dashboard     │
└──────┬──────────┘
       │
       │ Views holdings
       │ Sees pending rewards
       │ Clicks "Claim Rewards"
       ▼
┌─────────────────┐
│ Claim Rewards   │
│   Confirmation  │
└──────┬──────────┘
       │
       │ Confirms transaction
       ▼
┌─────────────────┐
│ Rewards Claimed │
│   Success       │
└─────────────────┘

Flow 3: CR8 Staker Journey ​

3.1 Staking Flow ​

┌─────────────┐
│ Main Website│
└──────┬──────┘
       │
       │ Clicks "Stake CR8"
       ▼
┌─────────────────┐
│ Staking Page    │
└──────┬──────────┘
       │
       │ Views current stake
       │ Clicks "Stake" tab
       │ Enters amount
       │ Clicks "Stake CR8"
       ▼
┌─────────────────┐
│ Approve Token   │
│   (if needed)   │
└──────┬──────────┘
       │
       │ Approves in wallet
       ▼
┌─────────────────┐
│ Stake Tokens    │
│   Transaction   │
└──────┬──────────┘
       │
       │ Confirms
       ▼
┌─────────────────┐
│ Staking         │
│   Success       │
└─────────────────┘

3.2 Claim Rewards Flow ​

┌─────────────────┐
│ Staking Page    │
└──────┬──────────┘
       │
       │ Sees pending rewards
       │ Clicks "Claim Rewards"
       ▼
┌─────────────────┐
│ Claim Rewards   │
│   Transaction   │
└──────┬──────────┘
       │
       │ Confirms
       ▼
┌─────────────────┐
│ Rewards Claimed │
└─────────────────┘

Flow 4: Agent Operator Journey ​

4.1 Monitoring Flow ​

┌─────────────┐
│ Main Website│
└──────┬──────┘
       │
       │ Clicks "Operator App"
       ▼
┌─────────────────┐
│ Operator        │
│   Dashboard     │
└──────┬──────────┘
       │
       │ Selects agent
       ▼
┌─────────────────┐
│ Agent Control   │
│   Panel         │
└──────┬──────────┘
       │
       │ Monitors activity
       │ Views metrics
       │ Checks integration status
       │
       │ Sees fees collected
       │ Clicks "Collect Fees"
       ▼
┌─────────────────┐
│ Collect Fees    │
│   Transaction   │
└──────┬──────────┘
       │
       │ Confirms
       ▼
┌─────────────────┐
│ Fees Collected  │
│   Success       │
└─────────────────┘

Flow 5: Error & Edge Case Flows ​

5.1 Transaction Failure Flow ​

┌─────────────────┐
│ Transaction     │
│   Pending       │
└──────┬──────────┘
       │
       │ Transaction fails
       ▼
┌─────────────────┐
│ Error Message   │
│                 │
│ "Transaction    │
│  failed. Please │
│  try again."    │
│                 │
│ [Retry] [Cancel]│
└─────────────────┘

5.2 Insufficient Balance Flow ​

┌─────────────────┐
│ Liquidity Modal │
└──────┬──────────┘
       │
       │ Enters amount > balance
       │ Clicks "Deposit"
       ▼
┌─────────────────┐
│ Error:          │
│   Insufficient  │
│   Balance       │
│                 │
│ Available: 0.5 ETH│
│                 │
│ [Adjust Amount] │
└─────────────────┘

5.3 Wallet Not Connected Flow ​

┌─────────────────┐
│ Agent Registry  │
└──────┬──────────┘
       │
       │ Tries to provide liquidity
       │ Wallet not connected
       ▼
┌─────────────────┐
│ Connect Wallet  │
│   Prompt        │
│                 │
│ "Please connect │
│  your wallet to │
│  continue"      │
│                 │
│ [Connect Wallet]│
└─────────────────┘

Flow 6: Cross-App Navigation ​

6.1 Main Website → Apps ​

Main Website
    │
    ├─→ Agent Creator App
    │   └─→ Creator Dashboard
    │
    ├─→ Agent Operator App
    │   └─→ Operator Dashboard
    │
    ├─→ Agent Investor App
    │   ├─→ Registry
    │   ├─→ Portfolio
    │   └─→ Staking
    │
    └─→ Documentation
        └─→ Docs Pages

6.2 App-to-App Navigation ​

Creator App
    │
    └─→ "View on Registry" → Investor App (Agent Detail)

Operator App
    │
    └─→ "View Public Page" → Investor App (Agent Detail)

Investor App
    │
    ├─→ "Create Agent" → Creator App
    └─→ "Operate Agent" → Operator App (if owner)

Screen State Transitions ​

Loading States ​

Empty State
    │
    │ User action
    ▼
Loading State (Skeleton)
    │
    │ Data loads
    ▼
Content State

Form States ​

Empty Form
    │
    │ User types
    ▼
Filling Form
    │
    │ Validates
    ▼
Valid Form → Submit → Processing → Success/Error

Transaction States ​

Action Button
    │
    │ Click
    ▼
Transaction Pending
    │
    │ Wallet confirmation
    ▼
Transaction Confirming
    │
    │ Block confirmation
    ▼
Transaction Success/Error

User Journey Maps ​

Creator Journey Map ​

Awareness → Interest → Consideration → Action → Retention
    │         │            │            │          │
    │         │            │            │          │
    │         │            │            │          └─→ Use dashboard
    │         │            │            │              Monitor agent
    │         │            │            │              Update config
    │         │            │            │
    │         │            │            └─→ Deploy agent
    │         │            │                 Register
    │         │            │
    │         │            └─→ Learn about platform
    │         │                 Review features
    │         │                 Check integrations
    │         │
    │         └─→ Visit website
    │              Explore docs
    │              See examples
    │
    └─→ Discover Agent L3
         Marketing
         Word of mouth

Investor Journey Map ​

Discovery → Research → Invest → Monitor → Optimize
    │         │          │         │          │
    │         │          │         │          └─→ Rebalance
    │         │          │         │              Claim rewards
    │         │          │         │
    │         │          │         └─→ Track performance
    │         │          │              View earnings
    │         │          │              Check portfolio
    │         │          │
    │         │          └─→ Provide liquidity
    │         │                 Stake CR8
    │         │                 Make investment
    │         │
    │         └─→ Browse agents
    │              Compare metrics
    │              Read details
    │              Check integrations
    │
    └─→ Find platform
         Registry
         Marketing

Key Interaction Patterns ​

Trigger: Button click, link click Behavior: Overlay appears, focus trap, ESC to close States: Open, closing, closed

Form Patterns ​

Multi-step: Progress indicator, back/next navigation Validation: Real-time or on blur Submission: Loading state, success/error feedback

List Patterns ​

Pagination: Page numbers or "Load More" Infinite Scroll: Auto-load on scroll Filtering: Instant or debounced

Card Patterns ​

Hover: Subtle elevation, border change Click: Navigate to detail page Selection: Checkbox for bulk actions

Persistent: Header on all pages Sticky: Stays at top on scroll Responsive: Collapses to menu on mobile

Local Navigation ​

Sidebar: For app sections Tabs: For related content Breadcrumbs: For deep hierarchies

Contextual Navigation ​

Back Button: Return to previous page Related Links: Suggest next actions Quick Actions: Floating action button (mobile)

Error Handling Patterns ​

Form Errors ​

  • Inline error messages
  • Field-level validation
  • Summary at top (if multiple errors)

Transaction Errors ​

  • Clear error message
  • Suggested actions
  • Retry option
  • Support link

Network Errors ​

  • Retry button
  • Offline indicator
  • Cached data display

Success Patterns ​

Transaction Success ​

  • Success message
  • Transaction link
  • Next action CTA
  • Auto-dismiss toast

Form Success ​

  • Success state
  • Confirmation message
  • Redirect or next step

This flow document provides complete user journey maps and interaction patterns. Use these to ensure consistent UX across all applications.

CR8 Platform Documentation

Copyright © 2024 CR8 Platform