# User Flow Template

> **Copy this template to create new user flows**
>
> Location: `src/docs/ux/flows/[feature-name]-flow.md`

## 📋 Flow Overview

**Goal**: [What does the user want to accomplish?]

**Entry Points**:
- [Where can users start this flow?]
- [List all entry points]

**Exit Points**:
- Success → [Where do they go on success?]
- Cancel → [What happens if they cancel?]
- Error → [What happens on error?]

---

## 🗺️ Flow Diagram

```
┌─────────────┐
│ Entry Point │
└──────┬──────┘
       │
       v
┌──────────────────────────────┐
│   Step 1: [Action]           │
│   - Detail 1                 │
│   - Detail 2                 │
└──────┬───────────────────────┘
       │
       v
┌──────────────────────────────┐
│  Step 2: [Action]            │
└──────┬───────────────────────┘
       │
       v
┌──────────────────────────────┐
│  Step 3: [Decision Point]    │
└──────┬───────────────────────┘
       │
       ├─────────────┬──────────────┐
       v Path A      v Path B       v Path C
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ Outcome A   │ │ Outcome B    │ │ Outcome C    │
└─────────────┘ └──────────────┘ └──────────────┘
```

---

## 📝 Detailed Steps

### Step 1: [Step Name]
**Action**: [What does the user do?]

**UI State**:
- [What's visible on screen?]
- [What's the initial state?]

**Validation** (if applicable):
- ✅ [Validation rule 1]
- ✅ [Validation rule 2]

**Error Messages**:
- [Error condition]: "[Error message]"

**Technical Notes**:
- [API calls, state changes, etc.]

---

### Step 2: [Step Name]
**Action**: [What does the user do?]

**UI State**:
- [What changes?]

**Behavior**:
- [How does it behave?]

---

### Step 3: [Decision Point]
**Action**: [What triggers the decision?]

**Possible Outcomes**:

#### ✅ Success Path
**Condition**: [When does this happen?]

**Actions**:
1. [What happens first?]
2. [What happens next?]
3. [Final outcome]

---

#### ❌ Error Path
**Condition**: [When does this happen?]

**Actions**:
1. [How is error shown?]
2. [How can user recover?]

---

## 🔀 Alternative Paths

### Path A: [Alternative Name]
**Trigger**: [What triggers this path?]

**Action**: [What happens?]

---

### Path B: [Alternative Name]
**Trigger**: [What triggers this path?]

**Action**: [What happens?]

---

## ✅ Success Criteria

Flow is successful when:
- ✅ [Criterion 1]
- ✅ [Criterion 2]
- ✅ [Criterion 3]

---

## 🧪 Testing Checklist

**Functional Tests**:
- [ ] [Test case 1]
- [ ] [Test case 2]
- [ ] [Test case 3]

**Edge Cases**:
- [ ] [Edge case 1]
- [ ] [Edge case 2]

**Accessibility**:
- [ ] Keyboard navigation works
- [ ] Screen reader announces correctly
- [ ] Focus management is correct

**Performance**:
- [ ] Page loads < [X]s
- [ ] API response < [X]s
- [ ] No layout shift

---

## 📱 Responsive Behavior

**Mobile (< 640px)**:
- [How does it adapt?]

**Tablet (640-1024px)**:
- [How does it adapt?]

**Desktop (> 1024px)**:
- [How does it adapt?]

---

## 🎨 Figma Prototype

[Link to Figma prototype]

---

## 📊 Analytics Events

Track these events:
- `[event_name_1]`
- `[event_name_2]`
- `[event_name_3]`

---

**Maintained by**: [Team Name]
**Last Updated**: [Date]
**Version**: [Version Number]
