Web Designer & Developer Web Designer & Developer -
Screenshot del sito web della palestra Medusa More Than Crossfit di Parma - design responsive WordPress

Medusa More Than Crossfit

The Mission Palestra CrossFit e Calisthenics a Parma nata da split societario. Obiettivo: acquisire nuovi iscritti e trattenere clientela gestione precedente. Discovery & Style Exploration Division of labor: Target: adulti 25-45, fitness funzionale, clienti precedente gestione + nuovi utenti intimiditi da CrossFit puro. Visual direction: logo viola/beige/giallo fornito cliente. Palette energica ma accessibile. Asset: video interno palestra, foto […]

  • Anno 2022
  • Cliente Medusa more Than Crossfit
  • Stato legacy
  • Ambito
    • Development
    • UI/UX design
    • Web Design
  • Link Offline

The Mission

Palestra CrossFit e Calisthenics a Parma nata da split societario. Obiettivo: acquisire nuovi iscritti e trattenere clientela gestione precedente.

  • Posizionamento “More Than CrossFit”: offerta integrata (CrossFit, Calisthenics, fisioterapia, osteopatia, nutrizione)
  • Budget limitato, timeline compressa (lancio 30 aprile)
  • Deliverable: one-page scroll + landing promozionale per Meta Ads
  • Collaborazione: Oreste Giacomini (SMM/Meta Ads) — project management, client relations, funnel strategy, ads, social media; Marco Olmedi — sviluppo tecnico landing pages

Discovery & Style Exploration

Division of labor:

  • Oreste: strategia funnel, gestione cliente, campagne Meta Ads, profili social
  • Marco: design sito web, execution tecnica landing pages WordPress custom

Target: adulti 25-45, fitness funzionale, clienti precedente gestione + nuovi utenti intimiditi da CrossFit puro.

Visual direction: logo viola/beige/giallo fornito cliente. Palette energica ma accessibile.

Asset: video interno palestra, foto allenamenti alta risoluzione (compressione necessaria), copy sezioni principali.

Visual Identity & Design

Hero section:

  • Video background loop palestra (timer CrossFit, trainer, attrezzature Lacertosus)
  • Overlay viola semitrasparente (opacity 40%) per leggibilità testo
  • Hierarchy:
    • Pre-headline giallo: “CERCHI PIÙ DI UN BOX CROSSFIT A PARMA?”
    • Headline bianco bold: “MEDUSA More Than CrossFit dal 30 aprile a Parma”
    • Body copy: value proposition personalizzazione
    • CTA giallo: “ISCRIVITI AL NOSTRO OPEN DAY!”

Layout one-page:

  1. Hero video + CTA
  2. Value proposition (foto + testo “More Than Crossfit è l’evoluzione…”)
  3. Staff (Isabella Gatti 25 anni esperienza, certificazioni)
  4. Servizi (grid 6 discipline: CrossFit, Calisthenics, Gymnastic, Kettlebell, Functional Total Body, Flow Mobility)
  5. Personal Training
  6. Open Day details (programma orario, servizi inclusi, sconto esclusivo)
  7. Location (Maps + Via Rapallo 3/b, 250mq)
  8. Footer form + WhatsApp CTA

Landing promozionale: versione semplificata per traffico cold ads, form above fold.

Tipografia: Montserrat sans-serif, gerarchia 3 livelli (pre-headline 18px, headline 48px desktop/32px mobile, body 16px).

UX & Content Strategy

Funnel strategy (Oreste):

  • Meta Ads → Landing promozionale (lead capture) + One-page (nurturing)
  • Retargeting → One-page programma dettagliato

Architettura one-page: Flusso lineare risponde obiezioni: urgenza locale → differenziazione → credibilità staff → varietà servizi → personalizzazione → riduzione friction (Open Day gratuito + sconto) → community (DJ set).

Copywriting (fornito Oreste):

  • Benefit-driven: “programma mirato e personalizzato in base alle tue esigenze ed al tuo livello”
  • Geo-localizzazione: “a Parma” in headline
  • Scarcity: “dal 30 aprile” + “sconto speciale Open Day”
  • CTA event-based: urgenza temporale + commitment qualificato vs prova generica

Mobile-first: video portrait, CTA sticky scroll, form minimal 4 campi (Nome, Email, Telefono, Classe preferita).

Development

Stack: WordPress custom theme, Bootstrap 5, Gutenberg + custom CSS, PHP 7.4.

Ottimizzazioni performance:

  • Video hero: compressione 1920×1080 → 1280×720 desktop, H.264 bitrate 2Mbps, peso finale ~2.8MB desktop, durata 10s loop, fallback WebM
  • Immagini: WebP + JPEG fallback, lazy loading
  • Font: Montserrat subset pesi 400,600,700, preload critical, font-display swap
  • Critical CSS inline, non-critico deferred
  • Caching asset statici

Integrazioni (config Oreste, implementazione Marco):

  • Meta Pixel: PageView + Lead custom event form submit
  • Google Maps lazy load Intersection Observer
  • WhatsApp click-to-chat mobile

Performance PageSpeed:

  • Mobile: 78/100, FCP 2.6s, LCP 3.4s, Accessibility 94
  • Desktop: 92/100, FCP 1.1s, LCP 1.8s, Accessibility 94

Results

Deliverable: one-page + landing promozionale, sviluppo 2 settimane.

Gestione post-lancio:

  • Social + ads: Oreste
  • Aggiornamenti sito: Marco

Outcome business: Terminata collaborazione dopo 12 mesi in seguito a rebranding, palestra operativa 24 mesi

Learnings & Conclusion

Cosa ho imparato:

  1. Video background richiede compressione aggressiva — target <3MB mobile, poster fallback critico per FCP rapido
  2. Overlay semitrasparente essenziale — contrasto testo su video dinamico impossibile senza layer (accessibility WCAG AA)
  3. Collaborazione SMM specialist efficace — division of labor chiara (strategia vs execution), brief tecnico Oreste (copy, asset, pixel) elimina ambiguità
  4. Mobile-first per traffico ads — portrait video, CTA sticky, form minimal
  5. Event-based CTA > generico — “Iscriviti Open Day” + deadline genera urgenza vs “Contattaci”

Cosa farei diverso:

  1. Lazy load video hero — poster statico priorità, video load differito post-interaction (guadagno 1-1.5s FCP)
  2. Compressione ulteriore — poster JPEG → WebP (-70% peso), video bitrate 1.5Mbps vs 2Mbps
  3. Schema.org Event markup — rich snippet SERP + SEO local
  4. Test screen reader — score Accessibility 94 buono, ma validazione manuale navigazione tastiera non eseguita

Valutazione collaborazione Oreste:

  • Brief tecnico chiaro (copy final, asset, struttura landing)
  • Client relations gestite interamente da Oreste = focus sviluppo zero interruzioni
  • Feedback loop rapido WhatsApp, modifiche <24h
  • Testing ads/landing: Oreste validava conversion, Marco iterava ottimizzazioni tecniche

Valutazione tecnica: obiettivi raggiunti. Video hero bilanciamento impatto visivo / performance. Lighthouse score accettabile vincoli (shared hosting, video background, timeline stretta).

Outcome business: chiusura non correlabile inefficacia tecnica. Split societario + competizione diretta = fattori extra-digitali.

Conclusione: progetto dimostra efficacia collaborazione SMM specialist + Developer WordPress. Video hero one-page + funnel Meta Ads = approccio replicabile launch palestre boutique vincoli budget/tempo. Esperienza rafforza competenza landing conversion-focused + integrazione tracking Meta.