IT
Case Study / 2026

okTicket
Landing Page

From Strategy to Code with AI — A Complete Case Study in Modern Web Development

Bartolomeo D'Alia
UX Designer
×
Claude Opus 4.6
AI Partner
For
Overall Media srl
Duration
March 3–6, 2026
Role
Design & Development
Type
B2B Landing Page
React Vite Tailwind CSS Framer Motion TypeScript
Scroll

A Platform Deserving
a Better First Impression

okTicket is Italy's leading ticketing platform for museums and cultural attractions, processing over 200,000 tickets annually across 20+ venues. Despite this success, their existing landing page failed to communicate the platform's value proposition effectively.

The challenge was clear: build a conversion-focused landing page targeting B2B decision-makers in the Italian museum and cultural sector. Every design choice needed to drive leads through phone calls, WhatsApp messages, and contact form submissions.

The entire project had to be delivered in under four days, from discovery to deployment — without compromising on quality, performance, or attention to detail.

200K+
Tickets processed annually across all venues
Since 2017
Years of proven reliability in the Italian market
20+ Venues
Museums and cultural attractions served
okTicket landing page overview

Five Phases,
Four Days

A structured approach that turned strategic insight into production-ready code at unprecedented speed.

Phase 01 — Day 1
Discovery
In-depth client interview and market analysis. Identified key selling points, target audience pain points, and competitive positioning in the Italian cultural sector.
Phase 02 — Day 1
Planning
Created a comprehensive implementation plan, defined the design system, selected the tech stack, and outlined all 17 sections with clear content hierarchy.
Phase 03 — Days 2–3
Development
Built 17 React components with scroll-triggered animations, responsive layouts, and conversion-optimized CTAs. Every component crafted for performance and accessibility.
Phase 04 — Day 3
Iteration
102 preview screenshots captured during iterative refinement. Pixel-perfect responsive adjustments across mobile, tablet, and desktop breakpoints.
Phase 05 — Day 4
Deployment
Production build, GitHub repository setup, Netlify deployment with forms integration, SEO optimization with JSON-LD structured data, and comprehensive documentation.

Built on a Solid
Visual Foundation

Every design token was carefully chosen to reflect okTicket's brand identity while ensuring readability and conversion.

Color Palette
okTicket Red
#EE4564
--ok-red
okTicket Teal
#00C3B2
--ok-teal
Accent Blue
#41B5E6
--ok-blue
Dark Base
#323439
--ok-dark
Typography
Quicksand
Aa Bb Cc 1234
Aa Bb Cc Dd Ee Ff Gg
SemiBold 600 · Bold 700
Headings and display
Inter
Aa Bb Cc 1234
Aa Bb Cc Dd Ee Ff Gg
Regular 400 · Medium 500 · SemiBold 600 · Bold 700
Body text and UI
Component Architecture
H
Hero & Navigation
S
Smart Guide Tabs
F
Feature Sections
P
Pricing & Plans
C
Contact & CTA Forms
T
Testimonials
G
Gift Tickets Section
A
Animations System

A Landing Page That
Converts

Every scroll, every animation, every word — engineered to move B2B prospects toward action.

What We Built

A comprehensive feature set designed for performance, accessibility, and conversion.

17 Page Sections
Carefully structured content hierarchy guiding users from awareness to conversion.
Scroll Animations
Framer Motion powered entrance animations with staggered reveals and parallax effects.
SEO with JSON-LD
Structured data schema for rich search results, targeting Italian cultural sector keywords.
Netlify Forms
Serverless form handling with spam protection and instant email notifications.
Mobile-First
Responsive design starting from 375px, optimized for every breakpoint up to 1440px.
Optimized Fonts
Self-hosted WOFF2 with font-display: swap, eliminating layout shift and external requests.
Interactive Tabs
Dynamic tab components for the Smart Guide section, showcasing platform capabilities.
Click-to-Call CTAs
Phone, WhatsApp, and form CTAs strategically placed for maximum lead generation.

The Build in
Perspective

A quantitative look at what was accomplished in just three and a half days of human-AI collaboration.

3 Days
Total Duration
530
Tool Invocations
102
Preview Screenshots
17
Components Built
54
Files Committed
7.739
Lines of Code

The Stack

Modern tools chosen for developer experience, performance, and production reliability.

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