Sei offerte. Tre percorsi. Una piattaforma chiara.
Per Cintia Németh sviluppiamo una piattaforma bilingue che riunisce in un unico luogo le sue offerte di allenamento, consulenza e prodotti. Le potenziali clienti possono confrontare le prestazioni, consultare i prezzi e trovare il percorso giusto verso la prenotazione o l'acquisto.
- Committente
- Cintia Németh
- Settore
- Salute e fitness
- Lingue
- Ungherese, Inglese
- Stato
- In realizzazione
- Volume del progetto
- CHF 5'000–10'000
- Sito web
- ciklusfit.hu
- Strategia e architettura dell'informazione
- Design UX/UI e sistema di design dedicato
- Sviluppo web su misura
- Realizzazione multilingue
- Gestione del consenso e integrazioni
- Hosting, deployment e assistenza tecnica
I contenuti specialistici, i prezzi e il materiale fotografico provengono dalla committente.
Budapest, Ungheria
Gestione del progetto dalla nostra sede di Alt St. Johann (CH‑SG). Sede del progetto: Budapest.
Un'offerta cresciuta aveva bisogno di una struttura digitale centrale
Cintia Németh è personal trainer, consulente nutrizionale e di stile di vita nonché formatrice per l'equilibrio del ciclo. Finora le sue prestazioni venivano presentate soprattutto su Instagram e Facebook. Per le sei offerte diverse mancava però una panoramica centrale e reperibile nel tempo.
Le interessate dovevano spesso chiedere direttamente prezzi, contenuti e possibilità di prenotazione. Questo causava un lavoro manuale ricorrente e rendeva più difficile confrontare le offerte.
- 01Presentare sei offerte in modo chiaro
- 02Rendere confrontabili prestazioni, prezzi e condizioni
- 03Offrire per ogni offerta il percorso di prenotazione o acquisto adatto
- 04Offrire due versioni linguistiche autonome
- 05Integrare contenuti personali e informazioni specialistiche
- 06Integrare i servizi esterni nel rispetto della protezione dei dati
- 07Aggiungere nuove offerte senza una ristrutturazione di fondo
Prestazioni diverse richiedono percorsi di prenotazione diversi
Le sei offerte si distinguono per contenuti, durata, struttura dei prezzi e processo di prenotazione. La sfida consisteva nel combinare una struttura informativa comune con percorsi di prenotazione individuali.
- Formati diversi
- Allenamento in presenza e online, consulenza, programmi sul ciclo e prodotti digitali richiedono informazioni diverse. Mentre per gli allenamenti contano soprattutto pacchetti e appuntamenti, una consulenza inizia spesso con un primo colloquio.
- Tre percorsi di prenotazione e acquisto
- A seconda dell'offerta, la piattaforma porta alla scelta del pacchetto, al primo colloquio o all'acquisto diretto. Ogni percorso è calibrato sulla prestazione.
- Plurilinguismo e servizi esterni
- Ungherese e inglese hanno URL propri e indicizzabili. I servizi di appuntamenti e statistiche soggetti a consenso vengono caricati solo dopo il consenso necessario.
Un sistema per offerte e processi diversi
La piattaforma è ancora in fase di realizzazione. I dati su reperibilità, richieste e prenotazioni potranno essere raccolti solo dopo la messa online.
Una struttura comune per sei offerte diverse
Tutte e sei le offerte seguono la stessa struttura informativa: trovare l'offerta, confrontare prestazioni e prezzi, scegliere il passo successivo. Contenuti e percorsi di prenotazione restano individuali.
- GruppoMovimento e allenamentoOfferte: Allenamento in presenza e onlinePasso successivoScelta del pacchetto
- GruppoConsulenza e accompagnamento del cicloOfferte: Consulenza su alimentazione e stile di vita, programma sul cicloPasso successivoPrimo colloquio
- GruppoProdotti digitaliOfferte: E-book, video di allenamentoPasso successivoAcquisto diretto
Percorso dell'utente
Le interessate arrivano all'offerta adatta tramite la homepage, i motori di ricerca o i social media.
Interesse
Accesso da canali diversi.
Confrontare le offerte
Consultare prestazioni, prezzi e condizioni.
Scegliere il passo successivo
Primo colloquio o scelta del pacchetto.
Prenotazione o checkout
Concludere il processo adatto.
Conferma
Ricevere una conferma di prenotazione o una risposta.
Decisioni strutturali centrali
- Tre ingressi invece di sei equivalenti
- Il raggruppamento facilita l'orientamento e il confronto tra le singole offerte.
- Percorsi di prenotazione individuali
- A seconda della prestazione, il passo successivo porta alla scelta del pacchetto, al primo colloquio o all'acquisto diretto.
- URL linguistici autonomi
- Ungherese e inglese hanno URL propri e indicizzabili. Canonical e hreflang collegano le versioni linguistiche.
- Consenso prima della prenotazione esterna
- Un componente locale informa sull'integrazione. Il servizio esterno viene caricato solo dopo il consenso necessario. Il resto del sito resta utilizzabile in ogni caso.
Dal wireframe al sistema di design
Il wireframe definisce per ogni offerta classificazione, immagine, caratteristiche, prezzi e passo successivo. La realizzazione riprende gli stessi componenti con materiale fotografico, colore e un percorso chiaro per pacchetto.
Superfici di base calde, verde salvia e verde bosco creano un aspetto calmo. Colori, spaziature, raggi e stati sono gestiti come valori di design riutilizzabili, affinché le nuove pagine restino coerenti e facilmente ampliabili.
- #FDFBF8#FDFBF8Superficie di baseSilk White
- #F3F7F3#F3F7F3Superficie tonaleVery Light Lichen
- #71877A#71877AColore del marchioMain Brand Sage
- #55685D#55685DSuperficie heroHero Sage
- #2D3932#2D3932TitoliDark Forest Sage
- #26211D#26211DTesto correnteDeep Charcoal
- #544D46#544D46Testo secondarioWarm Grey
- #E8E4DB#E8E4DBLinee di separazioneSilk Border
Mente sana in corpo sano
Playfair Display · Titoli
AaBbCc 0123456789 ÁÉÍÓŐÚŰ áéíóőúű
Inter · Testo corrente ed etichette
Ogni colore del testo è misurato sul proprio sfondo: il testo bianco sulla tonalità hero raggiunge 5,96:1 e supera quindi la soglia WCAG AA di 4,5:1 per il testo corrente.
Il sistema di design in dettaglio
- 2.5rem
- 2rem
- 1.5rem
- Superficie di base
- Superficie tonale
Anello di focus: 2px Main Brand Sage
Testo bianco sul tono hero
5,96:1Testo bianco sul colore del marchio
3,85:1Con testo bianco il tono hero raggiunge 5,96:1 e supera così il requisito WCAG AA di 4,5:1 per il testo corrente. Il tono di marchio più chiaro raggiunge 3,85:1 e viene quindi usato solo per caratteri grandi, superfici, bordi e icone.
Offerte, contenuti personali e prenotazione su un'unica piattaforma
La piattaforma collega sei offerte a contenuti specialistici e personali. Tutte le offerte seguono la stessa struttura informativa, ma mantengono prezzi, condizioni e percorsi di prenotazione propri. Nuove prestazioni si possono aggiungere senza una ristrutturazione di fondo.
Una pagina «Chi sono», le testimonianze dei clienti e una galleria dei risultati offrono uno sguardo sulla persona dietro l'offerta.
Prezzi e pacchetti si trovano direttamente presso l'offerta. A seconda della prestazione seguono scelta del pacchetto, primo colloquio, prenotazione di un appuntamento o, in seguito, l'acquisto diretto.
Sui dispositivi mobili vengono adattati disposizione, ritagli delle immagini e interazione. La struttura informativa resta invariata.
Il checkout è allineato ai percorsi di prenotazione previsti e al mercato ungherese.
Una base tecnica che cresce con l'offerta
La realizzazione su misura si basa su Next.js, React, TypeScript e Tailwind. Offerte, contenuti e integrazioni sono strutturati in modo che nuove prestazioni possano essere aggiunte senza un nuovo concetto di pagina. I contenuti principali si trovano nell'HTML consegnato; l'interattività viene aggiunta solo dove serve. Le informazioni essenziali restano così disponibili senza ulteriore esecuzione lato client, leggibili per i motori di ricerca e accessibili indipendentemente dalle integrazioni esterne.
- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (ungherese / inglese)
- Calendly — prenotazione appuntamenti
- Google Analytics — statistiche
- Modulo consent — consensi
- Modulo messaging — invio moduli
- Fornitore di pagamento — predisposto
- Immagine Docker (standalone)
- Registry privato
- GitHub Actions (CI/CD)
- Gestione dei secret
Evidenze
Configurazione centrale delle offerte
Immagine, tipo di offerta, caratteristiche, struttura dei prezzi, logica di prenotazione e altre proprietà tecniche sono definite centralmente.
Una nuova offerta richiede sostanzialmente una voce di configurazione e i contenuti corrispondenti in entrambe le lingue; le strutture di pagina esistenti restano invariate.
Prenotazione, checkout e consenso
La gestione del consenso utilizza il modulo riutilizzabile di Woop Technology. Categorie, servizi e valori di memorizzazione dichiarati sono definiti centralmente; i valori gestiti tramite l'infrastruttura di consenso devono essere registrati nel registry.
I servizi di appuntamenti e statistiche soggetti a consenso si caricano solo dopo il consenso. La funzione di consenso non richiede alcun fornitore CMP esterno. Il checkout è predisposto per collegare in seguito un fornitore di pagamento intercambiabile, senza ricostruire la struttura di offerta e prenotazione. La sua struttura dati separa i dati di contatto e di fatturazione e tiene conto dei requisiti di fatturazione locali e degli importi in fiorini ungheresi.
Hosting, deployment e assistenza
L'applicazione viene consegnata come container autonomo e non è legata né a un costruttore di siti né a un determinato provider di hosting. Il setup comprende la distribuzione basata su container, la gestione privata dei pacchetti per i moduli comuni, controlli di tipo e build automatici, release versionate e deployment controllati.
Le versioni pubblicate sono riproducibili e all'occorrenza possono essere riportate a uno stato precedente.
Reperibilità tecnica
- titoli e descrizioni propri per ogni prestazione e lingua
- URL stabili e leggibili con prefisso di lingua
- URL canonici autoreferenziali e collegamenti hreflang
- sitemap, navigazione e canonici da un'unica fonte di percorsi
- contenuti principali disponibili lato server
- distribuzione delle immagini ottimizzata
- collegamenti interni strutturati tra gruppi, offerte e conclusioni
Una base centrale per offerte, orientamento e prenotazione
La piattaforma riunisce sei offerte in un unico luogo e le collega a percorsi di prenotazione e acquisto adatti. L'utilizzo effettivo e la reperibilità potranno essere valutati solo dopo la messa online.
- Sei offerte in tre gruppi chiari.
- Prezzi trasparenti e pacchetti confrontabili direttamente presso l'offerta.
- Tre percorsi adatti: scelta del pacchetto, primo colloquio o acquisto diretto.
- Due versioni linguistiche: ungherese e inglese.
- Integrazione attenta alla privacy: i servizi soggetti a consenso si caricano solo dopo il consenso.
- Struttura estendibile: nuove offerte e percorsi di prenotazione senza una ristrutturazione di fondo.
Hanno creato per me un sito bellissimo, chiaro ed elegante. Il loro lavoro mi soddisfa pienamente. Sono stati pazienti e gentili durante tutto il processo. Li ringrazio di cuore.
Tradotto dall'inglese — Mostrate l'originale
They created a beautiful, clean, and elegant website for me. I’m completely satisfied with their work. They were patient and kind throughout the entire process. I’m truly grateful.
- Web Design & RelaunchStruttura delle offerte, Percorso utente, Layout mobile
- Branding & UX/UI DesignWireframe, Sistema di design, Verifica del contrasto
- Sviluppo web, piattaforme e integrazioniConfigurazione delle offerte, Percorsi di prenotazione, Checkout
- SEO, GEO & PerformanceURL per lingua, hreflang, Sitemap
- Hosting, Manutenzione & InfrastrutturaContainer, Release versionate, Assistenza tecnica
- Protezione dei dati & Consent ManagementConsent, Analytics, Prenotazione dopo il consenso
Avete un'offerta che non si lascia comprimere in un modello standard?
Nel primo colloquio chiariamo di cosa si compone la vostra offerta e come può diventare una struttura che cresce con voi.