Interactive Decision Trees & Call Flows

The Challenge

The answer was buried in the article

Complex procedures lived inside long knowledge-base articles. On a live call, an agent had to read through dense policy text to find the one branch that applied - slow, inconsistent, and easy to get wrong under pressure.

The Approach

Model the decision, not the document

I mapped the real decision points into a data-driven tree. Each answer narrows to the next question until the agent lands on a single, unambiguous action - with clear escalation boundaries built in. All of it is plain HTML, CSS, and JavaScript.

The Outcome

One path, one action

Agents reach the right step faster and handle cases more consistently, with escalation rules that are hard to miss. The same tool doubles as a training aid for new hires learning the workflow.

Decision paths mapped

Zero

Dependencies or frameworks

Vanilla HTML / CSS / JS

Live

Used in training & on calls

Try It

Walk a Call, Step by Step

Answer as if you were the agent. Each choice narrows the path until you reach a single recommended action - exactly how the tool works in the flow of a real call.

A fictionalized triage flow for a sample subscription product. Real flows follow the same structure with live policy detail.

How It Works

Data In, Decisions Out

The whole tool is a small state machine. The logic lives in a plain data structure, so the flow can be edited or extended without touching the rendering code.

// Each node is either a QUESTION (has options)
// or a RESULT (has a tone + recommended action).
const TREE = {

  refund_plan: {
    q: "Which plan is the customer on?",
    options: [
      { label: "Standard",     next: "r_approve" },
      { label: "Professional", next: "r_approve" },
      { label: "Members",      next: "r_escalate" }
    ]
  },

  r_escalate: {
    tone:   "escalate",
    title:  "Escalate - do not refund",
    detail: "Members are handled by retention…"
  }

};

Why it's built this way

Editable by non-developers. Adding a branch means adding an object - no logic to rewire. A subject-matter expert can read and sanity-check the flow.

Single source of truth. The questions, paths, and recommended actions all live in one place, so the tool and the training stay in sync.

Accessible by default. Options are real buttons, the path is announced via a live region, and focus moves to each new step for keyboard and screen-reader users.

Portable. No framework, no build step - it drops straight into a knowledge base, SharePoint page, or a standalone HTML file.

MAP

Map the Real Decision

Shadowed live calls and walked procedures with experienced agents to capture the actual branch points - including the edge cases that the written policy glossed over.

Build the State Machine

Turned the map into a node graph: questions route to questions, and terminal nodes return a clearly toned action - approve, escalate, or handle / follow up.

A11Y

Make It Usable Under Pressure

Designed for fast scanning and recovery: a visible breadcrumb of choices, one-tap back and restart, large targets, and clear visual tone for escalation.

FIT

Fit the Flow of Work

Packaged it to live where agents already are - embeddable in the knowledge base and training, with the same logic reusable across different procedures.

Technology

Tech Stack

Semantic HTML5

Vanilla JavaScript

CSS Custom Properties

CSS Grid & Flexbox

ARIA live regions

No build step - drop-in

See More Projects

This is one example of applied front-end work in L&D. The full portfolio includes a knowledge-base design system, AI knowledge tools, and training programs.

Back to Portfolio View Résumé