UI LANDING PAGE

ANALISI
BUSINESS
GENETICS
Davide Massarella
PRIMA DI INIZIARE
Ciao! Sono Davide, classe ‘97 (è più semplice ricordarsi l’anno
che è fisso, che portare il conto degli anni! ☺) e faccio cose.

Sì insomma, sono un designer.

Quello che andrai a leggere sarà un piccolo case study sulla

Davide Massarella landing page di vendita di Business Genetics, ma dal punto di
Product Designer vista di un designer, non solo strategico.

Troverai il wireframe in alta risoluzione tra gli allegati. Per motivi di peso ho dovuto comprimere il tutto :)
INDICE
L.P. Business Genetics
Wireframe
Above the fold
Analisi
Oltre lo scroll
Considerazioni
WIREFRAME
L’immagine che stai vedendo altro
non è che lo scheletro della landing
page di Business Genetics (in modo
figo, lo chiameremo wireframe).

Altro non è che la base nuda e

cruda del prodotto.
Ogni prodotto digitale nasce da questa
"cosa". Per due semplici motivi:

visualizzazione immediata del prodotto

( poco effort );

possibilità di fare usability test da

subito (insomma dai, se un prodotto
funziona con due rettangoli in croce,
perché non dovrebbe funzionare con
un design ben fatto?) Perché fa cagare
ABOVE THE
FOLD
Ovvero la parte più importante di ogni
pagina web.
Il contenuto above the fold si
presenta esattamente come
dovrebbe essere, ma è
qualcosa a cui siamo abituati
ormai vedendo le varie landing
dei diversi corsi Marketers.

La prima differenza che si nota

rispetto alle vecchie pagine di
lancio, è la presenza di un
menu di navigazione che
funge da motivo ulteriore per
lasciare lì in bella vista una CTA
sempre presente.
Sigaro acceso, partiamo!

ANALISI
Su desktop è la versione che preferisco.
Non avere il menu, ma solo una CTA
sticky, verrebbe visto come un modo più
aggressivo.
Ma ehi, io ti lascio il menu in modo da
poter navigare tranquillamente tutta la
lunga landing page, ma mi prendo anche
la licenza di lasciarti in bella vista una
CTA.
Passiamo all’headline con la unique
selling proposition, ben chiare e che
sfrutta in pieno il gradiente scuro sulla
sinistra, risaltando per bene.
Avrei forse dato un maggior respiro alla
sezione.
Video nulla da dire, andiamo rapidi.
Ecco la seconda CTA per acquistare
subito il corso.

Qui forse è poco chiara perché si

discosta dall'immaginario collettivo
dei bottoni.

Su mobile, senza la possibilità di

sfruttare l’hover, appare come semplice
widget flottante di scarsità.

Soprattutto perché l’elemento viene poi

ripreso poco prima delle schede di
acquisto, senza tuttavia essere
cliccabile.
Trovo estremamente intelligente e
raffinata la scelta di usare elementi
flottanti per legare sezioni diverse
ma riguardanti lo stesso “loop”,
creano un ritmo e rendono chiara la
scansione della pagina stessa.
BELOW THE
FOLD
Iniziamo a scrollare :)
Come avrai notato, nella parte Un motivo giustificabile? Forse sì.
precedente erano presenti poco
elementi ma ben distinti. Ma in realtà inutile, in quanto uno
studio dimostra come invece il 76%
Alcuni commettono l'errore di voler degli utenti che atterra sulla pagina
inserire tutto su quella parte, creando continua a scrollare, mentre il 22%
un caos infinito che invece farà arriva fino in fondo.
allontanare l'utente.
Ti suggerisco un tool veramente utile
Temiamo che l'utente esca prima di per analizzare la tua personale
vedere tutto ciò che vorremmo. heatmap: https://hotjar.com

Studio sullo scroll del contenuti: https://www.clicktale.com/resources/blog/resourcesbloginvest-in-customer-experience-software/

La seconda sezione che ci
anticipa cosa stiamo per
ottenere (la content elevation
di cui parlava Dario nella
Première di ieri, ricordi? :) )

Sempre con degli oggetti

flottanti (stiamo ancora
scoprendo cosa contiene il
corso) si passa alla sezione che
ti spiega i vari moduli al suo
interno, con un dropdown
anziché le classiche bullet list,
ma che ha lo stesso risultato in
termini di leggibilità e pulizia
della pagina.
Per intenderci: paragoniamo le landing di Business Genetics, Copymastery e FBAdvanced.

