Torna ai lavori
Product design2026kiBankProduct Design & Engineering

kiBank: un'app bancaria moderna e sicura

Una piattaforma bancaria progettata e costruita interamente da noi: dal sito di marketing all'app, passando per design system e infrastruttura tecnica. Tutti i prodotti condividono un'unica base, perché sono stati pensati e sviluppati come un solo ecosistema.

FintechMobileWebDesign SystemNext.jsCloud-native
kiBank: un'app bancaria moderna e sicura

Il brief

Le persone usano le app bancarie tutti i giorni. Quasi tutte sono poco intuitive, complicate da usare. kiBank ha scelto un'altra strada: un'app bancaria semplice, capace come poche.

Volevamo un'esperienza veloce, fluida, comprensibile nei primi dieci secondi. Per arrivarci abbiamo costruito un ecosistema con una sola promessa: ogni schermata, ogni servizio, ogni pagina aggiunge uno strumento alla finanza personale di tutti i giorni.

I numeri

  • 4,8MUtenti attivi mensiliiOS, Android e web
  • 47Mercati attiviSEPA, Regno Unito e alcuni corridoi LATAM
  • 99,99%Uptime della piattaformaUltimi dodici mesi, lancio incluso
  • 280msTime to interactive medianoP50 su Android di fascia media, real user monitoring
Hero della landing kiBank con l'headline "Banking, made calm" e una preview della dashboard sotto.
La prima schermata del sito ha due funzioni: presentare la promessa del brand e dimostrarla subito, senza che l'utente debba fare scroll.

Il sito

Il sito ha un solo obiettivo concreto: portare il visitatore a installare l'app prima che cambi tab. Per raggiungerlo, ogni sezione è stata costruita per rispondere a una domanda specifica raccolta dalle interviste con gli utenti, e disposta nell'ordine naturale in cui queste domande emergono durante la navigazione.

A livello tecnico è una shell statica in Next.js, distribuita da Vercel Edge in meno di 200ms in qualunque parte d'Europa. Le immagini arrivano da Cloudflare R2 con conversione AVIF al volo. Il risultato è una landing che pesa meno di una singola foto prodotto su un e-commerce qualsiasi.

Griglia delle feature di kiBank: "Fisica e virtuale, stesso posto", "Invii in due tap", "Cerca tra le spese", "Obiettivi che si adattano".
Quattro cose che ogni utente vuole fare con i propri soldi. A ognuna corrisponde una schermata dedicata, una sola decisione da prendere e un singolo tap per agire.
Showcase mobile di kiBank: schermate Cards, Savings e Pay su tre mockup di telefono.
Gli stessi componenti girano sia sul web che sul mobile. I token gestiscono l'identità visiva del brand, mentre il layout si adatta al modo in cui usiamo davvero il telefono: con il pollice.
Sezione Savings di kiBank con obiettivi con nome, regole di arrotondamento e uno screenshot desktop.
Le immagini sul sito di marketing sono le stesse dell'app in produzione. Nessun mockup separato da mantenere, nessuna divergenza tra quello che il sito promette e quello che il prodotto offre.

L'app: semplice ma potente come poche

L'intera esperienza si svolge in sei schermate. È una scelta esigente: ogni tap porta l'utente più a fondo in un flusso coerente, senza salti laterali che gli farebbero perdere il filo.

La libreria di componenti che fa girare tutto questo viene distribuita in un solo pacchetto: centoventi componenti, duecento token di design e un audit di accessibilità completo. I temi chiaro e scuro condividono tutto, dal layout alle regole di spaziatura fino alle curve di animazione.

