Pochi giorni fa abbiamo rilasciato una versione completamente rinnovata del sito di presentazione del nostro prodotto level-app. Vi vogliamo raccontare tutte le fasi del processo creativo: dalla prima bozza su carta all’ultima riga di codice.

1 – la richiesta: perchè un sito nuovo?

Come molti di voi sapranno level-app è stato lanciato nel “lontano” 2014. Mese dopo mese grazie agli strumenti di analytics e al feedback diretto di alcuni utenti abbiamo avuto modo di capire nel dettaglio quali fossero i problemi e le mancanze del sito di allora. E’ emerso che banalmente il problema più grande di tutti era la poca chiarezza dei contenuti e della struttura del sito stesso: in molti lamentavano che navigando il sito non era semplice capire immediatamente a cosa servisse la piattaforma e le sue features. Vista l’importanza cruciale del sito nel flusso di acquisto dei prodotti di level-app, ci siamo decisi a ricostruirlo da zero con in testa un solo obiettivo: ogni utente dopo pochi secondi di navigazione avrebbe dovuto avere chiaro di cosa si stesse parlando.

2 – la struttura e i contenuti

La prima vera fase operativa di ricostruzione del sito è stata ovviamente la stesura dei nuovi contenuti. Abbiamo deciso di strutturare il sito in poche ed essenziali pagine:

  • Home: pagina di presentazione del prodotto.
  • Prezzi: pagina dedicata alla presentazione dei vari abbonamenti previsti da level-app.

Mentre la pagina dei prezzi non ha molto da raccontare, la pagina home ha richiesto molto impegno per la stesura e l’organizzazione dei contenuti in modo efficace. Abbiamo diviso la home in 5 macro blocchi sequenziali:

  1. Sezione “welcome”: composta dal payoff di level-app e da una frase che mette subito in chiaro a chi si rivolge il prodotto: “vuoi un’app ma non vuoi pagare uno sviluppatore? Sei nel posto giusto!”.
  2. Sezione “come funziona”: qui viene spiegato in modo rapido e semplice come funziona il prodotto e gli step che separano il potenziale cliente dal vedere la propria app pubblicata sugli store.
  3. Sezione “features”: è importante mettere in evidenza i fattori differenzianti rispetto alla concorrenza: per level-app le parole d’ordine sono “semplicità” e “zero preoccupazioni”.
  4. Sezione “customers”: per dare credibilità al prodotto ma anche per mostrare dei possibili modi d’uso del prodotto stesso abbiamo deciso di mostrare alcune app realizzate con la piattaforma.
  5. Sezione “call to action / contact form”: arrivati a questa parte della pagina l’utente può approfondire il proprio interesse verso il prodotto provando ad utilizzarlo o contattandoci per eventuali chiarimenti.

3 – performance e usabilità

Ormai la metà del traffico verso i siti web proviene da dispositivi mobile, è un dato di fatto. I requisiti fondamentali per un sito diventano quindi la rapidità di caricamento e l’usabilità su dispositivi con schermi molto ridotti. Questi fattori sono talmente importanti che persino gli algoritmi di google ormai ne tengono conto per determinare quale sito sia più meritevole di scalare la SERP. Abbiamo cercato di ottimizzare ogni aspetto del sito, dalle risorse grafiche alle librerie impiegate e questi sono i risultati di PageSpeed (il tool di google che verifica le performance dei siti web):

page_speed

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.level-app.it%2Fit%2Fhome&tab=mobile

Non male, vero? 🙂

4 – aspetti tecnici

Se ve lo state chiedendo: no, non è un tema di wordpress 🙂 Il sito è stato interamente realizzato da noi e non si basa su alcun CMS. Ci siamo occupati sia degli aspetti grafici che della stesura del codice.

Qualche dettaglio per gli smanettoni:

  • Per la struttura principale del sito e l’implementazione degli aspetti responsive abbiamo utilizzato bootstrap.
  • Per l’ottimizzazione delle risorse abbiamo utilizzato cssnano, uglifyJs e imagemin, il tutto orchestrato da uno script gulp.

5 – conclusioni

Siamo molto soddisfatti del lavoro svolto e pensiamo di aver centrato l’obiettivo: ora il sito è semplice, moderno, rapido e soprattutto consente agli utenti di capire in pochi secondi se level-app sia lo strumento adatto a loro.

E voi cosa ne pensate? Volete anche voi un sito così? Parliamone!

http://www.tangodev.it/it/prodotti-servizi#section-siti-web-pro