Categories
Siti

Rebranding: il sito

Manca una settimana alla messa online del nuovo sito: ho deciso che si va online il 30/11 senza se e senza ma, perché quest’estate in spiaggia ho letto un libro che mi ha fatto capire una volta per tutte che meglio lanciare che rimandare. Oggi vi racconto in un post lunghissssssssssimo come ho progettato il nuovo sito.

Sto parlando di ReWork di Jason Fried e David Heinemeier Hansson, un libro che mi ha fatto riflettere sul mio modo di lavorare. È da tempo che mi interrogo su come far crescere la mia impresa e in questo libro ho trovato molti spunti motivazionali per cambiare procedure che non mi sembravano più corrette per il tipo di lavoro che voglio proporre.

Facciamo subito chiarezza su una cosa: nessun sito dovrebbe essere lanciato e poi mollato al suo destino, immobile. Ciclicamente vanno lette le Analytics per capire cosa fanno i lettori nel sito e si devono fare test: si inizia con piccole cose (meglio il pulsante giallo o quello rosso? Meglio centrato o di lato?) e poi si possono anche modificare in modo molto sostanziale interi template di pagina, per cercare di raggiungere un tasso di conversione più alto. Attenzione a non confondere le visualizzazioni con la conversione: quest’ultima prevede un’azione da parte del lettore. Certo l’acquisto, ma anche la condivisione su social, l’iscrizione alla newsletter, il commento, ecc… dipende quindi dagli obiettivi che vi siete dati. Se la condivisione sui social per voi è un obiettivo, dovete darvi da fare per testare diverse opzioni e capire con quale soluzione ottenete più risultati.

Leggendo ReWork ho capito che mandare i siti online solo quando si sente che sono completamente completi è il modo più semplice per accumulare ritardi: spesso i progetti si arenano su stesura testi, formattazione di pagine, scelta delle immagini, ecc… quindi ho deciso che volevo testare su di me questa nuova modalità e così il nuovo francescamarano.com uscirà in una versione 1.0, molto pronto dal punto di vista di logica della navigazione, infrastruttura, look&feel; mediamente pronto dal punto di vista testi e immagini; per nulla pronto su SEO e portfolio. E va bene così.
Quando dico che i testi non sono pronti, non intendo dire che non ci sarà l’About page, ma che quando il sito verrà messo online ci sarà un testo scritto da me, che nei prossimi mesi verrà visto e rivisto, da me e Daniela, per affinare sempre di più la comunicazione. Il Portfolio invece sarà probabilmente una lista, come è ora, perché ho già fatto la selezione dei siti che ci saranno (6-10 circa sui quasi sessanta sui quali ho lavorato negli ultimi 5 anni, anche qui, scelta molto precisa), ma devo ancora chiedere testimonial ai clienti, fare screenshot, scrivere testi che raccontino cosa è stato fatto. Nella scala delle priorità, con clienti prenotati con 2-4 mesi di anticipo, direi che il portfolio non sta in cima e quindi può essere rimandato.

Il progetto

Il tema che sto usando l’ho creato in poche ore lo scorso anno, dopo una problema di corruzione dei file del tema precedente (si può vedere in archivio). È sempre un po’ stato abbandonato a se stesso perché sapevo che sarebbe stato temporaneo: ironia della sorte, forse è il design che ho usato più a lungo in questi anni su questo sito. Ora è il momento di mandarlo in pensione.

