Affittacamere a Livorno, tra centro e porto

00

Overview

Aria di Mare è un affittacamere a Livorno, tra il centro storico e il porto. Il sito presenta la struttura, le cinque camere a tema venti e i contatti per prenotare, con una gestione camere pensata per il quotidiano.

01

Low-Fid Linear Wireflow

Due percorsi sullo stesso inventario di camere: l'ospite che sceglie dove dormire e il gestore che tiene aggiornata la vetrina.

02

User Interview

Due voci emerse dal lavoro sul prodotto: chi cerca una camera a Livorno e chi la tiene aggiornata, con richieste tradotte in scelte di design.

User interview · Ospite

Ospite in viaggio

Famiglia o coppia in visita a Livorno: vuole capire subito dove si trova la struttura, che atmosfera offre e quale camera scegliere, senza confusione su regole, servizi o contatti.

Insight

1. 01 Posizione e atmosfera prima del listino

   «Voglio capire se siamo vicini al porto e al centro, e se il posto ha carattere, non solo un prezzo.»

   Cosa abbiamo integrato: hero con claim "Tra centro e porto", decorazioni a onda e camere che portano il nome dei venti.

2. 02 Confronto camere senza labirinto

   «Se ci sono cinque camere, voglio vederle insieme e poi entrare nel dettaglio con foto e servizi.»

   Cosa abbiamo integrato: griglia Camere con card omogenee, poi scheda con gallery, chip servizi e prezzo a notte.

3. 03 Azione chiara verso la prenotazione

   «Quando mi piace una camera, non voglio cercare il numero tra dieci menu.»

   Cosa abbiamo integrato: CTA "Prenota ora" e "Verifica disponibilità" ricorrenti, più una pagina Contatti con telefono, email, mappa e form.

User interview · Gestione

Gestore struttura

Tiene aggiornati prezzi, letti, foto e disponibilità delle cinque camere. Ha bisogno di un flusso ripetibile, comprensibile e veloce anche quando aggiorna di fretta tra un check-in e l'altro.

Insight

1. 01 Modifica senza rifare tutto

   «Cambio prezzo o foto di una camera: voglio aggiornare solo quella, non ricostruire la pagina.»

   Cosa abbiamo integrato: un builder per singola camera con prezzo, letti, foto e disponibilità, aperto direttamente dalla riga in lista.

2. 02 Allineamento vetrina e gestione

   «Quello che pubblico deve essere subito quello che vede l'ospite.»

   Cosa abbiamo integrato: flusso lineare lista, builder, pubblicazione: la camera aggiornata compare sulla scheda pubblica senza passaggi intermedi.

3. 03 Dati utili in un colpo d'occhio

   «Prezzo a notte, posti letto e disponibilità devono essere evidenti anche quando aggiorno di fretta.»

   Cosa abbiamo integrato: campi guidati nel builder e la stessa gerarchia di dati su card e scheda pubblica.

03

Project Roadmap

1. 01

   UX Research

   Contesto hospitality locale, competitor e vincoli di brand dai mockup del cliente: onde, palette marina, tipografia.

2. 02

   Initial User Flows

   Requisiti dell'ospite (scoperta, confronto, contatto) e del gestore (aggiornamento camere e disponibilità).

3. 03

   Wireframing

   Struttura di Home, Info e regolamento, Camere, cinque schede e Contatti, con CTA e collegamenti trasversali.

4. 04

   High-Fidelity UI Design

   Lavoro pixel su hero e onde, card camere, scheda split desktop, token di colore e tipografia.

5. 05

   Client Validation

   Allineamento ai mockup, revisione della gestione camere e raccolta dei feedback del cliente.

6. 06

   Web Implementation

   Tema custom, sezioni servizi, gallery a carosello, form contatti e builder camere.

7. 07

   User Testing

   Verifica responsive tra crop hero mobile e composizione desktop, leggibilità delle CTA e feedback finale.

04

Site map

Tre percorsi di conversione sul sito pubblico e un flusso di gestione lineare. Ogni freccia è un'azione reale: nav, bottone o click su card.

05

Product & design

Identità visiva allineata al sito live ariadimarelivorno.it: palette marina su base crema, tipografia editoriale e token UI coerenti con il brand Aria di Mare.

Logo ufficiale Aria di Mare. Marchio con sole e onda in blu e cyan, usato in header, hero e footer del sito live: la stessa immagine di sole sul mare che apre la home.

Decisioni UX / UI

↳

Schermate prodotto

Schermate dal sito live: ogni immagine illustra una scelta di prodotto o di design, non decorazione generica.

ariadimarelivorno.it

Percorso ospite · Home

Prima impressione marina

Atmosfera e posizione above the fold, con CTA verso prenotazione o camere. Onde e icone barca sul crinale; su mobile il crop resta centrato sulla composizione utile invece di scalare tutta l'illustrazione.

Hero Prenota ora

→ Scelte UX

ariadimarelivorno.it/camere

Inventario · Camere

Griglia a tema venti

Confronto rapido delle cinque camere: card omogenee con ingresso chiaro alla scheda, coerenti con la palette crema e gli accenti cyan e blu del brand.

Camere Confronto

→ Percorso B in site map

ariadimarelivorno.it/camere/maestrale

Percorso ospite · Scheda camera

Gallery e dettagli

Layout split su desktop: descrizione, servizi, prezzo a notte e "Verifica disponibilità" a sinistra, gallery a carosello a destra per valutare la stanza prima del contatto.

Gallery Prezzo a notte

→ Insight dell'ospite

ariadimarelivorno.it/contatti

Percorso ospite · Contatti

Prenota e raggiungi

Chiusura del percorso di conversione: canali diretti, mappa e form allineati alle CTA "Prenota ora" presenti sul resto del sito, così ogni strada porta allo stesso punto di contatto.

Contatti Form

→ Percorsi CTA

06

Outcome

Indicatori attesi per un affittacamere locale a Livorno: stime plausibili dopo il go-live, coerenti con il contesto del cliente, non dati di analytics.