← Operations Dashboard

User Experience Flow Diagrams

Mermaid.JS representations of user pathways through Kai Hamil tools and experiences

🌐

Complete Site Navigation

Full map of all 78 pages across 12 sections. Current state baseline for restructuring into System // Self entry paths.

Mermaid.JS 📊 78 pages 🔗 12 sections
🗺️

Tools & Assessment User Flow

Journey map from homepage through assessment tools, wisdom tools, and completion states.

Mermaid.JS 📊 6 pathways 🔗 15+ screens
🎯

System // Self Entry Flow

Proposed restructure: "Solve a problem" vs "Gain wisdom" dual entry point design.

Mermaid.JS Next: Kyle's redesign

📐 Notation Standards

All UX flows use Mermaid.JS flowchart notation for consistency and maintainability. This allows:

  • Version control of diagrams as code
  • Easy updates without design tools
  • Consistent rendering across documentation
  • Interactive zoom/pan in HTML views

Future consideration: BPMN 2.0 for more complex process workflows with swim lanes and decision gateways.

🎨 Color Coding

  • Gold border — Entry points (Home, Tools Index)
  • Blue — Assessment flows (Quiz, Advanced Assessment)
  • Pink — Wisdom tools (Free Hour, Hour Apart)
  • Green — Framework tools (5 Filters, Problem Audit)
  • Light green — Completion states