Quale scansione dei contenuti ti convince di più? Ancora non ti ho convinto?

Forse non hai navigato queste tre landing da mobile allora. :)
Sulle sezioni seguenti ci
vengono presentati il target a
cui si riferisce ed il perché
dovremmo acquistare il
prodotto, condito di promesse
e ispirazione.

Ma come detto all’inizio, la mia

vuole essere un’analisi di
design della pagina, quindi non
mi soffermerò troppo sul copy
e sulla parte strategica.
Ed è proprio qui che vorrei soffermarmi
un attimo, riprendendo quanto detto in
apertura:

le landing page devono sì,

convertire, ma l’occhio deve

avere la sua buona parte di

estasi .
Parliamoci chiaro: una landing strutturata tecnicamente
bene converte comunque. Anzi, sotto questo aspetto il
design è veramente un pessimo amico!
Lascia che ti spieghi: immagina che
tutta la struttura sia perfetta, c’è stato
un A/B testing dietro pazzesco, hai i dati
alla mano che ti garantiscono una
buona conversione.
 Quante volte hai fatto quel castello Sì, perché chi invece faceva il pro ma
di sabbia? Tante, ti auguro! lasciava i bicchieri sulla spiaggia, era
solo stronzo. :))
Sai esattamente come costruirlo ormai:
sabbia del bagnasciuga, non troppo Ecco, un pessimo (e ridondante)
asciutta, non troppo bagnata. design stai pur certo che vanificherà
tutte le ricerche e tecnicismi vari.
Giri il secchiello, due colpetti e oplà.
Ora, direi di smettere di piangere per quel
(I veri pro poi usavano i bicchieri di castello distrutto nell’estate 2010 e mentre
plastica per le torrette, ricordandosi poi riaccendo il sigaro direi di tornare a noi.
di non lasciarli sulla spiaggia.

Studio sullo scroll del contenuti: https://www.clicktale.com/resources/blog/resourcesbloginvest-in-customer-experience-software/

Ma poi arriva il design.

Come un’onda improvvisa

sulla riva del mare che ti

devasta totalmente il tuo

castello di sabbia.
In questa sezione viene
mostrato il prodotto.

Il mio professore di disegno

industriale ripeteva
continuamente che mentre si
racconta un prodotto è sempre
buona cosa che l’interlocutore
possa toccarlo.
Per questo ai miei esami ho sempre consegnato
al mio professore un prototipo in scala con tanto
di packaging e manualistica:

si distrae e quindi puoi dire quello che vuoi

(non fatelo, scherzo!);

sa che sto parlando di qualcosa di vero,

concreto, che ha già per le mani (sì insomma, è
la psicologia della serie FakeTaxi. E non
indignarti, sappiamo entrambi di cosa parlo).
La sezione non segue la classica regola
di inserire lo screenshot dell’area
riservata.

No, è stata fatta una scelta stilistica

pazzesca, tanto da reputarla la sezione
che amo maggiormente della landing.

Ti mostro, ti ripeto continuamente chi

sarà il tuo formatore.

Ti presento un grosso blocco che

riprende totalmente i colori del brand e
il brand stesso (Dario).
È qualcosa di estremamente umano,
familiare.
Ma al contempo con lo stesso obiettivo
dello screenshot: mostrarti i contenuti
tramite foto estrapolate dal corso.
Capite la potenza di questa griglia?
L’unica nota a sfavore, sempre a mio
avviso, è la presenza del testo che indica le
varie lezioni: possono causare confusione
non essendo ordinate.
Avrei lasciato solo l’indicazione dei moduli.
Passiamo poi alla nuova
sezione dedicata al desiderio di
far parte di qualcosa di
esclusivo, di familiare.

E che funge anche da prima

sezione per le testimonianze.
Segue poi una lunga sezione su
chi c’è dietro il progetto.

Anche qui, tornano gli elementi

flottanti per riunire sotto
un’unica sezione e dare un po’
di ritmo a tutto il contenuto.
Si passa alla sezione dei bonus,
mostrati in tutta la loro
semplicità con efficacia.

Dico efficacia perché non

stiamo parlando dei classici
bonus digitali:

“Ehi, in più avrai questo, quello e

quell’altro che da soli valgono
millemila euro, ma io voglio
regalarteli insieme a questo
corso!”
No! Parliamo di bonus con i
controcoglioni.

Fisici, tangibili, concreti.

Ricordi il mio prof? Bene, ti
piacerebbe avere un ebook tra
i bonus, o ricevere un libro a
casa?

Io opto per la seconda.

La sezione testimonial presenta
una distinzione di contenuti,
perchè diversi i soggetti delle
due testimonianze: un carousel
per la community, delle schede
per il corso.

Semplice, pulito e molto chiaro.

Oltre che corretto.

Due soggetti, due distingui.

BAM!
Cambio improvviso dei
colori.
Area di focus: il background
diventa più scuro per
focalizzare meglio l’utente.

Ripeto: focus.

Ti sto giustificando il costo

elevato del corso.

Il pattern interrupt grafico unito

alla tonalità del blu (trasmette
tranquillità) giocano un ruolo
psicologico non dico
determinante, ma sicuramente
importante.
Tutto chiaro perché il corso
costa poco?

Ottimo, hai visto il prodotto,

hai conosciuto il formatore,
l’azienda che c’è dietro, hai
letto le testimonianze, hai
capito che stai pagando poco
rispetto al valore percepito del
corso, è ora di metterti davanti
la parcella.
Ah, però occhio, questa
parcella è come la carta degli
scontrini delle garanzie: dopo
un po’ svanisce.

Hai poco tempo per acquistare.

Le schede d’acquisto sono

semplici, senza fronzoli.

Aut aut.

Stai pagando per avere questo,

questo e quest’altro. Ok?
Acquista.
Però aspetta...

Conosciamo così bene il

nostro target che sappiamo

già quali sono i dubbi più

frequenti.
Ogni domanda che un utente
vuole porre al customer care lo
distrae e lo porta via dalla
pagina di vendita.

La scelta di porre le FAQ subito

dopo l’acquisto è tutt’altro che
dovuta alla poca importanza di
questa sezione.

Non a caso le FAQ inserite

rispondono a specifici temi
(inerenti al prezzo e a
giustificarlo).
Le FAQ non sono servite?

Contatta il customer care

(ennesimo elemento flottante che
lega tra loro le sezioni).

E approfitto anche per ripeterti

che hai il diritto al rimborso
qualora non ti piacesse, visto che
prima forse è stato poco visibile.
:)
Ma come, è
già finita?
Sì, buddy. Il nostro
percorso si conclude
così.

