Web designSviluppoInfrastruttura
Woop Art
Uno spazio d'arte digitale che presenta le opere con grande efficacia e accompagna i visitatori attraverso la galleria senza sforzo.
Tutte le referenze
Anteprima di progetto · Salute e fitness femminile
Sei offerte.Tre percorsi di prenotazione.Una piattaforma chiara.
Per Cintia Németh, personal trainer e consulente per la salute femminile, nasce una piattaforma che ordina le prestazioni in modo comprensibile e convoglia le richieste dai social media in processi di prenotazione e acquisto adeguati.
Dati di progetto
- 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
Il nostro ruolo
- 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.
L'ampiezza del progetto in sintesi
Un sistema per offerte e processi diversi
6
offerte
3
gruppi di offerte
2
lingue
3
processi di prenotazione e acquisto
1
struttura informativa comune
La piattaforma è in fase di realizzazione. I dati su reperibilità, richieste e prenotazioni verranno rilevati dopo la messa online.
01Situazione di partenza
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. Le sue prestazioni venivano presentate soprattutto tramite Instagram e Facebook. Per sei formati diversi mancava però una panoramica duraturamente reperibile e confrontabile.
Prezzi, differenze e possibilità di prenotazione dovevano spesso essere chiesti tramite messaggio diretto. Ne derivava un lavoro manuale ricorrente, mentre le informazioni importanti restavano poco reperibili nei feed dei social media.
Prima
- DM Instagram
- Richiesta diretta
- A voce
Dopo
- Sito centrale
- Offerte chiare
- Sistema di prenotazione
- Checkout predisposto
- Bilingue
Requisiti della nuova piattaforma
- articolare sei formati in modo comprensibile
- presentare prezzi e condizioni in modo trasparente
- rendere visibili le differenze e confrontabili le offerte
- fornire due versioni linguistiche equivalenti
- coprire prenotazione, primo colloquio e acquisto diretto
- integrare i servizi esterni nel rispetto dei dati
- aggiungere nuove offerte senza una riprogettazione di fondo
02Sfida
Prestazioni diverse richiedono percorsi decisionali diversi
Le offerte si differenziano per contenuto, luogo, durata, struttura dei prezzi e passo successivo sensato. Una presentazione standard avrebbe offuscato queste differenze.
Formati diversi
Allenamento in presenza e online, consulenza nutrizionale e di stile di vita, un programma del ciclo in più parti e contenuti digitali. Alcune prestazioni sono selezionabili direttamente, altre iniziano opportunamente con un colloquio personale.
Tre processi
Gli allenamenti portano ai carnet, le consulenze al primo colloquio e i prodotti digitali direttamente all'acquisto. Il sito deve orientare in modo comune e condurre comunque alla conclusione adeguata.
Plurilinguismo e servizi esterni
L'ungherese è la lingua predefinita, l'inglese è offerto in modo equivalente. Entrambe le versioni necessitano di URL indicizzabili propri. I servizi di appuntamenti e statistiche possono caricarsi solo dopo il consenso necessario.
03Strategia e design
Una logica informativa comune per sei offerte diverse
Invece di un modello identico è stato sviluppato un ordine comune: trovare il gruppo di offerte, comprendere l'ampiezza della prestazione, confrontare condizioni e prezzi, scegliere il passo successivo. Contenuti, prezzi, condizioni e percorsi di prenotazione restano individuali per ogni offerta.
Tre gruppi di offerte e le loro conclusioni
Il raggruppamento riduce la scelta al primo livello senza uniformare le singole prestazioni.
Percorsi di prenotazione
- GruppoMovimento e allenamentoOfferte: Allenamento in presenza nello studio privato per donne, allenamento dal vivo in videochiamataPasso successivo: Pagina dell'offerta e scelta del pacchettoObiettivoCarnet
- GruppoConsulenza e accompagnamento del cicloOfferte: Consulenza nutrizionale e di stile di vita, programma del ciclo in più partiPasso successivo: Prenotazione appuntamentoObiettivoPrimo colloquio
- GruppoProdotti digitaliOfferte: E-book, video di allenamentoPasso successivo: CheckoutObiettivoAcquisto diretto
Percorso dell'utente
Chi conosce l'offerta adatta entra direttamente; chi cerca ancora orientamento può scegliere prima un colloquio personale.
Interesse
Ingresso dalla home page, da un motore di ricerca o dai social media.
Confrontare le offerte
Tre gruppi danno orientamento; ampiezza della prestazione, condizioni e prezzi sono presentati in modo trasparente.
Primo colloquio o scelta del pacchetto
A seconda della prestazione, il dettaglio dell'offerta porta al colloquio personale o direttamente al pacchetto.
Prenotazione o checkout
Le prestazioni legate a un appuntamento passano alla prenotazione, quelle acquistabili direttamente al checkout.
Conferma
Dopo la conclusione la cliente riceve la conferma o il riscontro corrispondente.
Decisioni strutturali centrali
Tre ingressi invece di sei equivalenti
I gruppi rispondono prima alla domanda se si cerchi allenamento, consulenza o un prodotto digitale, e facilitano poi la scelta concreta.
Più percorsi di conversione invece di uno solo
Le clienti già in allenamento possono scegliere direttamente un pacchetto; per una consulenza ampia, un primo colloquio chiarisce prima il bisogno.
URL linguistici autonomi
Percorsi come /hu/szolgaltatasok e /en/services possono essere aperti, condivisi, collegati e indicizzati separatamente. Canonical e hreflang collegano le versioni; il plurilinguismo è così parte dell'architettura dell'informazione e non un semplice cambio di testo.
Consenso prima della prenotazione esterna
Un componente locale informa dapprima sull'integrazione. Il servizio esterno viene caricato solo dopo la decisione necessaria; il resto del sito resta utilizzabile indipendentemente.
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. Dati quadro, caratteristiche e fasce di prezzo stanno direttamente presso l'offerta corrispondente.
Valori cromatici
HexUtilizzo
- #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
Caratteri
Ép Testben Ép Lélek
Playfair Display · Titoli
AaBbCc 0123456789 · ÁÉÍÓŐÚŰ áéíóőúű
Inter · Testo corrente ed etichette
Componenti
Pulsante primario999px
Standard
Hover
Focus
Disattivato
Pulsante secondario14px
Standard
Hover
Focus
Disattivato
Badge (durata)999px
Standard
Hover
Focus
Disattivato
Campo di immissione14px
Standard
Hover
Focus
Disattivato
Pulsante primario999px
Pulsante secondario14px
Badge (durata)999px
Campo di immissione14px
Standard
Hover
Focus
Disattivato
Anello di focus: 2px Main Brand Sage
Raggi e superfici
- 2.5rem
- 2rem
- 1.5rem
- Superficie di baseSilk White
- Superficie tonaleVery Light Lichen
Verifica del contrasto
Testo bianco sul tono hero
5,96:1#FFFFFF · #55685DWCAG AA · testo corrente
Testo bianco sul colore del marchio
3,85:1#FFFFFF · #71877ASolo caratteri grandi
Con 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.
04La soluzione
Struttura dell'offerta, fiducia e prenotazione in un unico sistema
La piattaforma collega sei offerte strutturate con contenuti specialistici e personali e con i passi successivi adeguati. Ogni offerta segue la stessa logica informativa, ma mantiene contenuti, prezzi, condizioni e logica di prenotazione propri. Nuove prestazioni possono così essere aggiunte senza sviluppare una struttura di pagina completamente nuova.
Una pagina «chi sono» dettagliata, contenuti personali, testimonianze e una galleria di risultati e sviluppo completano le prestazioni. La separazione tra struttura dell'offerta e livello personale consente sia il confronto oggettivo sia uno sguardo sulla persona dietro l'offerta.
Prezzi, dimensioni dei pacchetti e condizioni centrali stanno direttamente presso l'offerta. A seconda della prestazione seguono la scelta del pacchetto, il primo colloquio, la prenotazione dell'appuntamento o, più tardi, l'acquisto diretto di un prodotto digitale.
Mobile e desktop usano la stessa architettura dell'informazione, ma non necessariamente la stessa disposizione. Per i display stretti vengono adattati ordine, inquadrature delle immagini e distanze orizzontali, e le interazioni sono ottimizzate per il touch.
Il checkout è allineato ai percorsi di prenotazione previsti e al mercato ungherese.
05Tecnica ed esercizio
Costruito perché le estensioni non richiedano ogni volta una nuova logica di pagina
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.
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.
InterfacciaVisibile
Il sito visibile in due lingue- Next.js 16 (App Router)
- React Server Components
- Tailwind CSS v4
- next-intl (ungherese / inglese)
Risposta verso l'altoChiamata verso il basso
ServiziServizi terzi
Funzioni e integrazioni specifiche del progetto- Calendly — prenotazione appuntamenti
- Google Analytics — statistiche
- Modulo consent — consensi
- Modulo messaging — invio moduli
- Fornitore di pagamento — predisposto
Fornitura verso l'altoUtilizzo verso il basso
EsercizioInfrastruttura
Base tecnica- Immagine Docker (standalone)
- Registry privato
- GitHub Actions (CI/CD)
- Gestione dei secret
Il sito visibile resta separato dai servizi soggetti a consenso: se ad esempio una prenotazione appuntamenti esterna non viene abilitata, i restanti contenuti rimangono disponibili.
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
06Risultato
Una base centrale per reperibilità, orientamento e prenotazione
Misurabile dopo la messa onlineLa piattaforma è in fase di realizzazione. I punti seguenti descrivono lo stato previsto dopo la messa online.
- Sei offerte in tre gruppi logici – movimento e allenamento, consulenza e accompagnamento del ciclo, prodotti digitali – senza sovraccarico.
- Prezzi trasparenti e pacchetti confrontabili abbassano la soglia della prima prenotazione.
- Tre percorsi di prenotazione a seconda della maturità decisionale: scelta del pacchetto, primo colloquio o acquisto diretto.
- Bilinguismo completo (ungherese / inglese) senza oneri di traduzione nel lavoro quotidiano.
- I servizi soggetti a consenso vengono caricati solo dopo il consenso, non alla prima apertura della pagina.
- La struttura consente di aggiungere in seguito offerte e percorsi di prenotazione senza un nuovo concetto di pagina.
Portfolio
Altri progetti
- Servizio proprioPrivacyArchitetturaModulo tecnico
Gestione del consenso
Il nostro motore di consenso. Gestisce i consensi, sblocca i servizi soggetti ad autorizzazione e ripulisce i cookie in caso di revoca – mentre dati, lingue e design restano liberamente configurabili per progetto.
InterfacciaBanner e impostazioni nel design del progettoMotore di consensoStato, versionamento, registro, filtraggioSorgente datiJSON, API o CMS – intercambiabile
Il vostro progetto
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.