Fikus

I want to break free

Fikus è un bed & breakfast situato nella magnifica Valle d’Itria, a Ceglie Messapica. È nato dall’incontro di due vite – quelle di Francesco e Luisa – due pugliesi migranti per il mondo impegnati nella carriera professionale. Si incontrano a Bruxelles, un po’ per caso, che diviene così culla della loro storia. Insieme hanno preso una decisione coraggiosa: barattare la loro vita internazionale, ricca di stimoli e opportunità lavorative, per inseguire un sogno. Per loro Fikus diviene un luogo dove conciliare gli impegni professionali frenetici e veloci sotto l’ombra di un ulivo, a respirare l’odore della propria terra, con lentezza.

Problem statement

Fikus raccoglie le prenotazioni per le sue camere attraverso diversi canali, tra i quali il sito web. La prenotazione avviene tramite un booking engine interno gestito da un plugin freemium, limitato nelle features nella versione gratuita. L’interfaccia si presenta generalmente congestionata e i processi di settaggio della disponibilità poco intuitivi e macchinosi.

Approccio

Adottando il processo Agile, ho effettuato ricerche intensive sulle soluzioni più comuni di booking per ricreare pattern familiari per l’utente. Le ideazioni e successive iterazioni sono state rapide e supportate da test a campione condotte su utenti target. Il processo Agile usato è mostrato in basso.

Design di partenza

I campi di inserimento dati si sviluppano in fixed-width (220px) non beneficiando dello spazio massimo a disposizione. Ne consegue che per campi complessi (specialmente su mobile) il testo entra in overflow costringendo uno scrolling orizzontale nei moduli a linea singola, verticale per quelli multiriga. Inoltre:

  • È assente un campo che consenta la scelta delle date di prenotazione;
  • I campi “Adulti” e “Bambini” sono impostati come testuali anziché numerici.
Progetto Fikus - Vecchio form di prenotazione delle camere del beb - Portfolio di Gianluca Rinaldi Web Designer

Soluzione

La UI è stata rivista per osservare i principi di usabilità e responsive design, a partire dall’uso di una struttura fluida. La disposizione è rimasta colonnare, ma con un layout diviso che vede le labels a sinistra e il campo a destra, per adattarsi ai pattern di lettura F-shaped e consentire una revisione più agevole in caso di errore di compilazione. I moduli date-picker rendono semplice la scelta delle date di check-in e check-out; basandosi su precedenti richieste speciali, il form presenta un nuovo campo per comunicazioni al gestore.

Not so fast

Durante la UX audit sul sito, ho notato che una delle pagine più visitate, la Gallery, presentava un load time insolitamente lungo. I risultati GTMetrix parlano di un peso di 34MB per 71 foto complessive.

GT Metrix: Before

23 sec

Fully Load Time

34 MB

Total Page Size

Problem statement

Nella pagina Gallery la struttura a griglia adoperata, unitamente al numero di immagini, rende difficile la sua esplorazione. Le immagini stesse sono deformate, a causa di un ratio incorretto. Attivando la lightbox, questa consente l’esplorazione di una singola categoria per volta; inoltre, su mobile, i tasti di navigazione non sono grandi abbastanza per un touch agevole. Infine, non tutte le foto sono di interesse effettivo per l’utente.

LA SOLUZIONE

Adottando uno slider siamo in grado di risolvere la maggior parte dei problemi riscontrati. Le foto inserite sono state ridotte considerevolmente operando una scelta stilistica e funzionale agli ambienti più importanti: piscina, camere, spazi esterni e comuni.

GT Metrix: After

3,4 sec

Fully Load Time

5 MB

Total Page Size

Gli assets fotografici costituiscono un’ulteriore area di improvement del website. Con esclusione delle illustrazioni (che godono di percentuali di compressione molto elevate), quasi tutte le fotografie presenti eccedevano il treshold ottimale (180 – 230 KB), raggiungendo picchi massimi di 4 MB e pesando in media 500 KB. Determinando il massimo fattore di qualità disponibile il budget per ciascuna immagine è stato fissato a 230 KB. La lavorazione delle immagini è avvenuta in Photoshop e Riot (strumento di batch processing per larghi quantitativi di immagini). La riduzione complessiva è stata pari al 71% in home (da 8 a 2 MB) e dell’88% in gallery (da 34 a 5 MB). Altri assets minori sono stati compressi con un guadagno aggiuntivo di 400 KB.

Country roads take me home

Parte dell’improvement UX è la riorganizzazione dell’information architecture del sito. La “Fikus Experience” si arricchisce con le attività campestri, i posti da visitare, le cose da fare. Nel website questo traspare dalla pagina aggiunta “Vita pugliese”, compendio dei posti circostanti assolutamente da visitare. Fikus non è un b&b tradizionale: la sezione aggiunta “Eventi” invita gli ospiti a condividere la bellezza di un matrimonio o evento privato presso la struttura. Fikus è una perla incastonata nella campagna: può non essere semplice per ospiti internazionali districarsi nelle stradine offroad. La sezione “Come raggiungerci” lo spiega accuratamente, comprendendo i principali mezzi di arrivo.

Last words

Il lavoro svolto da Francesco e Luisa in Fikus è meticoloso, seguendo un’evoluzione che li ha portati a divenire, in poco, una riconosciuta perla di architettura e bellezza naturale. Il website doveva rispecchiare questa attenzione, favorendo la sua scoperta in tempi rapidi e fornendo la possibilità di ricevere conversioni in ambito mobile più efficacemente. Di Fikus hanno parlato Elle Decor, Domus, Marcopolo e Corriere Livingx

FollowIns.Lin.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!