24 User Flows and UX

24. User Flows & UX Architecture

Comprehensive breakdown of key user interaction flows, modal patterns, and UX friction-reduction principles.

---

⚡ Speed-First Task Commitment Flow (< 5 Seconds)

sequenceDiagram
    participant User
    participant Modal as TaskFormModal
    participant Action as createTaskAction
    participant DB as PostgreSQL DB

    User->>Modal: Open Modal (Autofocus Title Input)
    User->>Modal: Type Task Title + Click Quick Preset ("Today 10 PM")
    User->>Modal: Press Enter / Click "Seal Pact"
    Modal->>Action: Submit Payload
    Action->>DB: INSERT into tasks & commitments
    Action-->>User: Instant Optimistic Close & Toast Reassurance

Loading

• Autofocus: Title input gains focus automatically on modal open.
• Quick Deadline Presets: "Today 10 PM", "Tomorrow 10 PM", "In 2 Days", "End of Week".
• Zero-Friction Submit: Enter key submits the form immediately.

---

📝 Guided Sunday Review Ritual Flow

graph TD
    Step1[1. Audit Task Velocity & Completion] --> Step2[2. Audit Habit Consistency]
    Step2 --> Step3[3. Evaluate Financial Cashflow]
    Step3 --> Step4[4. Clean Up Backlog & Carry Over Tasks]
    Step4 --> Step5[5. Set Top 5 Priorities for Next Week]
    Step5 --> Commit[Commit Review & Unlock Discipline Score]

Loading

• 5-Step Reflection Wizard: Guided stepper component evaluating past week metrics before planning the upcoming week.
• Top 5 Priorities Boundary: Limits next week's core focus to a maximum of 5 top-priority commitments to maintain discipline.