EN
Case Study / 2026

okTicket
Landing Page

Dalla Strategia al Codice con l'AI — Un Case Study Completo nello Sviluppo Web Moderno

Bartolomeo D'Alia
UX Designer
×
Claude Opus 4.6
Partner AI
Per
Overall Media srl
Durata
3–6 Marzo 2026
Ruolo
Design & Sviluppo
Tipo
Landing Page B2B
React Vite Tailwind CSS Framer Motion TypeScript
Scorri

Una Piattaforma che Meritava
una Prima Impressione Migliore

okTicket è la piattaforma di ticketing leader in Italia per musei e attrazioni culturali, con oltre 200.000 biglietti elaborati annualmente in più di 20 sedi. Nonostante questo successo, la landing page esistente non riusciva a comunicare efficacemente la proposta di valore della piattaforma.

La sfida era chiara: costruire una landing page orientata alla conversione, rivolta ai decision-maker B2B del settore museale e culturale italiano. Ogni scelta di design doveva guidare la generazione di lead attraverso telefonate, messaggi WhatsApp e invii di moduli di contatto.

L'intero progetto doveva essere consegnato in meno di quattro giorni, dalla fase di scoperta al deployment — senza compromessi su qualità, performance o cura dei dettagli.

200K+
Biglietti elaborati annualmente in tutte le sedi
Dal 2017
Anni di affidabilità comprovata nel mercato italiano
20+ Sedi
Musei e attrazioni culturali serviti
okTicket landing page overview

Cinque Fasi,
Quattro Giorni

Un approccio strutturato che ha trasformato l'intuizione strategica in codice pronto per la produzione a una velocità senza precedenti.

Fase 01 — Giorno 1
Scoperta
Intervista approfondita con il cliente e analisi di mercato. Identificati i punti di forza, le esigenze del target e il posizionamento competitivo nel settore culturale italiano.
Fase 02 — Giorno 1
Pianificazione
Creato un piano di implementazione completo, definito il sistema di design, selezionato lo stack tecnologico e delineate tutte le 17 sezioni con una chiara gerarchia dei contenuti.
Fase 03 — Giorni 2–3
Sviluppo
Costruiti 17 componenti React con animazioni attivate dallo scroll, layout responsive e CTA ottimizzate per la conversione. Ogni componente realizzato per performance e accessibilità.
Fase 04 — Giorno 3
Iterazione
102 screenshot di anteprima catturati durante il perfezionamento iterativo. Regolazioni responsive pixel-perfect su breakpoint mobile, tablet e desktop.
Fase 05 — Giorno 4
Rilascio
Build di produzione, setup del repository GitHub, deployment su Netlify con integrazione form, ottimizzazione SEO con dati strutturati JSON-LD e documentazione completa.

Costruito su una Solida
Fondazione Visiva

Ogni design token è stato scelto con cura per riflettere l'identità del brand okTicket, garantendo leggibilità e conversione.

Palette Colori
okTicket Red
#EE4564
--ok-red
okTicket Teal
#00C3B2
--ok-teal
Blu Accento
#41B5E6
--ok-blue
Base Scura
#323439
--ok-dark
Tipografia
Quicksand
Aa Bb Cc 1234
Aa Bb Cc Dd Ee Ff Gg
SemiBold 600 · Bold 700
Titoli e display
Inter
Aa Bb Cc 1234
Aa Bb Cc Dd Ee Ff Gg
Regular 400 · Medium 500 · SemiBold 600 · Bold 700
Body text e UI
Architettura dei Componenti
H
Hero & Navigazione
S
Tab Guida Smart
F
Sezioni Funzionalità
P
Prezzi & Piani
C
Contatti & Form CTA
T
Testimonianze
G
Sezione Gift Tickets
A
Sistema Animazioni

Una Landing Page che
Converte

Ogni scroll, ogni animazione, ogni parola — progettati per guidare i prospect B2B verso l'azione.

Cosa Abbiamo Realizzato

Un set completo di funzionalità progettate per performance, accessibilità e conversione.

17 Sezioni della Pagina
Gerarchia dei contenuti attentamente strutturata per guidare gli utenti dalla consapevolezza alla conversione.
Animazioni allo Scroll
Animazioni di ingresso con Framer Motion, reveal sfalsati ed effetti parallasse.
SEO con JSON-LD
Schema di dati strutturati per risultati di ricerca arricchiti, ottimizzato per keyword del settore culturale italiano.
Netlify Forms
Gestione form serverless con protezione anti-spam e notifiche email istantanee.
Mobile-First
Design responsive a partire da 375px, ottimizzato per ogni breakpoint fino a 1440px.
Font Ottimizzati
WOFF2 self-hosted con font-display: swap, eliminando layout shift e richieste esterne.
Tab Interattivi
Componenti tab dinamici per la sezione Guida Smart, che mostrano le funzionalità della piattaforma.
CTA Click-to-Call
CTA per telefono, WhatsApp e form posizionate strategicamente per massimizzare la generazione di lead.

La Realizzazione in
Prospettiva

Uno sguardo quantitativo su ciò che è stato realizzato in soli tre giorni e mezzo di collaborazione uomo-AI.

3 Giorni
Durata Totale
530
Invocazioni Tool
102
Screenshot di Anteprima
17
Componenti Costruiti
54
File Committati
7.739
Righe di Codice

Lo Stack Tecnologico

Strumenti moderni scelti per esperienza di sviluppo, performance e affidabilità in produzione.

React 18
Vite
TS
TypeScript
Tailwind CSS
Framer Motion
N
Netlify
Git / GitHub
AI
Claude AI