I proprietari stanno ristrutturando le cabine lasciate dal precedente proprietario e ne stanno costruendo di nuove. Il sito serviva per mostrare il posto agli investitori e iniziare a ricevere le prime prenotazioni. Le cabine sono diverse: una è per due persone, un’altra avrà una vasca idromassaggio o una banya, e quelle nuove saranno tutte uguali. All’inizio non c’erano nomi, foto né testi.
Brief e riferimenti
Il cliente ha condiviso i siti che gli piacciono: AutoCamp, Hinter, Our Habitas, Unyoked, Ziedlejas, Slowhop, Lumen, Treehotel. Ne è venuta fuori una lista di ciò che per lui contava:
- prima l’atmosfera, poi le informazioni;
- la natura più grande dell’interfaccia, un unico punto visivo forte;
- la prenotazione nella prima schermata, ma senza insistere;
- il pulsante di prenotazione sempre a portata di mano;
- un layout ampio, a tutto schermo.
La palette è nata dalla moodboard della ristrutturazione – i colori delle pareti e dei mobili. Il cliente ha avvisato subito che non sapeva come sarebbero apparse queste tonalità sullo schermo.
Le schermate di questo case vengono dalla seconda iterazione: è un concept, non ancora in produzione. La versione online su gorastay.com è più semplice, con la prenotazione tramite Lodgify.
Prenotazione dalla prima schermata, ma con discrezione
- Perché
- Il brief chiedeva la prenotazione nella prima schermata senza vendita aggressiva, e un pulsante di prenotazione sempre a portata di mano.
- Cosa ho fatto
- La prima schermata è un’immagine del bosco con una sottile barra di prenotazione in basso: check-in, check-out, ospiti, «Check availability». La pagina della cabina ha un pulsante «Check availability» accanto al nome, e «Book Now» è nell’header di ogni pagina.
- Risultato
- Le date si possono verificare subito senza cercare la prenotazione, mentre il bosco resta l’elemento principale sullo schermo.
Una struttura per cabine che ancora non esistono
- Perché
- Le cabine sono diverse per dimensioni e servizi extra, alcune erano ancora in ristrutturazione, e non c’erano nomi né foto.
- Cosa ho fatto
- Un catalogo in cui ogni cabina è lo stesso blocco: nome, breve descrizione, quattro foto e «More Details». La pagina della cabina ha i dati chiave (ospiti, bagno, camere da letto, posizione), una descrizione, i servizi come icone e una galleria. Finché non sono stati scelti i nomi – numerazione House #1…#7, come chiesto dal cliente.
- Risultato
- Una nuova cabina significa un nuovo blocco nel catalogo e una nuova pagina dallo stesso template, senza ricostruire il sito.
Prenotazione: il riepilogo sempre in vista
- Perché
- La prenotazione è l’azione principale del sito. Le persone devono vedere esattamente cosa stanno prenotando e a quale prezzo prima di pagare.
- Cosa ho fatto
- Una pagina separata con breadcrumb Cabins / House #1 / Booking e due passaggi: le date in un calendario di due mesi e il numero di adulti e bambini. A destra, un pannello «Your stay»: foto, prezzo per notte, date, ospiti, totale per tutte le notti, «Continue Booking» e «No hidden fees».
- Risultato
- La prima versione del sito prenota tramite Lodgify, quindi questo flusso è ancora in attesa della sua integrazione.
Handoff allo sviluppo
Prima dello sviluppo in Webflow ho preparato la struttura delle pagine, gli stili e i componenti, perché lo sviluppo fosse più rapido, coerente e senza giri di correzioni in più. Il cliente ha scelto il font dei titoli tra diverse opzioni che ho proposto, e ho consegnato il logo in tracciati vettoriali.
Il lavoro è stato diviso in fasi: design, un sito funzionante per gli investitori, contenuti, integrazioni. Il sito è stato sviluppato in Webflow con prenotazione tramite Lodgify ed è andato online su gorastay.com a luglio 2026.
Seconda iterazione – concept
La prima versione è online su gorastay.com. Dopo il lancio sono tornata sui design e ho completato ciò che era rimasto grezzo: il resto del flusso, gli stati e la versione mobile. È un concept – non è ancora in produzione. Le schermate qui sopra includono già queste modifiche.
Prenotazione: tre passaggi e una conferma
Ho ricostruito il calendario con i componenti invece che come immagine: check-in, check-out, intervallo, oggi, giorni non disponibili. Poi vengono i dati dell’ospite, il pagamento e la conferma. Il riepilogo «Your stay» è sulla griglia e accompagna ogni passaggio.
Stati e modali
La scelta di date e ospiti direttamente dal modulo «Stay a while», date non disponibili con una spiegazione e un pulsante disattivato, errori nei campi che dicono cosa correggere, e una galleria della cabina.
Prenotazione da mobile
Il cliente prevede circa il 90% delle prenotazioni da telefono, quindi tutto il flusso ha avuto una versione mobile: avanzamento «Step 1 of 3», con il totale e il pulsante fissati in basso. Per questo ho creato un UI kit – pulsanti, un giorno del calendario con 8 stati, un contatore, un input, un passaggio, una riga di riepilogo, un footer – e ho aggiunto stili di testo da 14 e 12 px.
- 01
All’inizio non c’erano contenuti, quindi il design si basa su una struttura da riempire in seguito: il cliente aggiunge foto, nomi e descrizioni delle cabin dopo il lancio.
- 02
La versione online è diversa dal design: la prima release funziona, ma è semplificata, con la prenotazione tramite un servizio esterno.
- 03
La seconda iterazione ha aggiunto la prenotazione da mobile, gli stati e un UI kit. Il prossimo passo – verificare con gli ospiti se la barra di prenotazione nell’hero è chiara anche senza un modulo separato.
