Il cliente
beanTech è una PMI innovativa che, da oltre venti anni, affianca le aziende nelle sfide della Digital Transformation aiutandole a crescere grazie alla passione per i dati e le tecnologie.
In un’ottica di partnership strategica, beanTech punta a valorizzare i dati per l’azienda che guarda a un futuro sostenibile e le supporta nel gestirne l’intera filiera, sia negli uffici che nella fabbrica, con un’offerta di soluzioni che vanno dall’acquisizione dati all’architettura IT, dagli sviluppi software personalizzati alla gestione dei processi interni, dall’analisi del business all’implementazione di sofisticati algoritmi di AI.
Fondata nel 2001, vanta più di 200 dipendenti e oltre 500 clienti su tutto il territorio nazionale.
Gli obiettivi del cliente
L’obiettivo assegnatoci dal cliente era molto chiaro: un’azienda così dinamica e in continua crescita aveva bisogno di riprogettare il sito web in modo da consentire una navigazione agli utenti il più fluida e semplice possibile attraverso le diverse soluzioni e aree di business, proponendo, al tempo stesso, un look&feel che rispecchiasse la vision, i valori e il posizionamento di beanTech.
Un approccio metodico per la nuova CX
Abbiamo affrontato il progetto applicando il nostro metodo: siamo partiti con il conoscere il nostro cliente, a saggiare le affinità tra il nostro e il loro team marketing e creativo e, man mano, a definire le sinergie necessarie da instaurare per ottenere un risultato performante, definendo quindi il seguente flusso di lavoro:
1. Delex Digital UX&UI Framing:
Definizione dell’architettura delle informazioni, Business goal, Personas e Industry;
2. UX wireframe:
Sviluppo dei wireframe delle pagine principali e condivisione degli stessi con il team beanTech;
3. Affiancamento UI:
Supervisione allo sviluppo dei mockup con il reparto grafico di beanTech sulla base dei wireframe progettati
4. Validazione layout:
Condivisione dei layout grafici;
5. Sviluppo;
6. Go Live.
Fase 1: Delex Digital UX/UI Framing
Siamo partiti dai dati di Google Analytics e dall’analisi e dall’interpretazione di questi abbiamo ottenuto importanti insight rispetto alla navigazione e alla customer journey degli utenti.
A seguito di una sessione di survey, abbiamo individuato i principali interventi da attuare:
- elaborare una “categorizzazione” e organizzazione delle informazioni quanto più chiara possibile;
- progettare dei percorsi di navigazione user centered, immaginando e provvedendo a soddisfare le principali necessità.
Perciò, dopo aver approfondito i dati di Analytics, abbiamo sviluppato una strategia di customer journey con l’obiettivo di rendere ancor più chiara agli utenti l’offerta beanTech.
Abbiamo ipotizzato 2 alternative di flow per l’utente e ci siamo concentrati su due grandi obiettivi:
- stabilire una “gerarchia” delle informazioni strutturata;
- attrarre l’attenzione degli utenti differenziando il percorso tra le due tipologie di target: l’utente con profilo e background tecnico e quello business-oriented.
Per fare questo abbiamo sviluppato una mappa mentale utile a definire la struttura delle gerarchie di informazioni:
Da questa base di partenza abbiamo individuato due alternative di navigazione (poi implementate entrambe).
La prima, partendo dalla Mission in Homepage:
- Homepage con Mission,
- Macrocategorie di Business Goal
- Singolo Business Goal
- Soluzioni
- Contatto
La seconda, partendo dalla Vision in Homepage:
- Homepage con Vision
- Macrocategorie di Soluzioni
- Soluzioni
- Contatto
Contemporaneamente a questa fase, abbiamo sviluppato una moodboard con l’obiettivo di definire, assieme al cliente, il tone of voice e tone of visual del sito.
Fin dal principio, siamo riusciti a percepire lo stile di design che il cliente desiderava trasmettere sul sito: linee pulite ed essenziali, alto contrasto, animazioni particellari e un look&feel che trasmetta una sensazione di velocità, connessione, innovazione e tecnologia.
Tutto questo è stato riassunto nella moodboard con immagini e riferimenti a font, bottoni, icone, gerarchie delle informazioni e, cosa molto importante per l’utente finale, il menù di navigazione.
Per quest’ultimo sono state valutate diverse alternative in termini di design. Infine, è stata scelta la struttura più semplice a livello di usabilità con un’interfaccia che valorizzasse l’importanza della navigazione sia su desktop che su mobile, in ottica responsive e mobile-first.
Fase 2: UX wireframes
Validata la fase 1, siamo passati allo sviluppo dei wireframe.
L’esperienza di Delex Digital su progetti pregressi ha aiutato a creare una user experience efficace e in linea con gli obiettivi del cliente, applicando le migliori strategie e mettendo in pratica tutte le best-practice.
Abbiamo strutturato la maggior parte delle pagine con dei layout modulari, per permettere a beanTech di scegliere nel tempo quali e quante sezioni aggiungere a seconda delle necessità. Questo, tradotto in termini di UI design, significa creare una UI kit forte e scalabile, dove tutti i vari oggetti presenti nel sito possono integrarsi tra loro, pur mantenendo attivo tutto il design responsive.
In questa fase, abbiamo anche sperimentato un nuovo approccio di comunicazione con il cliente riguardo alla validazione dei vari step dei wireframe. Abbiamo infatti condiviso in maniera attiva il file Adobe XD e ci siamo interfacciati all’occorrenza con il reparto grafico di beanTech.
Fase 3 e 4: affiancamento UI e validazione layout
In questa fase il team UX/UI Delex Digital ed il team creativo beanTech sono diventati praticamente una cosa sola! Per tradurre i wireframe in oggetti di design abbiamo supportato il super lavoro del team beanTech che ha dato vita e “vestito” graficamente i layout.
Una nuova esperienza molto costruttiva e stimolante.
Nel frattempo, abbiamo portato avanti la produzione del materiale per gli effetti di coinvolgimento dell’utente (la nostra user experience).
Prerogativa lato UX: l’homepage deve stupire.
Ecco perché l’abbiamo progettata con un grande uso di movimenti ed effetti particellari creando un “racconto” verticale delle principali soluzioni offerte all’utente, ciascuna caratterizzata da un proprio effetto visivo accompagnato con un copy strategico e link mirati alle singole tecnologie.
La sfida è stata l’inserimento degli effetti di transizione in stile light e minimal.
Fase 5 e 6: sviluppo & go live
Front-End
Per l’area pubblica del sito, le parole chiave che hanno dettato le varie fasi dello sviluppo sono state: SEO e performance.
Il primo step è stato studiare i layout per capirne la struttura e scegliere i tag HTML5 semanticamente più corretti per i vari componenti: definire <header> e <footer>, utilizzare il tag <nav> per i link che delineano navigazioni interne al sito rispetto a delle liste generiche di URL e, ultimo ma non meno importante, capire come organizzare il testo tra <h1>…<h6> e <p>.
Ecco un esempio di come abbiamo categorizzato la struttura delle pagine dell’area pubblica del sito.
Per quanto riguarda invece le performance, Lighthouse (tool gratuito di Google per monitorare performance, qualità e best-practice di un sito) valuta le pagine del sito beanTech con uno score medio del 97,6%. Per raggiungere questo risultato, una delle accortezze nello sviluppo è stata dedicare particolare attenzione alle dimensioni dei file CSS e JavaScript, una grande sfida vista la presenza di animazioni ed effetti volti a trasmettere la sensazione di tecnologia e innovazione.
Nei report di Lighthouse troviamo anche riscontro dell’attenzione dedicata alla SEO valutata con uno score medio del 94,6% – in alcune pagine ottiene addirittura uno score del 100%, all’utilizzo di best-practice (92%) e all’accessibilità delle pagine (92,3%).
Back-End
Per il back-office del sito, le parole chiave che ci hanno guidati sono state: funzionalità e semplicità.
Fin dal principio, il cliente ha espresso la necessità di avere quanta più libertà possibile nella composizione del layout delle pagine per far fronte alla vasta gamma di contenuti. Pertanto, la soluzione che abbiamo deciso di adottare è stata quella di creare un layout “modulare” utilizzando un set di 50+ sezioni tra cui scegliere.
Gestire logiche complesse e, allo stesso tempo, creare un pannello intuitivo e fruibile per il cliente è stata una grande sfida.
Ma, grazie al nostro know-how, siamo stati in grado di offrire a beanTech un pannello admin dinamico, suddiviso in macro-contenitori (uno per ciascun gruppo di contenuti del sito) e di rendere il data-entry facile e immediato.
Deploy
Ed ecco il risultato del nostro lavoro: www.beantech.it, dimostrazione che una sinergia di figure diverse tra di loro (tra marketer, designer e coder) ben coordinate e unite possa generare un prodotto di eccellenza.
Feedback del team di Delex Digital:
È stata una grandissima occasione di crescita personale. Mi sono divertito parecchio nel confrontarmi attivamente con la mia controparte in beanTech. Questo mi ha permesso di creare e inventare soluzioni applicabili a scenari complessi senza privarmi della mia sensibilità emozionale ed esperienziale per l’utente finale.
Michele, CX Designer Delex Digital
Feedback del team di beanTech:
Fin dalla fase di partner selection, Delex si è dimostrata proattiva, competente, ricca di spunti a valore, ma soprattutto pronta a supportare beanTech a 360 gradi in questo progetto per noi estremamente importante.
Con il team di Delex si è creato subito un proficuo scambio di idee, dimostrandosi così il partner ideale per aiutarci a “connettere i puntini”, guidarci nella razionalizzazione delle informazioni e nella realizzazione di un nuovo sito web innovativo e soprattutto user oriented.
Da questa piacevole esperienza, abbiamo deciso di espandere la sinergia Delex – beanTech e continuare a lavorare insieme non solo al miglioramento delle performance del sito web realizzato ma anche delle attività ADV e SEO.
Personalmente, consiglierei a tutti i miei colleghi marketers un’azienda come Delex, fatta di giovani appassionati del proprio lavoro e pronti a mettere in campo esperienza e competenza a supporto dei propri clienti.
Chiara Collavizza, Responsabile marketing beanTech
