A facilities helpdesk run by two configurable AI agents — Intake and Dispatch.

A helpdesk for facilities teams run by two AI agents you configure, not two teams you staff — Intake answers every channel, Dispatch picks the technician.

Facilio Helpdesk

The demo is a desktop console. Open it in a new tab to click through the real product on sample data.

Open the demo
Role
Lead Product Designer
Contribution
Led design, copy, and frontend across all 11 modules — onboarding, the agents, and the operational surface.
Timeline
2025 – Present
Client
Facilio
Disciplines
Design · Dev

What it is

Two agents do the work; one console lets humans watch and take over. The window above is the real console on sample data — click through it.

  • Intake answers phone, WhatsApp, email and web chat, and raises the ticket.

  • Dispatch picks the technician against policies written in plain English.

  • The console Inbox, Tickets, Technicians, Contacts, and an Ask AI copilot across all of it.

Answers every channel, in the caller’s own words

Phone, WhatsApp, email, and a web widget — the agent takes the request as it’s spoken and raises the ticket.

The right technician, with the reasoning shown

Matched against policies you wrote in plain English — score, runners-up, and every step on the surface.

Where the humans watch it all and take over

Inbox, Tickets, Technicians, Contacts — and Ask AI, which searches everything and deep-links you in.

The problem

A facilities team's front door is a phone number and an inbox. A tenant calls, someone retypes it into a ticket, and someone else guesses which technician is free and certified.

The real question was never the screen. How do you get someone to hand a tenant call to an AI — and stay in control once they have?

How it's put together

One pipeline, one surface, one bundle.

  • The pipeline. Intake → Dispatch does the work.

  • The surface. Inbox, Tickets and Technicians are where a human watches it and takes over.

  • The nav says it out loud. Modules you operate up top; the agents you tune under “Agent Configuration.”

  • One bundle, two products. The same build serves the Dispatcher Agent on its own. The first URL segment picks which one you get.

Day one: URL in, agent out

The first screen asks for one thing: your website.

It crawls the site and comes back pre-filled — company, services, tenants, assets, regions — as editable chips. Day one is correcting a good guess, not filling a blank form.

Paste a URL, review what it found, land in a live helpdesk.

Teaching the agent

Intake is the biggest configuration surface, and what you configure is behaviour, not settings.

  • Ordered like a call. Identity, Voice, Greeting, Behaviour, Scope of Work, Scenarios, then Actions.

  • Voices you preview by ear. Scope of Work starts from a template library.

  • Scenarios. Question-and-answer pairs that steer the agent on the cases that matter.

  • One tab per channel. Calls, WhatsApp, Web Widget, Email — each with its own prompt.

Scope of Work: the agent's policy in plain English, with the Playground alongside.
A scenario is two fields: what someone might ask, how the agent answers.

Talk to it before callers do

Config on the left, a live phone on the right. It captures your mic, streams to the agent, and prints the transcript as it goes.

Edit → save → talk, instead of edit → save → find your phone → call → hope.

Ava on the handset — one tap from a real call.

Every conversation, one inbox

Every call, chat and email the agent handled lands here with the recording, the transcript, and a summary with a tone read up top.

Transcripts translate on demand, and the ticket it raised is one click away.

Tone read and summary first — nobody triages from a five-minute transcript.

One queue of work

Whatever channel it came from, every request is one row in one list, headlined by Atom's summary.

The detail slides over the table instead of reflowing it — open six tickets without losing your place.

The queue, and a ticket's detail overlay with the recommended technician inside.

Contacts

The directory behind every conversation. A caller who rings twice is one record, not two strangers.

Contacts — the people behind every conversation.

Ask AI

Ask in plain language, get real records back — tickets, technicians, policies, trends — each a deep-link into the right filtered view.

Open tickets ranked by urgency, each one a deep-link.

Designing and building the same screen

Rough structure in Figma, the real thing in code with AI doing most of the typing, judged in the browser. No handoff, because there was nobody to hand off to.

  • Three kinds of live. Ask AI streams tokens, the flow builder uses server-sent events, the playground holds a WebSocket for voice.

  • UI ahead of API. Every unwired call is a marked seam. Controls that can't act yet are disabled, never faked.

The loop, in one frame — I lay out the structure and hierarchy in Figma (behind), then build the real thing in code in Cursor with Claude doing most of the typing (front), while I keep the design calls.