Create a Detailed User Flow Diagram for Your Digital Product

Design a comprehensive text-based user flow diagram with decision points, error states, and UX annotations for any digital product.

πŸ“ The Prompt

Act as a senior UX designer with expertise in interaction design and information architecture. Create a detailed user flow diagram (in text-based format) for the [FEATURE/TASK NAME] feature within [PRODUCT NAME], which is a [PRODUCT TYPE, e.g., mobile banking app, SaaS project management tool, e-commerce marketplace]. The primary user persona is [PERSONA DESCRIPTION, e.g., a 35-year-old small business owner who is moderately tech-savvy]. Please structure the user flow as follows: 1. **Entry Points:** Identify all possible ways a user can begin this flow (e.g., homepage CTA, push notification, deep link, navigation menu). List at least 3 entry points. 2. **Step-by-Step Flow:** Map out every screen or state the user encounters, formatted as a numbered sequence. For each step, include: - Screen/state name - Key UI elements visible - User action taken - System response 3. **Decision Points:** Clearly mark any branching logic where the user makes a choice (use YES/NO or OPTION A/OPTION B format). Show where each branch leads. 4. **Error States & Edge Cases:** Identify at least 4 potential error scenarios (e.g., network failure, invalid input, session timeout, permission denied) and describe the recovery flow for each. 5. **Success State:** Describe the final success screen, confirmation message, and any follow-up actions offered to the user. 6. **Exit Points:** List all points where a user might abandon the flow and suggest micro-interactions or copy nudges to reduce drop-off. 7. **Annotations:** Add UX notes on any steps that require special attention regarding accessibility, loading performance, or data privacy. Format the entire flow using arrows (β†’) and indentation so it can be easily translated into a visual diagram in tools like Figma, Miro, or FigJam.

πŸ’‘ Tips for Better Results

Specify whether the flow is for mobile, desktop, or responsiveβ€”screen constraints significantly impact the number of steps. Include business rules or constraints upfront (e.g., 'users must verify email before checkout') for more accurate flows. Use the output as a starting blueprint and iterate with your teamβ€”paste it into FigJam or Miro to collaboratively refine.

🎯 Use Cases

Perfect for UX designers, product managers, or developers who need to map out complex user journeys before prototyping, especially during sprint planning or feature scoping sessions.

πŸ”— Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

🎨 Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.

🎨 Design advanced

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.

🎨 Design advanced

Create a Detailed Component Library Specification Document

Build a comprehensive component library spec with variants, props, accessibility rules, and code examples for your design system.