Generate user flow diagrams from plain-language scenarios
Views
454
Copies
108
Likes
59
Comments
0
Copy rate
23.8%
Prompt
Act as a senior UX researcher. Convert the following user scenario into a complete user flow diagram described in Mermaid syntax, plus a companion narrative explaining each decision point, happy path, and failure branch.
Product: [product_name]
Scenario: [scenario_description]
Include:
1. The Mermaid flowchart (top to bottom, LR where helpful)
2. A narrative walkthrough of the happy path
3. At least three failure or edge-case branches
4. Entry and exit criteria for the flow
5. Measurable success metrics for each critical step
6. Opportunities where micro-interactions or feedback could reduce friction
Make the diagram specific enough that an engineer could implement it without asking follow-up questions.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Act as a senior UX researcher. Convert the following user scenario into a complete user flow diagram described in Mermaid syntax, plus a companion narrative explaining each decision point, happy path, and failure branch.
Product: [product_name]
Scenario: [scenario_description]
Include:
1. The Mermaid flowchart (top to bottom, LR where helpful)
2. A narrative walkthrough of the happy path
3. At least three failure or edge-case branches
4. Entry and exit criteria for the flow
5. Measurable success metrics for each critical step
6. Opportunities where micro-interactions or feedback could reduce friction
Make the diagram specific enough that an engineer could implement it without asking follow-up questions.
Example output
# User Flow: First-Time Checkout — Modella (D2C Fashion)
## Entry Criteria
- User has added at least one item to cart
- User is on any product, cart, or category page
- User is not already in an active checkout session
## Exit Criteria (Success)
- Order is created in Postgres with status `paid`
- Confirmation email is queued
- User lands on `/order-confirmation/:orderId`
## Mermaid Diagram
```mermaid
flowchart TD
A[User clicks Cart] --> B{Cart has items?}
B -- No --> B1[Show empty cart state] --> Z1((Exit: browse))
B -- Yes --> C[Cart review screen]
C --> D[Click Checkout]
D --> E{Logged in?}
E -- No --> E1[Guest checkout or sign in prompt]
E1 --> E2{Choose path}
E2 -- Guest --> F[Enter email]
E2 -- Sign in --> E3[Login modal] --> F
E -- Yes --> F
F --> G[Shipping address]
G --> H{Address valid?}
H -- No --> H1[Inline error, keep data] --> G
H -- Yes --> I[Shipping method]
I --> J[Payment details]
J --> K{Payment authorized?}
K -- No --> K1[Show decline reason] --> J
K -- 3DS required --> K2[3DS challenge] --> K
K -- Yes --> L[Order review]
L --> M[Place order]
M --> N{Inventory still available?}
N -- No --> N1[Release hold, offer alt] --> C
N -- Yes --> O[Create order, charge]
O --> P[Confirmation screen]
P --> Z2((Exit: confirmed))
```
## Happy Path Narrative
A returning logged-in shopper with a saved shipping address and card completes checkout in under 45 seconds. From the cart, they tap Checkout; shipping auto-fills; they select express shipping; payment uses the saved card; they confirm. The confirmation screen shows estimated delivery, tracks the order in their account, and offers a share-to-unlock-discount incentive.
## Failure and Edge Branches
**Branch 1: Declined card.** On decline, surface the reason inline ("card was declined by your bank"), never in a modal. Keep the form state intact. Offer alternative payment methods (Apple Pay, PayPal) directly beneath the error. Do not clear the card fields.
**Branch 2: Inventory gone at place-order.** Between "Place order" and "Charge card," a background check confirms inventory. If anything is out of stock, do not charge the card. Instead, redirect to the cart with a toast naming the unavailable item and surfacing a "shop similar" row.
**Branch 3: 3DS challenge.** SCA triggers in EU-facing flows. When Stripe returns `requires_action`, open the 3DS iframe in-page, not as a popup. If the user abandons the iframe for more than 90 seconds, fall back to the payment screen with a friendly "try again" message.
**Branch 4: Address validation failure.** Use a service like Smarty or Shippo to validate addresses at entry. If the address is ambiguous, show a suggested correction above the form. Never block the user — they can override with their original input.
## Success Metrics
- Checkout start to confirmation rate (target: greater than 62%)
- Median time from cart to paid (target: under 75s for returning users)
- Decline rate (target: under 4%)
- Address correction acceptance rate (target: greater than 70%)
- Return-to-cart rate after checkout start (red flag if above 30%)
## Micro-Interaction Opportunities
- Inline validation the moment a field blurs (not on submit)
- Auto-advance focus between address fields once a zip is detected
- Show a silhouette of the card network as the user types the card number
- Celebrate order placement with a 400ms confetti burst sized to the viewport, not full-screen
- Shipping estimate should update the moment the address zip is valid, not at the next step
A good flow diagram is not decoration. It is the contract between design, product, and engineering — every arrow represents a state change someone has to implement and test.