Salta al contenuto

Netech: nuova UX per la taratura antiriciclaggio bancaria

Redesign UX/UI di una piattaforma per i controlli antiriciclaggio in banca: backend solido, interfaccia finalmente chiara.

NordEst Technology (Netech): logo del cliente
Anno
2023
Settore · Finanza & ComplianceDigital designSoftware su misura

Il problema

NordEst Technology vende sicurezza informatica a banche e pubblica amministrazione, cioè ai due settori dove la norma e la tecnologia si intrecciano di più. Fra i suoi strumenti c'è una piattaforma di taratura: quella con cui, dentro le banche, si impostano e si verificano i parametri su cui poggiano i controlli antiriciclaggio. È uno strumento operativo: qualcuno lo apre tutti i giorni per lavorarci dentro.

Funzionava, e questo va detto prima di tutto il resto. Aveva però due limiti di natura diversa. Il primo era di flusso: le operazioni che si ripetono più spesso chiedevano più passaggi di quanti ne servissero, e la fatica si accumulava sulle giornate. Il secondo era tecnico: lo stack del front-end non era dimensionato per le prestazioni che viste così dense di dati richiedono.

Come l'abbiamo risolto

Abbiamo iniziato da un'analisi del software esistente, fatto insieme al cliente, per trovarne i punti di forza prima delle criticità. L'obiettivo dichiarato non era riscrivere per il gusto di riscrivere: era capire quali passaggi dell'esperienza d'uso stessero effettivamente ostacolando l'operatore. I flussi esistenti li abbiamo mappati su Miro, ricostruendo i percorsi reali invece di quelli previsti dal manuale, e da lì sono nate le proposte di miglioramento, di grafica e di sequenza, portate al cliente e validate prima di toccare il codice.

Il motore non era il problema. Il problema era chiedere all'operatore di tenere a mente cosa aveva già tarato.

Il cuore del lavoro è la piattaforma di domain e discovery: l'ambiente dove si registrano i domini dei paesi per cui vanno fatte le tarature, si inseriscono i parametri e si definiscono i controlli da applicare ai diversi enti per le verifiche antiriciclaggio. È un dominio con molte dimensioni, e la difficoltà per chi lo usa non è mai il singolo dato: è tenere insieme la relazione fra paese, ente, parametro e controllo mentre si lavora.

Paese, ente, parametro, controllole quattro dimensioni che l'operatore deve tenere insieme a ogni taratura

È lì che ha agito la UX. Abbiamo riorganizzato la sequenza delle operazioni e reso esplicito nell'interfaccia quello che prima stava nella testa di chi lavorava: cosa è già stato tarato e cosa resta da verificare. Un'informazione che il sistema aveva già, ma che non mostrava, e che una persona era costretta a ricostruirsi da sola ogni volta che riprendeva in mano una sessione.

La piattaforma di taratura antiriciclaggio di Netech dopo il redesign: la tabella dei paesi con i livelli di rischio e i country-check, l'elenco dei domini con bozza e storico, e la configurazione di un comportamento con le causali analitiche da escludere e le soglie di importo per conto.
Una taratura tiene insieme paese, ente, parametro e controllo: l'interfaccia ora dice a quale dei quattro livelli stai lavorando e quali condizioni stai cambiando.

Sul fronte tecnico il front-end è stato ricostruito in Next.js con TypeScript. Le prestazioni sulle viste dense sono metà della ragione; l'altra metà è la tipizzazione forte, perché qui parametri, enti e controlli hanno strutture articolate e un errore di modellazione non si vede in sviluppo, si paga in fase di controllo. Tailwind tiene il linguaggio visivo coerente e vicino a quello validato in Figma, Redux Toolkit tiene coerenti le informazioni di taratura fra viste diverse lungo sessioni di lavoro lunghe, e il deploy sta su Vercel con la pipeline allineata al ciclo di rilascio.

I risultati

Quello che consegniamo fa esattamente le stesse cose di prima. È una frase che sembra deludente e invece è il punto: su uno strumento di compliance, cambiare quello che il software fa significa rimettere in discussione controlli che qualcuno ha già validato. Quello che è cambiato è quanto costa governarlo, su un impianto più moderno da mantenere negli anni.

DEEP DIVE TECNICO

Design condotto su Miro e Figma usati come strumenti di lavoro condiviso e non di sola consegna: Miro per mappare i flussi esistenti e ricostruire i percorsi utente durante l'analisi iniziale, Figma per i prototipi navigabili su cui il cliente ha validato le proposte prima di qualsiasi riga di codice. Front-end in Next.js con TypeScript, scelto per le prestazioni su viste dense di dati e per la tipizzazione forte: in un dominio dove parametri, enti e controlli hanno strutture articolate, un errore di modellazione si paga in fase di controllo. Tailwind per un linguaggio visivo coerente e riutilizzabile a partire dalle scelte validate in Figma, così la distanza fra design e implementazione resta bassa. Stato applicativo con Redux Toolkit, perché le informazioni di taratura sono condivise fra viste diverse e devono restare coerenti lungo sessioni di lavoro lunghe. Deploy della web app su Vercel, con la pipeline allineata al ciclo di rilascio del front-end.

Hai un progetto simile in mente?

Raccontaci cosa vuoi costruire: ti aiutiamo a capire il percorso più veloce.

Parlane con noi
PROGETTI CONSIGLIATI

Potrebbero interessarti anche

Torna a tutti i progetti