Satispay: il nuovo sito corporate di una fintech europea
Il sito di una super app dei pagamenti, rifatto per parlare a tre pubblici diversi e accogliere i prodotti che verranno.
Il problema
Nel 2024 Satispay ha cambiato quasi tutto: un payoff nuovo, People Paying People, e due prodotti nuovi per il welfare aziendale, buoni pasto e buoni acquisto. Tutto tranne il sito, che continuava a raccontare l'azienda di qualche anno prima.
Il problema però non era estetico. Un sito che serve privati, negozi e aziende tiene tre conversazioni diverse nello stesso posto, e ognuna finisce in una pagina che qualcuno deve trovare su Google. In più deve ospitare prodotti che al momento del lancio non esistono ancora. La domanda vera era chi l'avrebbe aggiornato domani.
Come l'abbiamo risolto
La risposta è stata smettere di costruire pagine e cominciare a costruire pezzi. Dallo UI Kit sono usciti componenti modulari, ognuno con le sue varianti di colore e contenuto, e ogni componente è diventato un widget su DatoCMS. Chi scrive apre il CMS, sceglie i blocchi, compone la pagina e pubblica. Per aggiungere una sezione non serve aprire un editor di codice.
La pagina più veloce è quella già pronta prima che qualcuno la chieda. Il difficile è cambiarla in fretta.
Qui sta la parte più tecnica del progetto. Next.js genera le pagine in anticipo e le rigenera quando i contenuti cambiano, ma la cache di quel meccanismo vive nella memoria della singola istanza, e su un'architettura distribuita le istanze sono tante: pubblichi una modifica e la vede solo una parte delle persone. Abbiamo scritto un layer di invalidazione ad hoc che propaga l'aggiornamento a tutte, così chi pubblica dal CMS vede il sito cambiare ovunque senza rinunciare alla velocità delle pagine statiche.
Intorno, le integrazioni REST tengono agganciati help desk, careers e CRM: il sito non è un'isola, è il punto in cui i sistemi che Satispay già usava si affacciano sul pubblico. Il risultato si vede al prodotto successivo, quando serve una sezione nuova e non c'è bisogno di chiamarci.
DEEP DIVE TECNICO
TypeScript, Next.js, Node.js e Tailwind sul front-end, DatoCMS come headless CMS con i componenti dello UI Kit esposti come widget agli editor, il tutto su AWS (ECS, CloudFront, CloudWatch, WAF, CodeBuild) per un'architettura distribuita, sicura e ad alta disponibilità. Help desk, careers e CRM entrano via API REST. Le performance sono curate fin dentro i Core Web Vitals, perché su un sito che deve farsi trovare la velocità è già SEO. La parte di cui andiamo fieri: un layer di invalidazione scritto ad hoc sopra l'Incremental Static Regeneration di Next.js, per superare i limiti del memory caching in ambiente distribuito.
DEEP DIVE TECNICO
TypeScript, Next.js, Node.js e Tailwind sul front-end, DatoCMS come headless CMS con i componenti dello UI Kit esposti come widget agli editor, il tutto su AWS (ECS, CloudFront, CloudWatch, WAF, CodeBuild) per un'architettura distribuita, sicura e ad alta disponibilità. Help desk, careers e CRM entrano via API REST. Le performance sono curate fin dentro i Core Web Vitals, perché su un sito che deve farsi trovare la velocità è già SEO. La parte di cui andiamo fieri: un layer di invalidazione scritto ad hoc sopra l'Incremental Static Regeneration di Next.js, per superare i limiti del memory caching in ambiente distribuito.
Hai un progetto simile in mente?
Raccontaci cosa vuoi costruire: ti aiutiamo a capire il percorso più veloce.