O forse…?

Mancano le
considerazioni
finali.
Che dire, il lavoro svolto da On è
impeccabile, è palese che sia stato
realizzato da un’agenzia grafica che
abbiamo imparato a conoscere negli
ultimi mesi, con un tono ed uno stile
che prende quello precedente e lo
sbatte violentemente alla porta.
Le landing dei precedenti prodotti,
comunque ben realizzate, hanno proprio
l’aria delle classiche landing che
Clickfunnels ti mette a disposizione.
Seguono le regole.
Bullet point, long form text, video, foto. Un
template fatto e riproposto in tutte le
salse.
Ma immagino che il team di On abbia
detto:

"Affanculo le regole"

O per lo meno, plasmiamo le regole al nostro

obiettivo.
GRANDI RESPONSABILITÀ
Sì, manca "Da un grande potere...", ma
se ve lo state chiedendo ha comunque
avuto effetto la frase.

Ora Marketers e On hanno una grossa

responsabilità alle spalle:
stupire ancora.
Questa nuova landing, questa nuova
identità, è l’onda del mare cui ti
accennavo sopra, ma questa volta ha sì,
distrutto il tuo castello, ma ti ha lasciato Comprendi allora l’importante del
al suo posto una splendida conchiglia. ruolo che gioca questa onda?

Eppure se prendessimo il nostro Comprendi allora l’importante del

wireframe di partenza, concentrandoci ruolo che gioca il design?
solo sulle sezioni, noteremmo che
concettualmente i contenuti sono gli
stessi di tante altre.
Quindi, ti chiedo:

Preferisci un castello distrutto,

o una bella conchiglia? :)

Grazie per aver letto tutto il documento.

E ORA?
Mi auguro che tu abbia trovato il contenuto interessante. Mi
farebbe veramente piacere, soprattutto perché mi ha portato
via 3 nottate intere! (In ufficio non posso ancora fare altro :))

Il prossimo passo è creare da zero una landing secondo

quanto analizzato qui. Che ne dici di provarci anche te? :)

Se ti va, scambiamoci il contatto LinkedIn, in modo da vedere

Davide Massarella i risultati di entrambi. Aggiungimi con una nota: "Analisi UI":

Product Designer
@davidemassarella

Con lo stesso nick puoi trovarmi anche su Medium, dove a

giorni uscirà l'intero articolo.