A Marzo 2022 mi sono occupato del revamp della nuova homepage di parkingo.com. Il risultato finale, frutto di un lungo processo di ricerca e analisi, ha portato al completo restyling di 4 componenti:
Ho condotto personalmente il lavoro in tutte le fasi, collaborando in modo proattivo con i reparti di Marketing e IT, per assicurarmi che tutti i requisiti tecnici e SEO fossero valorizzati al meglio.
La mission era offrire ai clienti una digital experience più immediata e intuitiva, attraverso una grafica che desse maggiore evidenza all’attività di parcheggio, core business della società. Le necessità principali del task erano:
Lo scenario presentava numerosi pain point, che ho esemplificato nell’immagine qui sopra. A questi si aggiungeva la scarsa leggibilità delle voci di menù (bianche su sfondo rosso) problematica che ho personalmente rilevato con un color contrast checker. Ho individuato la combinazione cromatica ottimale riprendendo i colori utilizzati per il form: scelta che ci ha permesso di ottenere un rating di 13.16 (contro il precedente 5.06) ed una buona leggibilità, sia sui copy di grande che di piccola dimensione.
Ho scelto di affiancare un’icona ad ogni voce di menù: in questo modo ho minimizzato lo sforzo cognitivo dell’utente, che riconosce il concetto in una frazione di secondo, senza nemmeno doversi sforzare di leggere il copy. Non a caso questo pattern è utilizzato da moltissimi brand come, ad esempio, Apple, Disney+, Booking.com, Cortilia (vedi immagine sopra a destra).
Non solo. Alla base di questa soluzione c’è un importante dato di fatto: le immagini convertono. Lo dimostra la case history di Calzedonia, che dopo aver rimosso le immagini dal menù, ha subito un calo del conversion rate pari al 5,45%. Un esempio diametralmente opposto lo fornisce, invece, Tezenis, che ha aumentato conversion rate e fatturato semplicemente arricchendo, con piccole immagini, i nomi delle categorie principali.
Dopo aver individuato i pain point della homepage e i margini di miglioramento, ho condotto un’attenta analisi delle opportunità e ho dato avvio ad una scrupolosa fase di benchmarking.
Ho analizzato un campione di 50 siti web, appartenenti a diversi settori: travel, tech, fashion luxury, food, education, metamotori di ricerca voli ed e-commerce in genere. In tutti questi siti, nello specifico, ho analizzato:
Al termine della ricerca, ho individuato 4 esempi da cui trarre ispirazione per il revamp di parkingo.com. Come si vede in figura, ho selezionato le seguenti componenti:
Ho quindi realizzato la prima versione della nuova UI, con Adoxe Xd. Nel mockup sottostante salta subito all'occhio un approccio più immediato e meno disturbante dei servizi offerti. Questo grazie ad un design più minimale e pulito, oltre che per l'uniformazione cromatica (l'unico colore che risalta è il rosso della CTA, all'interno del form di prenotazione).
A partire da questo protitipo ho sviluppato una seconda versione, in cui ho implementato un carousel dinamico con le seguenti features:
Ovviamente sfondi e tagline variano in accordo con la geocalizzazione dell'indirizzo IP. Ad esempio, un utente di Roma visualizzerà Fiumicino e Ciampino, anzichè Malpensa, Orio e Linate.
Ho quindi impostato un test di usabilità, che includeva anche la versione di partenza, per capire quali fossero le reali criticità e le migliorie da apportare ai due nuovi mockup. Il test è stato condotto su un campione di 8 persone, di varie età e con livelli di expertise differenti. È stato eseguito in modalità remota e l'intervistatore ha ricoperto, contemporanemaente, il ruolo di facilitatore, reporter e osservatore. Gli utenti sono stati rassicurati sul fatto che la loro sessione non sarebbe stata giudicata ma, anzi, avrebbe aiutato il team creativo a migliorare il nostro prodotto. Durante l'esperimento l'utente era libero di "pensare ad alta voce": non doveva necessariamente concludere il flusso di prenotazione di un parcheggio ma solo osservare la homepage; nel mentre l'intervistatore compilava il documento preparato, annotando suggerimenti e feedback riguardo l'offerta dei servizi proposti in homepage.
La scelta di testare esclusivamente 8 utenti non è casuale: infatti in un numero compreso tra 5 e 12 tester è possibile scovare almeno l'85% di errori sulla piattaforma.
Al termine dei test ho raccolto e filtrato tutti i risultati in un nuovo documento, in cui ho evidenziato 4 macro aree:
Questo processo mi ha aiutato ridefinire, ricreare e riprototipare una versione migliore (design thinking process). In relazione ai risultati del test, alle dinamiche legate al business e alla considerazioni SEO del reparto marketing, ho potuto elaborare la versione finale.
Approvata la posizione del banner sopra il form, ho deciso di ridurlo ulteriormente, lasciando all'utente la possibilità di aprirlo (tramite un click sul tasto "scopri") per poi leggerne il contenuto nella sua interezza.
Ho poi modificato il design del form, stondando gli angoli e dandogli un aspetto più user friendly (sullo stile di Airbnb) rispetto a quello precedente, che presentava una forma più squadrata.
In collaborazione con il reparto marketing, ho rimodulato lo sfondo, abbandonando l’idea di inserire un’immagine dietro al form, per evitare di appesantirlo eccessivamente. Abbiamo, infine, reso più conciso e diretto il copy, sintetizzandolo: dal momento che l’utente raggiunge la pagina direttamente dalla ricerca su Google, non abbiamo ritenuto opportuno inserire un prezzo di partenza già in homepage. Da qui la scelta di un tagline meno specifico.
Il risultato è un visual fresco, friendly e smart: l’idea del viaggio è veicolata dal tagline e riecheggiata dall’immagine di una ragazza sorridente, che non vede l’ora di intraprendere il suo viaggio. Nel banner sottostante al form, infine, vengono evidenziati i nostri tre principali punti di forza, ovvero: prezzo, navetta gratuita e parcheggi aperti 24h/365.