Ecco gli step della progettazione del sito:

  1. Individuazione dell’obiettivo principale del restyling: ci ho girato intorno parecchio, ma alla fine ora l’obiettivo è comunicare il rebranding e il riposizionamento. Da doula per tecnofobi alle prime armi, a consulente che aiuta le persone a far crescere il proprio business, usando il sito come potente mezzo di comunicazione e vendita e non come un semplice biglietto d visita. La nuova struttura permette di cambiare agevolmente alcuni elementi del sito per rispondere a diversi obiettivi che valuterò in futuro, pur mantenendo una struttura organica e armonica.
  2. Analisi, su carta, dei collegamenti interni: il grosso problema del mio sito è che c’è poca connessione tra le sezioni. Se sei nel blog sei nel blog, se sei nella About sei nell’About. Non parliamo poi del portfolio che non ha mai avuto nessun collegamento, neppure un link testuale nella pagina in cui si dice che faccio i siti! La prima cosa che ho progettato è la storia che il lettore può leggere in base al punto di entrata del sito. La home continua ad essere il primo contatto per il 23% delle visualizzazioni totali: ma il 77% delle visualizzazioni entra in altre centinaia di punti e secondo me non è chiaro dove andare una volta finita la lettura dell’articolo o visionato il portfolio. Nel nuovo sito il menu sarà più “evidente”, dal punto di vista grafico, ma ci sarà anche un menu a fondo pagina e moltissimi collegamenti interni che renderanno più agevole l’azione che è alla base dell’internet tutto: la lettura ipertestuale e non lineare.
  3. Definizione dei modelli di pagina in base ai contenuti: le pagine di un sito possono avere modelli differenti, non tanto nella grafica (che è poi un risultato), ma proprio nell’inserimento e distribuzione dei contenuti. Immaginatevi la pagina di un quotidiano: c’è la pagina con gli articoli (modello 1) e poi la pagina con le classifiche dei libri più venduti (modello 2), che riprende in parte il modello della pagina generica, ma inserendo degli elementi che tornano nel tempo e che sono destinati a contenere un tipo di notizia particolare, nell’esempio la classifica dei libri. Ad esempio in un sito di ricette potrebbe esserci un tipo di post ad hoc, dove oltre ai normali campi testuali, ci sono dei campi in cui si inseriscono: ingredienti, tempo di cottura, modalità di preparazione, foto della ricetta finita. Sempre con carta e penna ho analizzato quali contenuti potevano esserci nei prossimi 12 mesi e ho individuato questi tipi:
    1. Pagine statiche “standard” (esistente)
    2. Pagine dei singoli servizi, sono delle versioni supercharged delle pagine standard, perché possono richiamare al loro interno i progetti del portfolio, le testimonianze dei clienti/allievi, il calendario dei prossimi eventi nel caso di corsi, i post del blog relativi al servizio.
    3. Singolo post del blog (esistente)
    4. Archivio blog, ovvero i post visualizzati in ordine cronologico (esistente)
    5. Singolo progetto, questa è la pagina in cui si caricano le informazioni e le foto del progetto, che vanno ad alimentare l’archivio portfolio
    6. Archivio portfolio, una pagina in cui man mano che si aggiornano i singoli progetti, viene presentato l’insieme dei lavori svolti
    7. Pagina contatti, con una struttura SEO friendly.
    8. Possibili sviluppi futuri, ancora in fase di studio: eventi, press, testimonials.
  4. Wireframing: ovvero il disegno di massima degli spazi, una bozza di cosa va inserito in ogni pagina, dove sono i testi, dove eventuali widget, pulsanti, ecc… Ho preso fogli di carta A3 e per ogni pagina e/o modello che ho deciso di usare ho fatto un disegno che definisce gli spazi, “cosa succede” in quella pagina, dove si va da lì.
  5. Ricerca e scoperta: ore su Behance, Dribbble e Pinterest, non per copiare modelli o ispirarmi, ma per smontarli, come si fa con i Lego, in parti più piccole. Non entro nei dettagli troppo tecnici, ma questa fase è stata fondamentale per capire:
    1. come strutturare la home in base all’obiettivo individuato;
    2. come tradurre l’elasticità necessaria in un codice che mi permetta di fare queste modifiche in autonomia;
    3. come perfezionare il wireframing per prepararlo al disegno, alla prototipazione e allo sviluppo.

La grafica

