Moko: piattaforma di assistenza clienti

Moko sostituisce le interfacce quotidiane in cui lavora un team di assistenza clienti. Inbox, dettaglio ticket, clienti, knowledge base, report, macro, impostazioni e portale cliente. Il brief era costruire ogni interfaccia con lo stesso livello di rifinitura, con un design system che tiene insieme tutto il prodotto e una qualità di interazione che regge anche quando l’agente lavora interamente a 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 una sola schermata.

Inbox. Tre pannelli che condividono una sola tastiera. J e K scorrono 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. Una tabella piatta con tutte le conversazioni, con lo 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 la modalità inequivocabile prima dell’invio. I cambi di stato sono ottimistici, 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 prossimo passo suggerito. Un refresh con un click rigenera il suggerimento quando l’agente vuole un’angolazione diversa.

Clienti. Piano, CSAT lifetime, ultimo contatto, con ricerca e chip di filtro che si combinano in un’unica 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.

I clienti si portano dietro la loro 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 ottimistico. La stessa struttura 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 sono 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. I due lati leggono gli stessi dati.

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 con i dati live del ticket e del cliente nel momento in cui l’agente inserisce la macro, così lo stesso template sembra scritto per la persona dall’altra parte. L’insieme di macro, AI summary ed edit inline è ciò che trasforma 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 interfaccia esce 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 porta palette, type scale, radius ed elevation su entrambi i temi. Grafici e badge leggono dagli stessi token dei bottoni, così il cambio di tema non mente mai su cosa è interattivo.

Cosa ha portato il lavoro, nei numeri e nell’impostazione.

In numeri

8Interfacce costruiteInbox, 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 è il livello a cui lavoriamo.

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

Scrivici