User Flow Mapping

Prompt

Create a comprehensive user flow for [task/feature]. Include:

1. Flow Overview
   - Primary user goal
   - Entry points
   - Success criteria
   - Key personas

2. Step-by-Step Flow
   - Each step in the user journey
   - User actions at each step
   - System responses
   - Decision points and branches
   - Error states and recovery paths

3. Interaction Details
   - UI elements involved
   - Required inputs
   - Validation points
   - Feedback mechanisms

4. Edge Cases
   - Alternative paths
   - Error scenarios
   - Empty states
   - Offline/error handling

5. Visual Flow Diagram
   - Flowchart notation
   - Decision diamonds
   - Process rectangles
   - Start/end points

Format as a detailed user flow document with visual representation.

How to use

1. 1Replace [page/screen name] with your specific screen (e.g., "User Dashboard", "Checkout Process", "Onboarding Flow")
2. 2Add context about the feature: Before the prompt, describe the user goal and key interactions. Example: "This is a checkout flow. Users need to: add items, enter shipping info, select payment, confirm order."
3. 3If you have reference flows: Upload screenshots of similar user flows or competitor flows. Say "Create a flow similar to Stripe's checkout but for our product"
4. 4Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
5. 5Review the generated wireframe: The AI will create a detailed layout structure with annotations
6. 6Ask for variations: Request "mobile layout version" or "alternative layout for smaller screens"
7. 7Export or refine: Use the wireframe as a blueprint for Figma designs or ask for more detailed specifications