Una volta che il progetto dell’infrastruttura si è chiarito sui miei fidi fogli, sono passata, all’analisi di colori e font:

  1. l’obiettivo è presentare il rebranding e il riposizionamento; l’immagine deve rompere con il passato, con la consapevolezza che si corre un rischio, spiazzare i lettori abituali. Ho valutato che era un rischio che valeva la pena di prendere;
  2. non sono più una doula, sono una consulente, ma non voglio un sito “corporate” da consulente: deve venire fuori il mio carattere, come dire, spumeggiante, ma non a discapito della mia professionalità (qui è dove ahimè tutti mi hanno cassato il brief “Una Moira Orfei, ma classy”, però siccome non volevo rinunciare all’aspetto baraccone, ho comunque creato delle sorprese che svelerò pian piano. Saranno divertenti, penso, ma non invadenti e eviteranno l’effetto “Ma ‘sta pazza chi è?” al middle management che dovesse capitare sul sito, magari seguendo un collegamento da LinkedIn);
  3. ho cercato una palette che fosse sì colorata e frizzante, ma non eccessivamente frou frou (solitamente sono contraria a queste generalizzazioni, ma c’è una bella differenza di immedesimazione tra un sito come questo e uno come questo, inutile far finta di niente);
  4. font semplici, che si caricano velocemente, quasi severi per “complimentare” il logo di Alessandro e le parole che ha scritto per me per le diverse macro-aree;
  5. elementi dorati. Potevano mancare? Ovviamente no! Ma saranno dei luccichii qui e là, per soddisfare la gazza che c’è in me.

Lo sviluppo

Il tema è sviluppato per Genesis: quando ho intrapreso la strada dello sviluppo ad hoc, ho deciso di continuare ad usare questo framework, al quale io sono molto affezionata e che continua ad essere uno dei prodotti migliore messi in mercato nella famiglia framework e temi. Parto da Genesis perché penso che sia una base solida che permette di ottimizzare tempi (e quindi soldi) e risorse. Il codice è scritto bene e ha un occhio di riguardo per l’accessibilità.

Build half a product, not a half-assed product

Quello che andrà online lunedì prossimo (in un giorno in cui io sarò per il 70% su un volo che mi porta dall’altra parte dell’Atlantico, ma questa è la storia della prossima settimana) è un prodotto in parte lontano da quello che poi nel corso dei mesi diventerà questo sito, e comunque ho deciso di lanciare lo stesso: i creativi hanno questo brutto difetto, non sono mai soddisfatti e sono convinti che tutto debba essere perfetto. Ma perfetto per chi? Per noi che creiamo? Per Google? Per i nostri colleghi che la prima cosa che fanno quando qualcuno lancia un nuovo sito è andare a fare le pulci al codice per dire “io avrei fatto così, io avrei fatto meglio”? O per i clienti che non hanno la minima idea di cosa sia il php ma vogliono essere rassicurati nella scelta del fornitore?

Io ho a cuore loro e cerco di mettermi dalla parte dei clienti in tanti modi, oltre che con le consulenze: lo faccio mettendo la neve a Natale per sdrammatizzare un po’ il mondo tech, lo faccio riflettendo non sul web design, che è un argomento per professionisti, ma sulla creazione di siti utili, lo faccio scrivendo tutorial e le storie della mia vita da freelance. Questo post ad esempio non è un classico “Marano-post”, ma mi premeva raccontare come vanno le cose dietro le quinte perché il processo è lo stesso che uso per i miei clienti.

Ricordatevi

You can turn a bunch of great ideas into a crappy product real fast by trying to do them all at once. You just can’t do everything you want to do and do it well. So sacrifice some of your darling for the greater good. You’re better off with a kick-ass half then a half-assed whole.

By Francesca

WordPress Community Manger at SiteGround.

Ho creato C+B, supporto la community globale di WordPress.org nella sua crescita.

5 replies on “Rebranding: il sito”

Qui c’è una piccola tecnofila in fasce che ti ringrazia: imparo di più dai tuoi “Marano – post” che da ore su qualsiasi libro/sito.
Grazie, grazie, grazie!

Ti leggo qui, su C+B e mi accorgo che sono sempre di più le cose che devo fare per iniziare come dico io… Mi serve tempo, che non ho. E mi serve anche il coraggio.
Grazie per i preziosi consigli.

Leave a Reply

Your email address will not be published. Required fields are marked *