Vault Creation Flow #6
Description
Description
Design a multi-step wizard for creating a new vault. This is a critical flow where users lock their capital, so it must be clear, guided, and prevent errors. Users define the vault parameters, milestones, conditions, and destinations.
Target Users
- Users creating their first vault
- Experienced users creating additional vaults
- Organizations setting up team vaults
Design Requirements
Must Include:
- Step 1 - Basic Information:
- Vault name/title
- Description/purpose (optional)
- Vault type selection (Personal, Team, Grant)
- Step 2 - Capital Configuration:
- Amount to lock (USDC input)
- Available balance display
- Minimum/maximum limits
- Fee calculation preview
- Step 3 - Time Configuration:
- Start date (now or scheduled)
- End date/deadline
- Duration display (calculated)
- Calendar picker
- Timezone handling
- Step 4 - Milestone Definition:
- Add milestone(s)
- Milestone description
- Milestone type (hash-based, document, oracle, verifier approval)
- Success criteria
- Milestone weight (if multiple)
- Step 5 - Verification Setup:
- Self-verification toggle
- Assign verifier (address input)
- Verifier permissions
- Multi-verifier option
- Step 6 - Destination Configuration:
- Success destination address
- Failure destination address
- Address validation
- Confirm destinations
- Step 7 - Review & Confirm:
- Complete summary of all settings
- Edit buttons for each section
- Fee breakdown (creation fee, network fee)
- Terms agreement checkbox
- Create vault button
- Transaction Confirmation:
- Wallet signing prompt
- Transaction pending state
- Success confirmation with vault ID
- Failure handling with retry option
Should Include:
- Save as draft functionality
- Template selection (use previous vault as template)
- Progress save (auto-save between steps)
- Advanced options collapse
- Help tooltips for complex fields
- Validation warnings before submission
Design Specifications
- Wizard width: 600-800px centered
- Progress indicator: Step numbers with labels
- Input validation: Real-time feedback
- Summary: Clearly separated sections
- Mobile: Full-screen steps with swipe navigation
Deliverables
- All wizard steps (desktop and mobile)
- Form validation states
- Error states and messages
- Success confirmation screen
- Draft/template management UI
- Interactive prototype of complete flow
Designer Notes
- Users are locking real money—make every step crystal clear
- Prevent irreversible mistakes (confirmation dialogs)
- Complex fields need explanation (tooltips, info icons)
- Show running summary as users progress through steps