Visit Italy è un'app di travel discovery pensata per rendere l'Italia accessibile e immersiva a un pubblico internazionale. Il problema: nessuna landing page, nessun sistema visivo, nessun funnel di conversione. Il prodotto esisteva, ma non aveva voce digitale capace di comunicarlo e trasformare l'ispirazione in azione.
Una landing page conversion-first strutturata come un funnel: ogni sezione risponde a una specifica obiezione psicologica del visitatore. Mobile-first come priorità assoluta. Design system coerente documentato su Figma con Tokens Studio. Zero template — tutto costruito con visione chiara sulla conversione, dall'architettura dell'informazione all'ultima riga di CSS.
Ho definito l'architettura in sei sezioni-funnel prima di disegnare qualsiasi schermata: Hero → Problem/Solution → Product Features → How It Works → Social Proof → Final CTA. Ogni sezione risponde a una specifica obiezione psicologica del visitatore. Nessun elemento è decorativo: tutto spinge verso il download.
Costruzione del design system da zero su Figma con Tokens Studio. Palette chirurgica a tre variabili: Pure Ice per gli sfondi, Obsidian Black per i testi, Neon Mint (#71FBCA) riservato esclusivamente a CTA e indicatori attivi. Syne 800 per i titoli, Inter per il corpo e le UI. Ogni componente approvato in Figma prima di scrivere una riga di codice.
L'app è mobile, l'utente è mobile — quindi la progettazione è partita dal viewport più piccolo. Hero carousel con progress bar animate, phone mockup interattivo sincronizzato ai click, floating CTA persistente ottimizzata per la thumb zone. Il desktop è un enhancement, non il punto di partenza.
La build è in HTML5, CSS custom e JavaScript vanilla. Nessun framework, nessuna libreria non necessaria: ogni riga di codice ha una motivazione specifica. Lazy loading su tutti i media pesanti e ottimizzazione per mobile con attenzione alla thumb zone. Il risultato è un file leggero, rapido e completamente sotto controllo.
L'utente capisce il valore dell'app entro 3 secondi dall'atterraggio
Il carousel hero mostra quattro destinazioni iconiche (Roma, Firenze, Napoli, Venezia) con progress bar animate che mantengono l'attenzione attiva. Il copy è ridotto all'essenziale: headline + subline + CTA. Niente distrazioni, un solo obiettivo.
Il phone mockup interattivo abbassa la barriera cognitiva al download
La sezione "Come funziona" utilizza un mockup iPhone interattivo sincronizzato agli step numerati. Cliccando su ogni step, lo schermo del telefono cambia contenuto. L'utente "usa" l'app prima ancora di scaricarla — riducendo l'incertezza e aumentando la propensione al download.
La CTA finale è la sesta risposta a sei obiezioni accumulate durante lo scroll
L'ultima sezione riassume il valore e porta l'utente all'azione con i badge App Store e Play Store in evidenza. Il design riprende i colori del brand e mantiene la gerarchia visiva stabilita dall'inizio. Nessun elemento nuovo — solo la conferma di tutto quello che l'utente ha già visto.
L'app progettata per chi esplora con il telefono in mano
Visit Italy nasce per uno scenario preciso: l'utente in movimento, smartphone in mano, che cerca ispirazione o conferma su cosa fare in una città italiana. Per questo ogni scelta di layout — dimensione dei tap target, gerarchia visiva, velocità delle animazioni — è stata calibrata su un uso reale, non su una simulazione desktop ridotta.
Responsive senza compromessi: lo stesso funnel, adattato al desktop
La versione desktop mantiene l'identità visiva e la logica del funnel costruiti per mobile, amplificando le proporzioni e sfruttando lo spazio orizzontale per dare respiro ai contenuti. Il risultato è una pagina che funziona — e convince — su qualsiasi schermo, senza sembrare progettata per nessuno in particolare.
Aprili con Chrome DevTools — Lighthouse · Network · Accessibility
Lavoriamo insieme
Nessun form. Una conversazione.
Tutti i progetti