ParkToAir è un brand acquisito nel 2021 da ParkinGO: si rivolge ad un utente più sensibile ai prezzi ma pur sempre alla ricerca di un servizio di qualità. Questo sub-brand, ad oggi presente nelle location di Bologna, Venezia, Catania e Roma Fiumicino, aveva bisogno di un revamp completo del sito aziendale.
Lo scenario di partenza era, infatti, il seguente:
Le ampie attività di analisi svolte per parkingo.com e l’expertise maturata, si sono rivelate molto utili per ottimizzare al meglio i tempi e massimizzare l’efficacia del progetto.
Lavorando in sinergia con il team di marketing e con il reparto IT, ho elaborato lo user flow, che si basa sulle dinamiche di parkingo.com. Ho quindi definito i touch point dell’utente, tracciando il funnel che dalla homepage porta alla pagina di conferma prenotazione.
A questo punto, sempre tenendo ben presente la progettazione di parkingo.com, ho elaborato un wireframe, a bassa fedeltà, per ogni singolo step (dalla homepage, alla conferma di prenotazione). In figura è possibile vedere lo scheletro della homepage.
Tracciato lo user flow, l'architettura di navigazione e la struttura delle pagine, ho progettato il design system. Era fondamentale avere dei componenti riutilizzabili, perché l'intero sito sarebbe stato sviluppato con un CMS custom: in questo modo, tutte le risorse del team avrebbero potuto contribuire con facilità all'aggiornamento dei contenuti.
Ho, quindi, definito gli assets principali:
A questo punto ho lavorato alla UI del sito, giungendo in tempi rapidi dalla prima bozza alla versione finale.
Anche in questo caso è stato prezioso il lavoro di squadra condotto con il reparto marketing che, a seguito di un’accurata analisi dei dati, mi ha permesso di definire le sezioni prioritarie del template. Una di queste era la section contenente i link diretti alle pagine delle singole location, da posizionare subito dopo la proposizione dei vantaggi.Come si può vedere nell’immagine qui sopra, ho sviluppato questa sezione creando delle card orizzontali di colore blu scuro, in cui emergono chiamente due elementi: il nome delle singole location, rafforzato dalla relativa icona, ed il prezzo, ben in evidenza grazie alla scelta cromatica del giallo.
Questa sezione è stata trasformata in un componente, per poter essere riutilizzata in altre aree del template (ad esempio nelle pagine "Chi siamo" e "Come funziona”).
Mi sono quindi concentrato sulle pagine delle singole location, altamente strategiche per il nostro business. Si tratta, infatti, delle pagine in cui atterrano gli utenti dopo aver cercato uno specifico parcheggio sul motore di ricerca (ad esempio "parcheggio low cost aeroporto Bologna”). Il layout è volutamente semplice e intuitivo: il form è ben in evidenza, con il campo “dove” precompilato, ed è strutturato in modo da essere facilmente indicizzato.
Tutti i contenuti della pagina sono pensati in un'ottica SEO friendly: dal banner, che mette in evidenza i nostri punti di forza, alle section informative sottostanti, che rispondono in modo esauriente alle query che le persone digitano (dove si trova il parcheggio, prezzi, informazioni utili, servizi inclusi, come prenotare, ecc).
Anche la scelta di organizzare alcune informazioni all'interno di tabelle (ad esempio "Informazioni utili sul parcheggio ParkToAir Bologna") non è casuale: gli insights, infatti, dimostrano che la tabella ha una struttura semantica SEO friendly.
Le pagine "Chi siamo" e "Come funziona" sono meno visitate delle altre ma rivestono comunque una notevole importanza. La hero section presenta la stessa struttura in entrambi i casi ed il resto della pagina contempla le seguenti sezioni: contenuti informativi con testo + immagine, icone + testo, card con indicazione dei parcheggio e, infine, una section prima del footer che rimanda al form di contatti, situato in una pagina dedicata.
Una volta messa in produzione l'applicazione web, abbiamo testato, attraverso lo strumento "Lighthouse Scoring Calculator" di Google, i parametri riguardanti:
I risultati si sono rivelati molto performanti fin dal primo momento in quanto è stata determinante la decisione di dividere i css per pagina. In questo modo ogni singola pagina carica solo le risorse di cui ha bisogno. Oltre a questo altri fattori che hanno influito sullo score sono stati: best practice SEO, aggiunta dell'attributo ALT su tutte le immagini, aver impostato width ed height di ogni immagine, aver impostato un font di fallback su tutto il documento ed essersi assicurati che i colori dei testi avessero un buon contrasto rispetto al colore di sfondo.
Lato mobile, infine, ho deciso di inserire una bottom bar in stile app, al fine di facilitare la visualizzazione dei parcheggi.