Moko: piattaforma di assistenza clienti

Moko sostituisce gli strumenti su cui un team di assistenza clienti passa la giornata. Inbox, dettaglio ticket, clienti, knowledge base, report, macro, impostazioni e portale cliente. Il brief era costruire ogni area con lo stesso livello di rifinitura, con un design system che tiene insieme tutto il prodotto e una qualità di interazione che regge anche da sola tastiera.

Dashboard Moko, dark mode. Striscia KPI con conversazioni aperte, in pending, tempo medio di prima risposta e CSAT. Pannello SLA a rischio con i ticket sforati. Lista conversazioni recenti. Pannello disponibilità team. Striscia top tag. — Dashboard. Ogni turno parte da qui: KPI, sforamenti SLA, attività recente e disponibilità del team in un’unica schermata.

Inbox. Tre pannelli che condividono una sola tastiera. J e K scorrono tra le conversazioni, R porta il focus sulla risposta, E risolve e passa alla successiva, ? apre il cheatsheet.

Pagina ticket di Moko in dark mode. Header con campo di ricerca e chip filtro per stato. Tabella con oggetto, cliente, badge di stato, priorità, canale e data di aggiornamento su diciotto righe. — Ticket. Tabella piatta con tutte le conversazioni. Stesso vocabolario di stato, priorità e canale usato in tutta l’app.

L’inbox è la pagina più importante. Il composer alterna tra risposta pubblica e nota interna con un cambio di colore che rende chiaro al volo in che modalità sei prima di mandare. I cambi di stato sono optimistic, con rollback. Tag e priorità si modificano inline, mai in un dialog. Una card AI summary compare sopra i thread con tre o più messaggi e mostra sentiment, contesto del piano e un next step suggerito. Un refresh con un click rigenera il suggerimento quando l’agente vuole un altro taglio.

Clienti. Piano, CSAT lifetime, ultimo contatto. Ricerca e chip di filtro che si combinano in una sola query.

Admin della knowledge base di Moko in dark mode. Header con ricerca, chip filtro per stato Pubblicato e Bozze, e chip filtro per categoria. Bottone nuovo articolo. Tabella con titolo, categoria, badge di stato, numero di visualizzazioni, percentuale di utilità e data di aggiornamento. — Knowledge base, lato admin. La stessa pagina gestisce bozze e articoli pubblicati. Click su una riga per aprire l’editor.

Ogni cliente arriva con la sua storia. Il profilo 360 affianca una striscia di stat alla lista completa dei ticket e un editor di custom field che aggiunge, modifica e rimuove inline con feedback immediato. Lo stesso schema alimenta il drawer dell’inbox, così un agente che apre una conversazione vede già piano, location, CSAT lifetime e ultimi ticket del cliente senza uscire dal thread.

La knowledge base è due prodotti in uno. L’admin è un CMS per contenuti di assistenza con categorie, bozze e stato pubblicato. Il lato pubblico, servito su /help, è un layout in stile marketing con hero search, card di categoria e TOC per articolo. Stesso back-end per entrambi.

Pagina macro di Moko in dark mode. Campo di ricerca e bottone Nuova macro. Lista di sei macro con tag shortcut come /refund e /done. Ogni riga mostra una preview inline del body, con icone di modifica e cancellazione. — Macro. Risposte preimpostate con tag shortcut, preview inline e inserimento con un click dal composer dell’inbox.

Modal di modifica macro di Moko. Form con campo nome, shortcut opzionale, textarea per il body e variable picker che propone nome del cliente, nome completo, azienda, email e ID ticket. Bottoni Annulla e Salva modifiche. — Editor macro. Nome, shortcut, body e un variable picker che inserisce placeholder che il composer dell’inbox espande al momento dell’invio.

Le macro non sono un menu di risposte rapide, sono un sistema di templating leggero. Le variabili si risolvono dal ticket e dal cliente live al momento dell’inserimento, così lo stesso template sembra scritto per la persona dall’altra parte. Macro, AI summary e modifiche inline insieme trasformano l’inbox da lista a spazio di lavoro.

Pagina report di Moko in light mode. Selettore di range con 7g, 30g, 90g. Striscia KPI con aperti, in pending, risolti, non assegnati, tempo medio di prima risposta e CSAT. Sotto: grafico ad area del volume ticket con due serie, donut per canale, barre per stato e barre della distribuzione CSAT. — Report, light mode. Area del volume, donut per canale, barre per stato, distribuzione CSAT. Ogni grafico prende i colori dal design system, così la palette segue il tema.

Hub impostazioni di Moko in light mode. Quattro tile card: Workspace (nome, email di supporto, regione, branding), Team (agenti, ruoli, disponibilità), Policy SLA (obiettivi di risposta e risoluzione, orari lavorativi), Integrazioni (Slack, Gmail, Twitter e altre). — Hub impostazioni, light mode. Workspace, team, policy SLA e integrazioni. Ogni tile apre la propria pagina.

Ogni schermata nasce in light e dark dal primo commit. L’intero prodotto è token-driven: nessun colore hardcoded, nessun font weight hardcoded, nessun inline style. Il design system definisce palette, type scale, radius ed elevation su entrambi i temi. Grafici e badge leggono dagli stessi token dei bottoni, così il segnale di interattività resta coerente in entrambi i temi.

In numeri, e nel modo di farlo.

In numeri

8Aree consegnateInbox, ticket, CRM, KB, report, macro, impostazioni, portale
5Shortcut da tastieraInbox da power user con help overlay
4Tipi di graficoTutti legati ai token del design system
0Valori hardcodedOgni colore e stile passa per i token

Stack

Next.js16
React19
TypeScript
TanStack Query
recharts
react-markdown

Moko è lo standard con cui lavoriamo.

Se stai costruendo un SaaS che ha bisogno della stessa cura su ogni area che toccano i tuoi clienti e il tuo team, allora parliamone.

Parliamone