Eccomi di nuovo qui. Sembra che, nonostante la mia impavidità da copywriter curiosa che si addentra nel mondo della grafica, col precedente post sia tutto filato liscio. Sono tornata per continuare la nostra avventura nel fantastico mondo dei wireframe. Come si realizza il mock-up di un sito web?

Ricapitoliamo brevemente quando detto nel primo articolo:

• Analizzare il brand del cliente (immagine, obiettivi di comunicazione, target, etc.);
• Identificare la Value Proposition;
• Definire quali sono gli elementi da inserire all’interno della home page;
• Stabilire la posizione degli elementi;
• Iniziare a disegnare a mano il mock-up, utilizzando foglio A4 bianco o carta millimetrata, marcatore, righello.

Questa è la sintesi sintetizzata che ci porta a fare un passetto in avanti. Oggi, infatti, voglio spiegarti passo passo il processo che mi ha portato, assieme a Valerio, a realizzare il mock-up della nuova landing page per il corso Yummy Writing.

Landing page prima del trattamento

La vecchia landing appariva più o meno così. Sfondo bianco, Value Proposition in alto, feedback, un form di contatto (che nell’immagine non si vede, ma che era posizionato al di sotto dei feedback), PDF scaricabile con il programma, box informazioni a 5 tab e mappa.

Sul successo del corso Yummy Writing io e Valerio non potevamo proprio lamentarci, ma quella landing aveva, obiettivamente, delle carenze. Per motivi logistici non le avevamo dedicato il tempo che meritava.

Anche se col passare delle edizioni avevamo apportato qualche piccola modifica (foto del corso, invece che immagine vettoriale, nell’header e box con feedback) per ridurre la frizione, ossia la resistenza psicologica a uno o più elementi nel processo di vendita, ancora non eravamo soddisfatti.

Nel tempo abbiamo preso nota di quelle che potevano essere le carenze o le problematiche strutturali della landing. Dalle richieste che ci arrivavano ci è apparsa sempre più chiara una cosa: il box a 5 tab non funzionava. Ti spiego perché. Nel box a 5 tab c’erano tutte le informazioni utili – tranne il programma, ben visibile nella sidebar di destra e scaricabile in PDF. Il problema emerso è che le persone non cliccavano i tab. Quindi ci arrivavano richieste del tipo: “Quanto costa il corso? Chi sono i relatori?”. Noi avevamo dedicato un tab a ciascun argomento, ma forse in molti si fermavano al primo senza cliccare gli altri, andando così a esplorare tutti i contenuti.

Un altro problema connesso a questa landing era la grafica generale. Con Pennamontata, e quindi col nostro figlioletto Yummy Writing, da sempre abbiamo scelto di adottare un’immagine fresca e divertente. La landing di Yummy, però, appariva poco professionale. Abbiamo considerato questo fattore come un macro elemento di frizione. E grande frizione uguale grande… cetriolo.

Adesso che ti ho raccontato qualcosina sulla landing prima del trattamento, ti spiego i passaggi che ci hanno condotto alla realizzazione del nuovo mock-up.

La landing durante il trattamento. Partiamo col mock-up

Tenute in considerazione le problematiche che io e Valerio abbiamo rilevato nella prima landing, abbiamo iniziato a ragionare sul mock-up di quella nuova. Ricapitolando, le questioni che dovevamo risolvere erano per lo più due:

• grafica che trasmetteva amatorialità piuttosto che professionalità;
• contenuti da esplorare all’interno di tab puntualmente ignorati.

Ecco quindi il mock-up che ho disegnato a mano libera. Dato che si trattava di un mock-up interno non mi sono soffermata troppo sull’estetica e non ho usato righello né accortezze particolari (e si vede, lossò).

Secondo te in che modo siamo riusciti a risolvere i due problemi che ci stavano a cuore? Con quali elementi?