I 6 passaggi del nostro processo di web design
Questo post nasce dalla volontà di fornire ai nostri potenziali clienti una guida per comprendere come si struttura un processo di web design organizzato e di successo. Cercherò di descrivere i sei passaggi che ho identificato nel nostro approccio al web-design, cercando di chiarire i meccanismi sottostanti e le ‘skill’ che stiamo mettendo in gioco. Infatti, un processo di web design di qualità non si identifica solamente con la creazione di un sito web.
Fase 1 : Scoperta
La prima fase del nostro processo di web-design è incentrata sulla pura raccolta di informazioni. Questa parte è molto importante e ci serve per capire di più il business del nostro cliente e il suo settore, il suo mercato di riferimento, i suoi clienti attuali e sopratutto lo scopo/obbiettivo ultimo per cui vuole sviluppare un sito web.
Sfatiamo il primo mito: non tutti i dentisti hanno lo stesso mercato / non tutti i medici affrontano il proprio lavoro allo stesso modo, quindi ogni cliente è sostanzialmente diverso!
Quando si avvia un processo di web-design, il cliente (e molte volte la tentazione è grande anche per noi) è molto allettato dal saltare la parte di indagine e pianificazione, per saltare subito alla ‘grafica’ e ai ‘colori’ del nuovo sito web, ignorando che questi sono due passaggi fondamentali per costruire un sito adatto alle sue necessità.
Questa è una piccola selezione di domande a cui bisogna saper rispondere prima di cominciare:
- Che prodotti / servizi offre la tua azienda / organizzazione?
- Qual è il prodotto / servizio che genera il ricavo più alto?
- Chi sono i tuoi concorrenti?
- Cosa ti differenzia dai tuoi concorrenti?
- Chi è il tuo cliente ideale?
- Qual è la tua proposta unica di valore?
- Qual è l’obbiettivo del sito?
- Chi pensi visiterà il sito?
- Perché credi i tuoi clienti attuali scelgano te?
- Perché invece credi scelgano un tuo concorrente?
Questa è ovviamente una lista molto ridotta, diciamo che per sommi capi, con le nostre domande, andremo a conoscere più in profondità: il cliente, il progetto che vuole avviare, il pubblico potenziale, la qualità del suo ‘brand’, le funzionalità che vuole implementare, che tempistiche si aspetta e che budget ha stanziato per il progetto.
Ciascuna di queste aree, ci offre potenziali informazioni che ci aiuteranno a delineare quella che sarà l’idea di fondo del progetto di web-design in questione.
In questa fase iniziale di scoperta cerchiamo anche di capire l’approccio del cliente nei nostri confronti e il tempo che vuole (o che può) dedicare al progetto, perchè nella nostra idea di web-design la cooperazione con il cliente è fondamentale. Lui solo conosce a fondo la sua realtà.
A questo punto illustriamo al cliente il nostro processo di web-design, quindi probabilmente da ora in avanti gli faremo leggere questo articolo 🙂
Fase 2 : Pianificazione
Proprio come la fase di indagine preliminare, quella di pianificazione è una parte imprescindibile di un progetto di web-design e del lancio di un ‘nuovo’ sito web. Come ho già detto è facile voler saltare direttamente alla parte di design e sviluppo, visto che solitamente è la parte più creativa e divertente del progetto. In realtà la ricerca e la pianificazione servono proprio a chiarire gli obiettivi del sito e a ‘guidare’ il design dello stesso.
Proprio come il modo di dire ‘misura due volte, taglia una volta sola‘, investire tempo nella parte di pianificazione è alla lunga un modo per risparmiare sia tempo che budget.
Durante la fase di pianificazione andiamo a creare una strategia SEO per il sito web. Un sito web che si basa sulla forte presenza di contenuti (ad esempio un blog) deve essere organizzato in modo che gli stessi siano facilmente fruibili e navigabili.
Con uno schema pronto, inoltre, ci rendiamo subito conto di che testi ci serviranno prima ancora di iniziare la fase di design. Usiamo inoltre la fase di pianificazione per far capire al cliente quanto il processo di produzione dei contenuti deve partire sostanzialmente da lui, perchè chi meglio di lui può raccontare la sua storia, il suo prodotto o il suo servizio? Noi ci limitiamo a riorganizzare i testi, per renderli più accattivanti in contenuto e grafica.
Sfatiamo subito un altro mito: Solo perchè abbiamo un sito web non è automaticamente detto che avremo un pubblico di visitatori!
Nella fase di pianificazione succedono sostanzialmente 3 cose:
Impostazione di una strategia SEO
SEO vuol dire search engine optimization, in poche parole vuol dire seguire tutta una serie di ‘linee guida’ che aiutano Google (in Italia esiste solo questo motore di ricerca!) a rispondere alle ricerche degli utenti con i contenuti del sito web che stiamo sviluppando.
– Parliamo con il cliente per capire se esistono termini di ricerca specifici o di settore
– Ricerchiamo e verifichiamo i volumi di ricerca delle keyword
– Compiliamo un file che raccoglie tutte le keyword (semplici, coda lunga ecc. ecc.)
– Controlliamo eventuali testi già pronti
– Facciamo una prima lista dei testi che ci serviranno per tappare eventuali ‘buchi’ concettuali
– Mappiamo le keyword con i contenuti che abbiamo e con quelli che eventualmente ci serviranno
Creazione della sitemap
Pensiamo alla sitemap come se fosse un indice del sito, è essenzialmente uno schema della struttura delle pagine che compongono il sito web in questione. Pianificare la sitemap a questo punto del processo ci aiuta a sviluppare il progetto attorno alle pagine più importanti del sito, a strutturare il sistema di navigazione nel modo più efficiente e ad avere un’idea sempre più definita del contenuto che ancora ci manca.
– Costruiamo la sitemap con la gerarchia delle pagine, che servirà anche da development checklist 🙂
– Inseriamo le pagine istituzionali (chi sono, contatti ecc ecc)
Revisione e sviluppo dei contenuti
Se stiamo riprendendo in mano un sito web già sviluppato, revisioniamo a fondo i contenuti già prodotti e pianifichiamo la produzione di quelli nuovi. Il cliente viene sempre reso responsabile dei contenuti che dovrà creare, noi ci occupiamo dell’ottimizzazione e al più andremo a consigliare che argomenti affrontare prima di altri, per sviluppare un piano editoriale strategico.
– Revisione dei contenuti esistenti
– Raccolta di eventuali contenuti non-web già prodotti in passato
– Distribuzione dei compiti di creazione contenuti (si proprio così, diamo i compiti per casa 😉 )
– Decisione della deadline per la produzione contenuti
Fase 3 : Design
A questo punto iniziamo a progettare il design, ovvero a come apparirà il sito graficamente una volta sviluppato. Per i progetti più complessi creiamo prima un wireframe, una specie di griglia con gli elementi basilari di una pagina web: l’header, il footer, eventuali sidebar, widget e la navigazione. Creiamo poi dei mockup (una specie di bozzetto) per i vari dispositivi esistenti (tablet, smartphone e desktop) per farci un’idea del risultato finale.
La sfida di ogni buon web-design, e più in generale del design, è bilanciare forma e funzione. Usiamo quindi tutte le informazioni raccolte finora per dare una forma, attribuendo una funzione specifica a ciascuna scelta progettuale che abbiamo fatto.
Il design deve essere funzionale al contenuto del messaggio che il cliente vuole proporre. La tendenza invece è di far accadere il contrario, ovvero si è portati ad adattare il contenuto al design, in questo modo il contenuto finisce per ricevere scarse attenzioni.
Cerchiamo quindi di far capire al nostro cliente che la prima cosa che bisogna sviluppare è il “qualcosa da dire”, ma non solo: deve essere un “qualcosa da dire unico e di valore” ed è questa la parte fondamentale.
Sarà poi compito nostro fare in modo che il contenuto sia la prima cosa che venga notata dai visitatori del sito.
Per ogni pagina/sezione che andrà sviluppata, bisogna chiedersi:
– Qual è l’obiettivo principale di questa pagina?
– E’ chiaro per il visitatore che azione deve compiere in questa pagina?
– Com’è che il design invoglia il visitatore a compiere quella determinata azione?
In questo step iniziamo a finalizzare con il cliente il look d’insieme del sito web, discutendo quindi di colori, tipografia e font, elementi grafici, logo.
Fase 4 : Sviluppo
Nella fase di sviluppo, traduciamo il progetto di design del sito in codice funzionante, seguendo le linee guida stabilite nei passaggi precedenti. Questa è probabilmente la fase più lunga.
In questa fase a grandi linee succede:
– Installiamo WordPress nello spazio di hosting principale (ambiente di ‘produzione’)
– Predisponiamo uno spazio di staging (una ambiente dove testiamo e sviluppiamo senza fare danni)
– Predisponiamo le procedure di backup
– Traduciamo i mockup in design funzionante
– Riempiamo le pagine con i testi
– Revisioniamo la grafica con il cliente
– Installiamo / sviluppiamo eventuali funzionalità custom
– Testiamo ed ottimizziamo
Fase 5 : Lancio
La fase di ‘lancio’ del sito web è molto snella (in teoria), soprattutto se abbiamo seguito correttamente i passaggi che ho descritto fin’ora.
In pratica ‘travasiamo’ il contenuto dall’ambiente di ‘test’, che durante la fase di sviluppo è diventato funzionante al 100%, all’ambiente di ‘produzione’.
Per finire facciamo gli ultimi aggiustamenti e attiviamo tutte le procedure di ottimizzazione dell’ambiente finale (eventuali cache, cdn …).
Da questo momento in avanti, manterremo due versioni del sito web del cliente : quella in ‘production’ e quella in ‘staging’; tutte le successive modifiche (di sostanza e/o di funzionalità), verranno fatte prima in ‘stage’, poi verranno testate e quindi eventualmente portate in ‘produzione’.
Fase 6 : Mantenimento
La parte di manutenzione è importante per la ‘salute’ e il ‘successo’ a lungo termine del progetto. Fin dai primi momenti educhiamo il cliente all’importanza del mantenimento del proprio sito web. Pensiamola così: non è sufficiente aver un bel vestito per fare bella figura, và anche lavato, stirato e profumato 🙂
Per la tipologia di progetti che seguiamo, nel 90% dei casi utilizziamo WordPress, e disponiamo di un sistema centralizzato che ci consenta di gestire :
– aggiornamenti di WordPress
– aggiornamenti dei Plugin utilizzati
– backup periodici della piattaforma e dei contenuti
– monitoraggio sicurezza e tentativi di intrusione
– monitoraggio risorse
Per i progetti di cui seguiamo anche la parte di gestione, posizionamento ed analisi avanzata facciamo anche:
– monitoraggio e report delle visite (Google Analytics)
– monitoraggio andamento delle keywords
– monitoraggio risultati di ricerca Google
– proiezioni del traffico
– generazione di heatmap e scrollmap
– registrazione delle visite (click, tap, movimenti del cursore e tastiera )
– monitoraggio dei funnel di conversione
– analisi della compilazione dei form
In conclusione, grazie a questo schema ben preciso, siamo in grado di ‘consegnare’ un prodotto finito che rispecchia le richieste del cliente, anche quelle che non ha espresso direttamente.
Molto spesso il cliente ci chiede ‘più notorietà‘, ma senza saperlo sta chiedendo nuovi contatti per aumentare il suo fatturato.
Diventa quindi molto importante stabilire con il cliente i KPI (key performance indicator), ovvero i parametri, con cui andremo a misurare la buona o cattiva riuscita del progetto.