Tutto si trasforma

Secondo un articolo del Sole 24 Ore, sette aziende su dieci possiedono un sito web. Quante di queste hanno però un sito web non più vecchio di 5 anni? Quante hanno un’interfaccia utente responsiva, capace di adattarsi senza intoppi su ogni dispositivo (telefono, tablet o pc)?

Anche i siti web “vetrina” – dove magari non c’è necessità strategica di aggiungere prodotti, articoli, plugin per servizi speciali, e dove non è richiesto un particolare lavoro di SEO – ogni tanto vanno rinfrescati e modernizzati un po’.

Questo è proprio quello che DRAI Milano ci ha chiesto di fare: costruire un nuovo sito, più moderno, più responsivo, strutturato in modo da avere tutte le informazioni necessarie per andare in contro a ogni necessità e dubbio dei potenziali clienti, e con una linea grafica coerente con quella tenuta finora.

È stato un po’ come iniziare un dipinto su commissione: il committente è venuto da noi, fiducioso delle nostre competenze in ambito comunicativo, e ci ha parlato del soggetto e delle sue relazioni con gli altri personaggi che poi sarebbero apparsi con lui sulla scena; terminata la chiamata, ci siamo messi a fare schizzi preparatori e di studio delle forme, suddividendoci il lavoro in base alle competenze di ognuno.

L’analisi

Prima di qualunque passo, bisogna analizzare. Analizzare, studiare, osservare e fare ricerca. Se questo passaggio viene fatto male, a cascata crollerà tutto il processo di costruzione.

Ma cosa abbiamo analizzato? Abbiamo analizzato il posizionamento sul mercato di DRAI in rapporto ai suoi competitor: abbiamo osservato come questi strutturano il loro offering, quali sono le parole chiave che ne definiscono il posizionamento SEO, se c’erano degli elementi di web design ricorrenti, le lingue usate, i servizi e i percorsi di navigazione.

Piccola grande novità: per la prima volta abbiamo utilizzato l’intelligenza artificiale (ChatGPT) per impostare un iniziale lavoro di analisi dei competitor. L’intero team della divisione digital & innovation di Dual ha svolto una formazione di oltre 12 ore sull’utilizzo dell’intelligenza artificiale e di ChatGPT, studiando le potenzialità e i limiti di questa tecnologia, e trovando le formule e i metodi migliori per far sì che possa rivelarsi uno strumento di supporto valido.

Per ogni competitor sono poi state fatte analisi semantiche, riflessioni sul linguaggio, sui termini ricorrenti, sul tone of voice e sull’uso di parole straniere e tecnicismi, oltre che un’analisi dettagliata delle scelte organizzative dell’interfaccia utente.

Definizione dei messaggi chiave

Raccolti tutti i dati di base, abbiamo iniziato con la costruzione vera e propria non solo del sito, ma dell’intera comunicazione, della voce che DRAI vuole far arrivare ai propri clienti e potenziali tali tramite questo spazio digitale. Abbiamo quindi delineato una mappa concettuale, un’infografica capace di racchiudere tutti i punti di forza di DRAI, mostrando anche in che modo si costituisce tutto l’ecosistema di valori che li muove.

Mappa del sito

Spiegare a qualcuno un disegno che si ha perfettamente chiaro in testa è tremendamente complicato, se poi non si hanno le stesse conoscenze sull’argomento l’impresa può raggiungere l’impossibile. Quindi, se prima i responsabili di DRAI Milano ci hanno spiegato con pazienza la differenza tra un riduttore di potenza VSF a ingresso maschio e un rinvio angolare di serie FR ad albero cavo, noi ci siamo operati per mostrare loro graficamente la mappa del nuovo sito, con i diversi percorsi di navigazione.

Il sito di DRAI non doveva solo essere una versione navigabile e ben organizzata del catalogo prodotti, ma doveva essere una vetrina della storia del gruppo e delle varie aziende che nel corso degli anni ne sono entrate a far parte. Abbiamo dunque deciso di dare una maggiore rilevanza ai contenuti istituzionali, per rendere così il sito un vero e proprio biglietto da visita completo dell’identità e dei valori che muovono tutte le varie aziende appartenenti al gruppo DRAI. I prodotti sono poi stati strutturati in maniera gerarchica, con la possibilità da parte dell’utente di visualizzarsi anche suddivisi secondo il settore di applicazione.

I wireframe

Come ogni grande dipinto, dopo aver fatto i bozzetti di studio dei vari elementi si passa allo schizzo a matita sulla tela. Ecco in sostanza cos’è un wireframe lo-fi, ovvero “low fidelity”: uno scheletro privo immagini, colori e testi, ma con solo rettangoli vuoti, riquadri di lorem ipsum e scale di grigi. Questo passaggio ci ha dato l’occasione di metterci di nuovo a fare una cosa per la prima volta, perché ci siamo voluti cimentare noi nella loro creazione, utilizzando il software FIGMA.

La creazione dei wireframe fa capire gli errori e i difetti di progettazione ideati. Fa capire cosa funziona, cosa manca, come potrebbe comportarsi l’utente, ciò di cui avrebbe bisogno e il percorso che potrebbe e dovrebbe fare per raggiungerlo.

Con il nostro scheletro pronto e completo di tutti i suoi bozzetti interni, siamo passati alla creazione dei contenuti veri e propri. Informazioni istituzionali, descrizione di ogni singolo prodotto, delle call to action, con analisi SEO, attenzione al tone of voice e alla terminologia.

Completati i testi, siamo passati alla scelta e alla raccolta delle varie immagini, andando anche in prima persona direttamente in DRAI Milano per fotografare i singoli prodotti. A questo punto, siamo passati alla creazione dei wireframe hi-fi (“high fidelity”) dove testi, immagini, loghi e palette iniziano a prendere possesso della tela.

La realizzazione

A gettare le prime pennellate però non siamo stati noi: noi abbiamo fatto i bozzetti, abbiamo studiato, abbiamo costruito lo scheletro e dato la mano di colore di base per rendere poi tridimensionale e più nitida ogni forma finale, ma la realizzazione vera e propria è stata affidata al nostro fornitore di fiducia per la realizzazione di siti web. Seguendo i wireframe che avevamo creato su FIGMA, i programmatori hanno dato corpo al sito.

Una volta pronto, abbiamo aggiunto tutti i contenuti testuali e tutti i materiali raccolti e approvati dai responsabili di DRAI. Le ultime pennellate.

Quindi, che dite, vi piace il nostro dipinto?