Dashboard kiBank su desktop: saldo totale, quattro azioni rapide, grafico delle spese a 30 giorni e transazioni recenti.
La home risponde a un'unica domanda: come sto andando questo mese? Bastano tre sguardi per capirlo, perché tutto è visibile senza scroll, anche su un laptop da 13 pollici.
Pagina Cards di kiBank su desktop: carte fisiche e virtuali, PIN reveal, barra delle spese mensili e toggle per blocco, contactless e pagamenti online.
La sezione Cards riunisce in un unico spazio le carte fisiche e quelle virtuali. PIN, blocco, monitoraggio delle spese mensili e attivazione dei pagamenti online: ogni controllo è a un solo tap.
Flow Pay di kiBank su desktop: invio a un contatto salvato con campo importo, selettore del conto di origine e nota opzionale.
Per inviare denaro bastano due tap. Il selettore dei contatti usa frequenza e contatti recenti per portare in cima la persona giusta, in modo che l'utente non debba cercarla.
Transactions di kiBank su desktop: bilancio del periodo, filtri per data e categoria, ricerca e lista cronologica dei merchant.
Ogni transazione viene indicizzata e categorizzata in tempo reale. Filtri, ricerca ed esportazione in CSV sono funzionalità di primo livello, sempre visibili in pagina e mai sepolte in un sottomenù.
Savings di kiBank su desktop: totale risparmiato, obiettivi con nome, grafico dei vault e regole di auto-save.
Vault con nome, round-up sugli acquisti e accantonamenti automatici settimanali: una volta configurati, lavorano da soli senza richiedere attenzione. Il grafico mostra dove i risparmi stanno crescendo davvero.
Insights di kiBank su desktop: bilancio degli ultimi 30 giorni, donut per categoria, andamento entrate vs uscite a sei mesi e insight comportamentali.
Insights traduce le transazioni in frasi che chiunque può capire al volo. I testi li scrive il team di prodotto, non un analista finanziario.

La banca è nel telefono

L'83% delle sessioni arriva da telefono, in movimento, con una mano sola. Per questo il design mobile non parte da un wireframe, ma dall'ergonomia del pollice. I tap target hanno una dimensione minima di 44 pixel, con 8 pixel d'aria su ogni lato.

La stessa libreria di componenti genera le stesse schermate, sia su web che su mobile. Non c'è bisogno di re-skinning, né di mantenere un codepath separato. Il cambio di tema è immediato, senza round trip, e si conserva anche dopo un kill-and-relaunch dell'app.

Cards di kiBank su mobile con la carta virtuale, dettagli della fisica, rivelazione del PIN e progresso della spesa mensile.
Cards
Pay di kiBank su mobile con selezione del contatto, inserimento dell'importo e selettore del conto.
Pay
Savings di kiBank su mobile in tema chiaro con obiettivi, totale risparmiato e vault breakdown.
Savings
A tre tap dalla tasca: ogni schermata è progettata per le dimensioni reali di un telefono, mai deformata.
kiBank Savings on mobile in dark mode with goals, total saved and vault breakdown.
Dark
kiBank Savings on mobile in light mode showing the same content adapted to a brighter theme.
Light
One layout, two themes. Tokens flip, components stay.

Lo stack

  • Next.js16
  • React19
  • TypeScript5
  • Postgres16
  • Supabase
  • Redis
  • Cloudflare R2
  • Vercel Edge
  • Node.js22
  • Sentry

Hanno preso brand, prodotto e infrastruttura e li hanno costruiti lavorando come un team unico, con una sola roadmap e un solo standard di qualità. Per noi è stato come avere un team in casa, ma con la velocità di chi questo lavoro lo fa per mestiere.

VP of Engineering, kiBankReview interna, trimestre di lancio

Cosa è cambiato

  • +38%Dalla landing all'installazioneRispetto alla landing precedente, A/B su dodici settimane
  • 72NPSPartendo da 41 della vecchia app
  • 4,8Voto App StoreiOS e Google Play, oltre 280k recensioni
  • +23%Tasso di risparmio anno su annoChi usa un obiettivo con nome risparmia 1,7 volte di più

Vuoi un progetto simile?

Se stai definendo un nuovo prodotto fintech, oppure devi rifare uno che si è complicato strada facendo, possiamo aiutarti. Lo abbiamo già fatto.

Parliamone