Migliorare performance e conversioni del Teatro Franco Parenti
Teatro Franco Parenti
Teatro Franco Parenti
Teatro Franco Parenti
Con più dell’80% delle visite provenienti da dispositivi mobili, il Teatro Franco Parenti ci ha contattati per chiederci un restyling mobile first
Una collaborazione quasi decennale con il Teatro Franco Parenti, per il quale abbiamo seguito nel 2015 il rifacimento di tutto il sito web e che in questa fase ci ha coinvolti con l’obiettivo di un restyling focalizzato sull’esperienza da mobile in termini sia di appeal che di capacità di conversione..
Analisi preliminare
Per prima cosa ci siamo concentrati sul comprendere i punti di forza e debolezza del design attraverso i dati
Per avere una solida base di indagine progettuale abbiamo fondato la prima parte del progetto sull’analisi dei comportamenti degli utenti online utilizzando strumenti sia quantitativi che qualitativi come Google Analytics e Hotjar.
“
Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating
Donald A. Norman
Ad esempio tassi di abbandono alti nelle pagine più commerciali, ci hanno fatto comprendere la necessità di lavorare sulla diminuzione delle frizioni esistenti rispetto alla quantità di informazioni in pagina e di migliorare l’impatto delle call to action.
Grazie all’analisi dei dati siamo stati in grado di individuare puntualmente le criticità su cui lavorare, dandoci obiettivi concreti per il lavoro progettuale.
Conversioni
Obiettivo 1: aumentare la capacità di conversione delle pagine del sito
1. Call to action
Rendere Call to Action e Promozioni e più raggiungibili e persistenti nell’esperienza di navigazione
Evidenziare e isolare le call to action attraverso l’ancoraggio sul bottom
Ancorare la CTA permette di isolare l’azione principale evidenziandone la presenza per essere notata all’interno di un’ecosistema fatto di elementi similari (Von Restorff Effect o Isolation Effect).
Secondo la legge conosciuta come Isolation Effect, quando più elementi sono presenti sullo schermo, sarà più facile ricordarsi quello che si distingue dagli altri.
Rendere le promozioni chiare e sempre raggiungibili
Il funnel delle landing page prevede che il traffico arrivi sempre da una ADV di promozione. Un utente che atterra sul sito con una promessa non deve essere deluso.
Abbiamo quindi lavorato per rendere il box con la promozione e la relativa call to action ben visibile fin dal primo scroll e poi con una fascia ancorata nel bottom della pagina attraverso un microcopy sintetico ma esplicativo e una cta persistente.
Recognition rather than recall: l’utente non deve ricordare informazioni da una parte dell’interfaccia all’altra. Le istruzioni per usare il sistema devono essere visibili o facilmente richiamabili se necessario. Dalle 10 euristiche per la progettazione di interfacce di J. Nielsen
2. Hero immersive per emozionare
“Cognition attempts to make sense of the world: emotion assigns value.” D.Norman
Le emozioni sono un elemento con il quale ci relazioniamo quotidianamente e anche quando crediamo di prendere decisioni razionali, il subconscio gioca sempre un ruolo importante.
Progettare delle aperture emozionali e impattanti.
Valorizzare le immagini è un ottimo modo per creare un impatto e una relazione positiva tra lo spettacolo e l’utente; questo può aiutare ad aumentare le possibilità di acquisto dei biglietti. Il design dell’apertura full-image, inoltre, lavora su più piani: un pattern di UI moderno e conosciuto e un’estetica piacevole.
Secondo la Aesthetic-Usability Effect gli utenti percepiscono come più usabili siti con una estetica curata e piacevole.
3. Catalogare le Informazioni
Raggruppare le informazioni per minimizzare il carico cognitivo dell’utente
Per facilitare la lettura e la scansione dei contenuti si è lavorato per migliorare l’impatto in pagina delle informazioni relative allo spettacolo: repliche, sale e informazioni di biglietteria. Abbiamo quindi raggruppato queste informazioni creando un solo blocco percettivo. Un layout più solido e concreto sostituisce le voci solo testuali della versione precendente.
Ridurre per evidenziare
Riducendo il numero di elementi aiutiamo l’utente a processare meglio la mole di informazioni presente in ogni singolo spettacolo (Hick’s Law) ma nello stesso momento, valorizziamo la CTA di acquisto biglietti perché eliminiamo tutto ciò che può distrarre dall’azione principale.
Secondo la Hick’s Law il tempo che impieghiamo per prendere una decisione aumenta con il numero e la complessità delle scelte.
Discoverability
Obiettivo 2: Migliorare la “discoverability”delle pagine chiave per la conversione
1. La navigazione
Dare priorità alle pagine di conversione rispetto alle pagine istituzionali
La memoria e l’attenzione degli utenti è limitata e le informazioni prioritarie da mostrare vanno scelte attentamente.
Abbiamo quindi scelto di raggruppare le informazioni per target e obiettivi, mettendo nella prima area (Visual Hierarchy) tutte le pagine rivolte all’utenza btc e all’acquisto degli spettacoli (Law of Proximity, Gestalt).
Secondo la Visual Hierarchy è meglio e organizzare la gerarchia dei contenuti seguendo il naturale movimento degli occhi, che nel nostro alfabeto è da sinistra verso destra. Secondo la Law of Proximity invece gli elementi vicini vengono percepiti come correlati tra di loro.
2. Cerca
Reinterpretare i pattern di ricerca
Le analisi relative alla ricerca suggerivano che venisse utilizzata dagli spettatori per cercare info specifiche sugli eventi (sala, orario, etc).
Per questo abbiamo ipotizzato che fosse il contesto giusto per proporre i link diretti alle pagine del calendario (In scena oggi / Spettacoli della settimana), in altri contesti poco utilizzato.
Una ricerca che suggerisce
Abbiamo quindi sfruttato il pattern che si veniva a creare per proporre e suggerire (e spingere) pagine e spettacoli da mettere in evidenza.
Inoltre inserire un numero pre-determinato di opzioni riduce il rischio possibile di stress e frustrazione dovuto al non sapere cosa cercare e/o alla troppa libertà di scelta (Paradox of Choice).
La legge chiamata Paradox of Choice suggerisce che troppe opzioni non solo richiedano troppo impegno, ma possano anche lasciarci con un sentimento di insoddisfazione rispetto alla nostra scelta.
3. I filtri
Sfruttare i pattern di successo e migliorarne l’interfaccia
Le analisi sui dati ci riportavano un grande successo dell’utilizzo della navigazione a scroll orizzontale su mobile a fronte invece di uno scarsissimo utilizzo dei filtri sia sulla pagina Cartellone che sulla pagina Calendario.
Abbiamo quindi suggerito di sfruttare l’area collegata all’elemento di interfaccia vincente per evidenziare anche l’utilizzo dei filtri di ricerca, lavorando allo stesso tempo sull’usabilità dei filtri, resa più efficace e chiara attraverso una modal.
4. Abbonamenti
Valorizzare le pagine abbonamenti
I dati sottolineavano accessi molto bassi sulle pagine abbonamento (meno dell’1% del traffico) e uno degli obiettivi del cliente era invece proprio quello di aumentarne il traffico e l’acquisto.
Architettura, interfaccia e sponsorizzazioni dirette per aumentare la visibilità delle pagine
In termini di architettura abbiamo evidenziato gli abbonamenti come pagine di primo livello, inserendole in navigazione.
Abbiamo inoltre sfruttato altre pagine con intenti di navigazione sovrapponibili (ad. es. Cartellone) per sponsorizzazioni dirette tramite banner.
A livello di interfaccia invece abbiamo adeguato il layout a quello delle pagine degli spettacoli sfruttandone la possibilità di impostare flussi di acquisto diretti tramite call to action e modal.
Esperienza
Obiettivo 3: accrescere l’immersività dell’esperienza attraverso la UI
1. HOMEPAGE MOBILE
Una nuova hero
I primi secondi di ogni utente su un sito sono i più critici e capaci di catturare l’attenzione del visitatore.
Per questo abbiamo reso l’esperienza di accesso al sito più impattante: immagini più grandi e moderne attraverso un formato “reel” e allo stresso più familiare, riprendendo un pattern in uso ormai da tutte le piattaforme streaming.
I dati dopo il rilascio di questa implementazione i dati sono stati positivi e hanno mostrato un aumento sia dell’attenzione degli utenti sulla Hero che dei click.
Progettare un layout più compatto e moderno per favorire l’attenzione
I dati mostravano un grande vuoto di attenzione e click sulla parte centrale della homepage, che si traduceva anche in % di scroll minori che nel resto delle pagine.
Abbiamo quindi progettato un flusso più moderno, su due colonne e con uno slider formato reel, sia per diminuire l’impatto percettivo dei testi che per movimentare il look&feel anche grazie all’utilizzo di immagini più immersive.
2. Design System
Una UI più moderna e capace di cambiare
Infine abbiamo revisionato l’intera UI del sito. Tipografia alleggerita, colori custom per supportare le immagini degli spettacoli, aperture fullwidth ed immersive sono solo alcuni delle novità del Design System del Teatro Franco Parenti.
