AI-Augmented Workflow & Agentic CRM Dashboard
Project Type:
My AI Workflow Demo & Agentic UI Concept
Project Date
2026
*Video made with Seedance AI
Role-Based, Dynamic Agentic UI
Full AI-Accelerated Workflow
A CRM for Everyone Is a CRM Optimized for No One
CRMs give every role the same interface, which means no role gets the right one. A sales rep in the field at 8am needs different tools than the same rep at 3pm, and neither matches what a manager or executive needs. Velocity treats adaptation as the default: the same product reshapes for each role and shifts throughout the day.
A CRM for Everyone Is a CRM Optimized for No One
CRMs give every role the same interface, which means no role gets the right one. A sales rep in the field at 8am needs different tools than the same rep at 3pm, and neither matches what a manager or executive needs. Velocity treats adaptation as the default: the same product reshapes for each role and shifts throughout the day.
A CRM for Everyone Is a CRM Optimized for No One
CRMs give every role the same interface, which means no role gets the right one. A sales rep in the field at 8am needs different tools than the same rep at 3pm, and neither matches what a manager or executive needs. Velocity treats adaptation as the default: the same product reshapes for each role and shifts throughout the day.
A CRM for Everyone Is a CRM Optimized for No One
CRMs give every role the same interface, which means no role gets the right one. A sales rep in the field at 8am needs different tools than the same rep at 3pm, and neither matches what a manager or executive needs. Velocity treats adaptation as the default: the same product reshapes for each role and shifts throughout the day.
Full AI-Augmented Workflow
Every phase produces something real: a spec, a token file, a prototype. The workflow fits inside a standard Figma-based or Claude Design-based pipeline, or it cuts the design file out and ships tokens straight to code. I built it as a bridge between how design teams work now and where AI takes them next.
This workflow is built to scale, but not every phase is mandatory: the best results come from adapting it to each project.
AI layer
Designer
Output
Phase 1
Brief & alignment
Synthesizes research into structured briefs, role models, and success metrics
Defines scope, validates assumptions, approves direction
Brief & user model
→ brief.md
Phase 2
System architecture
Generates module architecture, interaction rules, and behavioral constraints
Refines information hierarchy, sets design boundaries, resolves conflicts
Architecture spec
→ architecture.md
Phase 3
Design system
Creates or applies design tokens, builds component variants, assembles layouts via Figma MCP or code
Refines visual details, ensures consistency, directs redesigns
Design system & Figma file || code
→ design-tokens.json
Phase 4
Layout engine
Generates layout configs, agent behavior specs, and display state rules
Reviews AI boundaries, defines user control patterns, validates logic
Layout config & agent spec
→ layout-config.json
→ phase5-handoff.md
Phase 5
Prototype
Scaffolds project, ports tokens, builds components from design specs
Reviews output, catches errors, prioritizes what ships
Working prototype
→ Live prototype
Why Does This Workflow Work?
Strategy Before Pixels
Five phases force decisions about scope, users, and success before any design work starts. Each phase is a checkpoint that catches ambiguity, scope creep, or misalignment before it compounds into a failed project.
Meets Teams Where They Are
The same workflow ships as a Figma file, as code, or through Claude Design. No team has to abandon their stack to adopt it.
Maximized AI and Engineered Handoff
AI handles the pace between phases. The artifacts it produces are structured so a human can step in at any point, review, and make the final call. Speed and judgment, not one at the expense of the other.
Flexible Tool Stack for Each Step
Every tool has a sweet spot. This chart maps where each one is strongest across the design pipeline, and the combination I used for Velocity CRM.
Full AI-Augmented Workflow
Every phase produces something real: a spec, a token file, a prototype. The workflow fits inside a standard Figma-based or Claude Design-based pipeline, or it cuts the design file out and ships tokens straight to code. I built it as a bridge between how design teams work now and where AI takes them next.
This workflow is built to scale, but not every phase is mandatory: the best results come from adapting it to each project.
AI layer
Designer
Output
Phase 1
Brief & alignment
Synthesizes research into structured briefs, role models, and success metrics
Defines scope, validates assumptions, approves direction
Brief & user model
→ brief.md
Phase 2
System architecture
Generates module architecture, interaction rules, and behavioral constraints
Refines information hierarchy, sets design boundaries, resolves conflicts
Architecture spec
→ architecture.md
Phase 3
Design system
Creates or applies design tokens, builds component variants, assembles layouts via Figma MCP or code
Refines visual details, ensures consistency, directs redesigns
Design system & Figma file || code
→ design-tokens.json
Phase 4
Layout engine
Generates layout configs, agent behavior specs, and display state rules
Reviews AI boundaries, defines user control patterns, validates logic
Layout config & agent spec
→ layout-config.json
→ phase5-handoff.md
Phase 5
Prototype
Scaffolds project, ports tokens, builds components from design specs
Reviews output, catches errors, prioritizes what ships
Working prototype
→ Live prototype
Why Does This Workflow Work?
Strategy Before Pixels
Five phases force decisions about scope, users, and success before any design work starts. Each phase is a checkpoint that catches ambiguity, scope creep, or misalignment before it compounds into a failed project.
Meets Teams Where They Are
The same workflow ships as a Figma file, as code, or through Claude Design. No team has to abandon their stack to adopt it.
Maximized AI and Engineered Handoff
AI handles the pace between phases. The artifacts it produces are structured so a human can step in at any point, review, and make the final call. Speed and judgment, not one at the expense of the other.
Flexible Tool Stack for Each Step
Every tool has a sweet spot. This chart maps where each one is strongest across the design pipeline, and the combination I used for Velocity CRM.
Full AI-Augmented Workflow
Every phase produces something real: a spec, a token file, a prototype. The workflow fits inside a standard Figma-based or Claude Design-based pipeline, or it cuts the design file out and ships tokens straight to code. I built it as a bridge between how design teams work now and where AI takes them next.
This workflow is built to scale, but not every phase is mandatory: the best results come from adapting it to each project.
AI layer
Designer
Output
Phase 1
Brief & alignment
Synthesizes research into structured briefs, role models, and success metrics
Defines scope, validates assumptions, approves direction
Brief & user model
→ brief.md
Phase 2
System architecture
Generates module architecture, interaction rules, and behavioral constraints
Refines information hierarchy, sets design boundaries, resolves conflicts
Architecture spec
→ architecture.md
Phase 3
Design system
Creates or applies design tokens, builds component variants, assembles layouts via Figma MCP or code
Refines visual details, ensures consistency, directs redesigns
Design system & Figma file || code
→ design-tokens.json
Phase 4
Layout engine
Generates layout configs, agent behavior specs, and display state rules
Reviews AI boundaries, defines user control patterns, validates logic
Layout config & agent spec
→ layout-config.json
→ phase5-handoff.md
Phase 5
Prototype
Scaffolds project, ports tokens, builds components from design specs
Reviews output, catches errors, prioritizes what ships
Working prototype
→ Live prototype
Scroll horizontally to view full table!
Why Does This Workflow Work?
Strategy Before Pixels
Five phases force decisions about scope, users, and success before any design work starts. Each phase is a checkpoint that catches ambiguity, scope creep, or misalignment before it compounds into a failed project.
Meets Teams Where They Are
The same workflow ships as a Figma file, as code, or through Claude Design. No team has to abandon their stack to adopt it.
Maximized AI and Engineered Handoff
AI handles the pace between phases. The artifacts it produces are structured so a human can step in at any point, review, and make the final call. Speed and judgment, not one at the expense of the other.
Flexible Tool Stack for Each Step
Every tool has a sweet spot. This chart maps where each one is strongest across the design pipeline, and the combination I used for Velocity CRM.
Full AI-Augmented Workflow
Every phase produces something real: a spec, a token file, a prototype. The workflow fits inside a standard Figma-based or Claude Design-based pipeline, or it cuts the design file out and ships tokens straight to code. I built it as a bridge between how design teams work now and where AI takes them next.
This workflow is built to scale, but not every phase is mandatory: the best results come from adapting it to each project.
AI layer
Designer
Output
Phase 1
Brief & alignment
Synthesizes research into structured briefs, role models, and success metrics
Defines scope, validates assumptions, approves direction
Brief & user model
→ brief.md
Phase 2
System architecture
Generates module architecture, interaction rules, and behavioral constraints
Refines information hierarchy, sets design boundaries, resolves conflicts
Architecture spec
→ architecture.md
Phase 3
Design system
Creates or applies design tokens, builds component variants, assembles layouts via Figma MCP or code
Refines visual details, ensures consistency, directs redesigns
Design system & Figma file || code
→ design-tokens.json
Phase 4
Layout engine
Generates layout configs, agent behavior specs, and display state rules
Reviews AI boundaries, defines user control patterns, validates logic
Layout config & agent spec
→ layout-config.json
→ phase5-handoff.md
Phase 5
Prototype
Scaffolds project, ports tokens, builds components from design specs
Reviews output, catches errors, prioritizes what ships
Working prototype
→ Live prototype
Why Does This Workflow Work?
Strategy Before Pixels
Five phases force decisions about scope, users, and success before any design work starts. Each phase is a checkpoint that catches ambiguity, scope creep, or misalignment before it compounds into a failed project.
Meets Teams Where They Are
The same workflow ships as a Figma file, as code, or through Claude Design. No team has to abandon their stack to adopt it.
Maximized AI and Engineered Handoff
AI handles the pace between phases. The artifacts it produces are structured so a human can step in at any point, review, and make the final call. Speed and judgment, not one at the expense of the other.
Flexible Tool Stack for Each Step
Every tool has a sweet spot. This chart maps where each one is strongest across the design pipeline, and the combination I used for Velocity CRM.
Inside My Design Process with AI
Phase 1: Teaching AI the Problem Before It Starts Solving
AI turned a rough direction into a structured brief with user profiles, pain points, success criteria, and edge cases.
Why this is necessary: The brief is where direction becomes clear for both me and the AI, aligned with the team's research and earlier inputs. Every later phase builds on it.
Phase 2: Guiding AI Through the System's First Draft
AI used the brief to draft the product's architecture: components, information hierarchy, and interaction rules (agentic layer).
Why this matters: The architecture becomes the shared reference point for design, engineering, and AI from day one. Decisions that usually get scattered across docs, Slack threads, and designers' heads now live in one structured source.
Phase 3: Coaching AI to Build Design System That is Well-Designed
AI-generated design tokens and built the component library directly in Figma through the Plugin API.
What this changes: Design systems are hard labor, and one missing input can break ten components downstream. AI is good at the mundane work: keeping things organized, documented, and consistent. My effort is now dedicated to the work only a human can do: setting the baseline system and getting the important details right.
First Design System Iteration
Phase 4: Setting the Boundaries AI Thinks Within
This phase is specific to products with an agentic layer. AI wrote the layout configuration, behavioral rules, signal priorities, and the system prompt that governs how the agent operates.
Impact: Agentic behavior isn't just an engineering problem. Designing it upfront keeps the AI within the design system's guardrails, prevents low-quality experiences, and gives every user a tailored result backed by clear specs.
Phase 5: Reviewing AI's Work Before It Ships
AI built the React prototype straight from the tokens and specs it produced earlier. Nothing got redesigned or re-exported. I reviewed what it built, fixed what broke, and called what was ready to ship.
Why this matters: Iteration is the most valuable part of design, but also the most time-consuming. With the design system locked in, tweaks aren't rework but AI re-composing what's already there.
The results is highly polished prototype that looks and behaves like they are ready to ship, built exactly as I intended through every design details and micro-interations.
Inside My Design Process with AI
Phase 1: Teaching AI the Problem Before It Starts Solving
AI turned a rough direction into a structured brief with user profiles, pain points, success criteria, and edge cases.
Why this is necessary: The brief is where direction becomes clear for both me and the AI, aligned with the team's research and earlier inputs. Every later phase builds on it.
Phase 2: Guiding AI Through the System's First Draft
AI used the brief to draft the product's architecture: components, information hierarchy, and interaction rules (agentic layer).
Why this matters: The architecture becomes the shared reference point for design, engineering, and AI from day one. Decisions that usually get scattered across docs, Slack threads, and designers' heads now live in one structured source.
Phase 3: Coaching AI to Build Design System That is Well-Designed
AI-generated design tokens and built the component library directly in Figma through the Plugin API.
What this changes: Design systems are hard labor, and one missing input can break ten components downstream. AI is good at the mundane work: keeping things organized, documented, and consistent. My effort is now dedicated to the work only a human can do: setting the baseline system and getting the important details right.
First Design System Iteration
Phase 4: Setting the Boundaries AI Thinks Within
This phase is specific to products with an agentic layer. AI wrote the layout configuration, behavioral rules, signal priorities, and the system prompt that governs how the agent operates.
Impact: Agentic behavior isn't just an engineering problem. Designing it upfront keeps the AI within the design system's guardrails, prevents low-quality experiences, and gives every user a tailored result backed by clear specs.
Phase 5: Reviewing AI's Work Before It Ships
AI built the React prototype straight from the tokens and specs it produced earlier. Nothing got redesigned or re-exported. I reviewed what it built, fixed what broke, and called what was ready to ship.
Why this matters: Iteration is the most valuable part of design, but also the most time-consuming. With the design system locked in, tweaks aren't rework but AI re-composing what's already there.
The results is highly polished prototype that looks and behaves like they are ready to ship, built exactly as I intended through every design details and micro-interations.
Inside My Design Process with AI
Phase 1: Teaching AI the Problem Before It Starts Solving
AI turned a rough direction into a structured brief with user profiles, pain points, success criteria, and edge cases.
Why this is necessary: The brief is where direction becomes clear for both me and the AI, aligned with the team's research and earlier inputs. Every later phase builds on it.
Phase 2: Guiding AI Through the System's First Draft
AI used the brief to draft the product's architecture: components, information hierarchy, and interaction rules (agentic layer).
Why this matters: The architecture becomes the shared reference point for design, engineering, and AI from day one. Decisions that usually get scattered across docs, Slack threads, and designers' heads now live in one structured source.
Phase 3: Coaching AI to Build Design System That is Well-Designed
AI-generated design tokens and built the component library directly in Figma through the Plugin API.
What this changes: Design systems are hard labor, and one missing input can break ten components downstream. AI is good at the mundane work: keeping things organized, documented, and consistent. My effort is now dedicated to the work only a human can do: setting the baseline system and getting the important details right.
First Design System Iteration
Phase 4: Setting the Boundaries AI Thinks Within
This phase is specific to products with an agentic layer. AI wrote the layout configuration, behavioral rules, signal priorities, and the system prompt that governs how the agent operates.
Impact: Agentic behavior isn't just an engineering problem. Designing it upfront keeps the AI within the design system's guardrails, prevents low-quality experiences, and gives every user a tailored result backed by clear specs.
Phase 5: Reviewing AI's Work Before It Ships
AI built the React prototype straight from the tokens and specs it produced earlier. Nothing got redesigned or re-exported. I reviewed what it built, fixed what broke, and called what was ready to ship.
Why this matters: Iteration is the most valuable part of design, but also the most time-consuming. With the design system locked in, tweaks aren't rework but AI re-composing what's already there.
The results is highly polished prototype that looks and behaves like they are ready to ship, built exactly as I intended through every design details and micro-interations.
Inside My Design Process with AI
Phase 1: Teaching AI the Problem Before It Starts Solving
AI turned a rough direction into a structured brief with user profiles, pain points, success criteria, and edge cases.
Why this is necessary: The brief is where direction becomes clear for both me and the AI, aligned with the team's research and earlier inputs. Every later phase builds on it.
Phase 2: Guiding AI Through the System's First Draft
AI used the brief to draft the product's architecture: components, information hierarchy, and interaction rules (agentic layer).
Why this matters: The architecture becomes the shared reference point for design, engineering, and AI from day one. Decisions that usually get scattered across docs, Slack threads, and designers' heads now live in one structured source.
Phase 3: Coaching AI to Build Design System That is Well-Designed
AI-generated design tokens and built the component library directly in Figma through the Plugin API.
What this changes: Design systems are hard labor, and one missing input can break ten components downstream. AI is good at the mundane work: keeping things organized, documented, and consistent. My effort is now dedicated to the work only a human can do: setting the baseline system and getting the important details right.
First Design System Iteration
Phase 4: Setting the Boundaries AI Thinks Within
This phase is specific to products with an agentic layer. AI wrote the layout configuration, behavioral rules, signal priorities, and the system prompt that governs how the agent operates.
Impact: Agentic behavior isn't just an engineering problem. Designing it upfront keeps the AI within the design system's guardrails, prevents low-quality experiences, and gives every user a tailored result backed by clear specs.
Phase 5: Reviewing AI's Work Before It Ships
AI built the React prototype straight from the tokens and specs it produced earlier. Nothing got redesigned or re-exported. I reviewed what it built, fixed what broke, and called what was ready to ship.
Why this matters: Iteration is the most valuable part of design, but also the most time-consuming. With the design system locked in, tweaks aren't rework but AI re-composing what's already there.
The results is highly polished prototype that looks and behaves like they are ready to ship, built exactly as I intended through every design details and micro-interations.
Built to Adapt Without AI
One CRM. Three Roles. A Dashboard That Reshapes for Each.
What is running here: This is the rules-based adaptation layer. It runs on every tick, stays debuggable, and handles role-specific layouts, time-of-day shifts, data-threshold triggers, and a chatbot with scoped permissions. No LLM needed for the dashboard to respond. When the intelligence layer is down or not ready, this layer keeps the product working.
Live Prototype Link: https://velocity-agentic-crm-dashboard-mqo4.vercel.app/
Some interactions to try:
Switch roles in the top-right dropdown
Manually change the agent mode on debug panel (next to roles dropdown)
Resize your window from desktop to mobile
Use the fully-functional in-app agent/chatbot - use suggested chips or manual input
Config-Driven Role Logic
Components render different data based on the user's role. The Forecast Panel is one component, but managers see their team's numbers, executives see the company's, and the module label shifts to match. Role logic lives in config, not in branching components.
Forecast shows different content for each role
Context-Aware Adaptation
The layout shifts with the time of day and with the data signals. Morning planning mode differs from afternoon execution mode, and at-risk deals that cross a threshold promote the Action Center. Real adaptation, running on rules alone.
Morning mode prioritizes actions
Afternoon mode focuses on logging and review
At-risk mode surfaces deals needing attention
Modules That Reshape Themselves
Modules can be folded, prioritized, or resized without losing their structure. Same components, different shapes, depending on what the layout calls for.
Modules fold, resize, and reorder on demand
Talk to It Instead of Tapping Through
The chatbot can perform tasks directly, so users aren't forced to navigate the interface to get things done. Ask it to log a call, surface at-risk deals, or jump to a module, and it acts within the same permissions each role already has.
The agent logs a call from a single message
The Substrate Works. The Intelligence Comes Next.
Rules handle role, time, and urgency. They can't handle user-specific patterns, which is where Layer 2 takes over.
Coming in the intelligence layer:
Behavior-driven personalization per user (clicks, dwell time, dismissals)
Conversational layout changes through the chatbot
Undo and explanation for every change the agent makes
Built to Adapt Without AI
One CRM. Three Roles. A Dashboard That Reshapes for Each.
What is running here: This is the rules-based adaptation layer. It runs on every tick, stays debuggable, and handles role-specific layouts, time-of-day shifts, data-threshold triggers, and a chatbot with scoped permissions. No LLM needed for the dashboard to respond. When the intelligence layer is down or not ready, this layer keeps the product working.
Live Prototype Link: https://velocity-agentic-crm-dashboard-mqo4.vercel.app/
Some interactions to try:
Switch roles in the top-right dropdown
Manually change the agent mode on debug panel (next to roles dropdown)
Resize your window from desktop to mobile
Use the fully-functional in-app agent/chatbot - use suggested chips or manual input
Config-Driven Role Logic
Components render different data based on the user's role. The Forecast Panel is one component, but managers see their team's numbers, executives see the company's, and the module label shifts to match. Role logic lives in config, not in branching components.
Forecast shows different content for each role
Context-Aware Adaptation
The layout shifts with the time of day and with the data signals. Morning planning mode differs from afternoon execution mode, and at-risk deals that cross a threshold promote the Action Center. Real adaptation, running on rules alone.
Morning mode prioritizes actions
Afternoon mode focuses on logging and review
At-risk mode surfaces deals needing attention
Modules That Reshape Themselves
Modules can be folded, prioritized, or resized without losing their structure. Same components, different shapes, depending on what the layout calls for.
Modules fold, resize, and reorder on demand
Talk to It Instead of Tapping Through
The chatbot can perform tasks directly, so users aren't forced to navigate the interface to get things done. Ask it to log a call, surface at-risk deals, or jump to a module, and it acts within the same permissions each role already has.
The agent logs a call from a single message
The Substrate Works. The Intelligence Comes Next.
Rules handle role, time, and urgency. They can't handle user-specific patterns, which is where Layer 2 takes over.
Coming in the intelligence layer:
Behavior-driven personalization per user (clicks, dwell time, dismissals)
Conversational layout changes through the chatbot
Undo and explanation for every change the agent makes
Built to Adapt Without AI
One CRM. Three Roles. A Dashboard That Reshapes for Each.
What is running here: This is the rules-based adaptation layer. It runs on every tick, stays debuggable, and handles role-specific layouts, time-of-day shifts, data-threshold triggers, and a chatbot with scoped permissions. No LLM needed for the dashboard to respond. When the intelligence layer is down or not ready, this layer keeps the product working.
Live Prototype Link: https://velocity-agentic-crm-dashboard-mqo4.vercel.app/
Some interactions to try:
Switch roles in the top-right dropdown
Manually change the agent mode on debug panel (next to roles dropdown)
Resize your window from desktop to mobile
Use the fully-functional in-app agent/chatbot - use suggested chips or manual input
Config-Driven Role Logic
Components render different data based on the user's role. The Forecast Panel is one component, but managers see their team's numbers, executives see the company's, and the module label shifts to match. Role logic lives in config, not in branching components.
Forecast shows different content for each role
Context-Aware Adaptation
The layout shifts with the time of day and with the data signals. Morning planning mode differs from afternoon execution mode, and at-risk deals that cross a threshold promote the Action Center. Real adaptation, running on rules alone.
Morning mode prioritizes actions
Afternoon mode focuses on logging and review
At-risk mode surfaces deals needing attention
Modules That Reshape Themselves
Modules can be folded, prioritized, or resized without losing their structure. Same components, different shapes, depending on what the layout calls for.
Modules fold, resize, and reorder on demand
Talk to It Instead of Tapping Through
The chatbot can perform tasks directly, so users aren't forced to navigate the interface to get things done. Ask it to log a call, surface at-risk deals, or jump to a module, and it acts within the same permissions each role already has.
The agent logs a call from a single message
The Substrate Works. The Intelligence Comes Next.
Rules handle role, time, and urgency. They can't handle user-specific patterns, which is where Layer 2 takes over.
Coming in the intelligence layer:
Behavior-driven personalization per user (clicks, dwell time, dismissals)
Conversational layout changes through the chatbot
Undo and explanation for every change the agent makes
Built to Adapt Without AI
One CRM. Three Roles. A Dashboard That Reshapes for Each.
What is running here: This is the rules-based adaptation layer. It runs on every tick, stays debuggable, and handles role-specific layouts, time-of-day shifts, data-threshold triggers, and a chatbot with scoped permissions. No LLM needed for the dashboard to respond. When the intelligence layer is down or not ready, this layer keeps the product working.
Live Prototype Link: https://velocity-agentic-crm-dashboard-mqo4.vercel.app/
Some interactions to try:
Switch roles in the top-right dropdown
Manually change the agent mode on debug panel (next to roles dropdown)
Resize your window from desktop to mobile
Use the fully-functional in-app agent/chatbot - use suggested chips or manual input
Config-Driven Role Logic
Components render different data based on the user's role. The Forecast Panel is one component, but managers see their team's numbers, executives see the company's, and the module label shifts to match. Role logic lives in config, not in branching components.
Forecast shows different content for each role
Context-Aware Adaptation
The layout shifts with the time of day and with the data signals. Morning planning mode differs from afternoon execution mode, and at-risk deals that cross a threshold promote the Action Center. Real adaptation, running on rules alone.
Morning mode prioritizes actions
Afternoon mode focuses on logging and review
At-risk mode surfaces deals needing attention
Modules That Reshape Themselves
Modules can be folded, prioritized, or resized without losing their structure. Same components, different shapes, depending on what the layout calls for.
Modules fold, resize, and reorder on demand
Talk to It Instead of Tapping Through
The chatbot can perform tasks directly, so users aren't forced to navigate the interface to get things done. Ask it to log a call, surface at-risk deals, or jump to a module, and it acts within the same permissions each role already has.
The agent logs a call from a single message
The Substrate Works. The Intelligence Comes Next.
Rules handle role, time, and urgency. They can't handle user-specific patterns, which is where Layer 2 takes over.
Coming in the intelligence layer:
Behavior-driven personalization per user (clicks, dwell time, dismissals)
Conversational layout changes through the chatbot
Undo and explanation for every change the agent makes
Built to Learn From Users
Beyond Three Roles. Tailored for Every User.
What is running here: This is the intelligence layer. It reads behavioral signals across sessions, ranks modules into three prominence tiers per user, and learns filter defaults from consistent use. The layout reshapes between sessions, never during them. The static layer keeps running underneath; this one adds personalization on top.
Live Prototype Link: https://velocity-crm-agentic.vercel.app/
Some interactions to try (agent changes start working over the first 3-5 sessions, refresh to start a new session):
Open the Agent panel in the top-right to see the ranking and reasoning
Click a Pipeline stage tab/pill - it will become the default tab
Expand/collapse a module - your preference become default
Frequently click or hover over a module - it will gets bump to higher orders
Flexible Agent, Reliable Guardrails
V1: Confidence-Based Logic
Only act when confident
Wait for stable patterns
Changes feel unresponsive or unexpected
Where V1 fell short: The agent had five overlapping actions, three confidence gates, and saved preferences that fought against current behavior. Promoting one module could conflict with resizing another. The system worked, but layouts shifted in ways users couldn't predict.
V2: Rank-Bounded Agent
Rank modules into three tiers
Cross-session updates only, never mid-task
Changes feel predictable and earned
Why V2 works: V2 makes three deliberate calls: the agent has one decision (rank modules into tiers), the visual treatment for each tier is fixed by design, and the agent only acts between sessions. Discipline about what NOT to let the AI do is the design judgment.
What it brings for users: The dashboard arrives "just right" at the start of every session and stays put while you work. Personalization that's invisible to discover, and never disrupts what you're doing.
Layout Reshaping Between Sessions
The agent reads how each user actually works and ranks modules into three prominence tiers at the start of the next session. For example, a manager who checks Forecast every morning gets Forecast on top.
Default layout based on role only
Adapted layout based on user behavior across 5 sessions
Filter Defaults That Stick
Every filter click increments a counter. After three consistent clicks with a strict majority, the value becomes the default on the next session start. The Pipeline tile always opens to "Discovery" because that's where the rep actually works.
Pipeline opens to "All stages" every session
Pipeline opens to "Discovery" after consistent use
Less Is More, Even for Agents
The strongest call wasn't expanding what the agent could do, it was pulling back where it might fail. V2 ships without mid-session shifts, content selection, or styling decisions because every added action is another chance to disrupt the user.
Built to Learn From Users
Beyond Three Roles. Tailored for Every User.
What is running here: This is the intelligence layer. It reads behavioral signals across sessions, ranks modules into three prominence tiers per user, and learns filter defaults from consistent use. The layout reshapes between sessions, never during them. The static layer keeps running underneath; this one adds personalization on top.
Live Prototype Link: https://velocity-crm-agentic.vercel.app/
Some interactions to try (agent changes start working over the first 3-5 sessions, refresh to start a new session):
Open the Agent panel in the top-right to see the ranking and reasoning
Click a Pipeline stage tab/pill - it will become the default tab
Expand/collapse a module - your preference become default
Frequently click or hover over a module - it will gets bump to higher orders
Flexible Agent, Reliable Guardrails
V1: Confidence-Based Logic
Only act when confident
Wait for stable patterns
Changes feel unresponsive or unexpected
Where V1 fell short: The agent had five overlapping actions, three confidence gates, and saved preferences that fought against current behavior. Promoting one module could conflict with resizing another. The system worked, but layouts shifted in ways users couldn't predict.
V2: Rank-Bounded Agent
Rank modules into three tiers
Cross-session updates only, never mid-task
Changes feel predictable and earned
Why V2 works: V2 makes three deliberate calls: the agent has one decision (rank modules into tiers), the visual treatment for each tier is fixed by design, and the agent only acts between sessions. Discipline about what NOT to let the AI do is the design judgment.
What it brings for users: The dashboard arrives "just right" at the start of every session and stays put while you work. Personalization that's invisible to discover, and never disrupts what you're doing.
Layout Reshaping Between Sessions
The agent reads how each user actually works and ranks modules into three prominence tiers at the start of the next session. For example, a manager who checks Forecast every morning gets Forecast on top.
Default layout based on role only
Adapted layout based on user behavior across 5 sessions
Filter Defaults That Stick
Every filter click increments a counter. After three consistent clicks with a strict majority, the value becomes the default on the next session start. The Pipeline tile always opens to "Discovery" because that's where the rep actually works.
Pipeline opens to "All stages" every session
Pipeline opens to "Discovery" after consistent use
Less Is More, Even for Agents
The strongest call wasn't expanding what the agent could do, it was pulling back where it might fail. V2 ships without mid-session shifts, content selection, or styling decisions because every added action is another chance to disrupt the user.
Built to Learn From Users
Beyond Three Roles. Tailored for Every User.
What is running here: This is the intelligence layer. It reads behavioral signals across sessions, ranks modules into three prominence tiers per user, and learns filter defaults from consistent use. The layout reshapes between sessions, never during them. The static layer keeps running underneath; this one adds personalization on top.
Live Prototype Link: https://velocity-crm-agentic.vercel.app/
Some interactions to try (agent changes start working over the first 3-5 sessions, refresh to start a new session):
Open the Agent panel in the top-right to see the ranking and reasoning
Click a Pipeline stage tab/pill - it will become the default tab
Expand/collapse a module - your preference become default
Frequently click or hover over a module - it will gets bump to higher orders
Flexible Agent, Reliable Guardrails
V1: Confidence-Based Logic
Only act when confident
Wait for stable patterns
Changes feel unresponsive or unexpected
Where V1 fell short: The agent had five overlapping actions, three confidence gates, and saved preferences that fought against current behavior. Promoting one module could conflict with resizing another. The system worked, but layouts shifted in ways users couldn't predict.
V2: Rank-Bounded Agent
Rank modules into three tiers
Cross-session updates only, never mid-task
Changes feel predictable and earned
Why V2 works: V2 makes three deliberate calls: the agent has one decision (rank modules into tiers), the visual treatment for each tier is fixed by design, and the agent only acts between sessions. Discipline about what NOT to let the AI do is the design judgment.
What it brings for users: The dashboard arrives "just right" at the start of every session and stays put while you work. Personalization that's invisible to discover, and never disrupts what you're doing.
Layout Reshaping Between Sessions
The agent reads how each user actually works and ranks modules into three prominence tiers at the start of the next session. For example, a manager who checks Forecast every morning gets Forecast on top.
Default layout based on role only
Adapted layout based on user behavior across 5 sessions
Filter Defaults That Stick
Every filter click increments a counter. After three consistent clicks with a strict majority, the value becomes the default on the next session start. The Pipeline tile always opens to "Discovery" because that's where the rep actually works.
Pipeline opens to "All stages" every session
Pipeline opens to "Discovery" after consistent use
Less Is More, Even for Agents
The strongest call wasn't expanding what the agent could do, it was pulling back where it might fail. V2 ships without mid-session shifts, content selection, or styling decisions because every added action is another chance to disrupt the user.
Built to Learn From Users
Beyond Three Roles. Tailored for Every User.
What is running here: This is the intelligence layer. It reads behavioral signals across sessions, ranks modules into three prominence tiers per user, and learns filter defaults from consistent use. The layout reshapes between sessions, never during them. The static layer keeps running underneath; this one adds personalization on top.
Live Prototype Link: https://velocity-crm-agentic.vercel.app/
Some interactions to try (agent changes start working over the first 3-5 sessions, refresh to start a new session):
Open the Agent panel in the top-right to see the ranking and reasoning
Click a Pipeline stage tab/pill - it will become the default tab
Expand/collapse a module - your preference become default
Frequently click or hover over a module - it will gets bump to higher orders
Flexible Agent, Reliable Guardrails
V1: Confidence-Based Logic
Only act when confident
Wait for stable patterns
Changes feel unresponsive or unexpected
Where V1 fell short: The agent had five overlapping actions, three confidence gates, and saved preferences that fought against current behavior. Promoting one module could conflict with resizing another. The system worked, but layouts shifted in ways users couldn't predict.
V2: Rank-Bounded Agent
Rank modules into three tiers
Cross-session updates only, never mid-task
Changes feel predictable and earned
Why V2 works: V2 makes three deliberate calls: the agent has one decision (rank modules into tiers), the visual treatment for each tier is fixed by design, and the agent only acts between sessions. Discipline about what NOT to let the AI do is the design judgment.
What it brings for users: The dashboard arrives "just right" at the start of every session and stays put while you work. Personalization that's invisible to discover, and never disrupts what you're doing.
Layout Reshaping Between Sessions
The agent reads how each user actually works and ranks modules into three prominence tiers at the start of the next session. For example, a manager who checks Forecast every morning gets Forecast on top.
Default layout based on role only
Adapted layout based on user behavior across 5 sessions
Filter Defaults That Stick
Every filter click increments a counter. After three consistent clicks with a strict majority, the value becomes the default on the next session start. The Pipeline tile always opens to "Discovery" because that's where the rep actually works.
Pipeline opens to "All stages" every session
Pipeline opens to "Discovery" after consistent use
Less Is More, Even for Agents
The strongest call wasn't expanding what the agent could do, it was pulling back where it might fail. V2 ships without mid-session shifts, content selection, or styling decisions because every added action is another chance to disrupt the user.
What Testing Showed
To measure the success of this concept, professionals working in sales were invited in usability sessions.
82 SUS Score, 48 NPS
Quantitative data (n=19) show strong usability and high willingness to recommend this product to other users.
Real User Needs
Test participants expressed strong interest in using this product in real-world settings, and some inquired about its availability in the market.
What Testing Showed
To measure the success of this concept, professionals working in sales were invited in usability sessions.
82 SUS Score, 48 NPS
Quantitative data (n=19) show strong usability and high willingness to recommend this product to other users.
Real User Needs
Test participants expressed strong interest in using this product in real-world settings, and some inquired about its availability in the market.
What Testing Showed
To measure the success of this concept, professionals working in sales were invited in usability sessions.
82 SUS Score, 48 NPS
Quantitative data (n=19) show strong usability and high willingness to recommend this product to other users.
Real User Needs
Test participants expressed strong interest in using this product in real-world settings, and some inquired about its availability in the market.
What Testing Showed
To measure the success of this concept, professionals working in sales were invited in usability sessions.
82 SUS Score, 48 NPS
Quantitative data (n=19) show strong usability and high willingness to recommend this product to other users.
Real User Needs
Test participants expressed strong interest in using this product in real-world settings, and some inquired about its availability in the market.
Where This Goes Next
What's next
Dynamic promotion sometimes made the overall hierarchy feel less organized
One user wanted more agentic behavior, suggesting more room for agent tweaks
Expand the agent's range within the existing tier system
Use behavioral signals as a user research and analytics layer
Revisit which mid-session adaptations might be safe to add
Where This Goes Next
What's next
Dynamic promotion sometimes made the overall hierarchy feel less organized
One user wanted more agentic behavior, suggesting more room for agent tweaks
Expand the agent's range within the existing tier system
Use behavioral signals as a user research and analytics layer
Revisit which mid-session adaptations might be safe to add
Where This Goes Next
What's next
Dynamic promotion sometimes made the overall hierarchy feel less organized
One user wanted more agentic behavior, suggesting more room for agent tweaks
Expand the agent's range within the existing tier system
Use behavioral signals as a user research and analytics layer
Revisit which mid-session adaptations might be safe to add
Where This Goes Next
What's next
Dynamic promotion sometimes made the overall hierarchy feel less organized
One user wanted more agentic behavior, suggesting more room for agent tweaks
Expand the agent's range within the existing tier system
Use behavioral signals as a user research and analytics layer
Revisit which mid-session adaptations might be safe to add