Sito Web

E-MAC Professional – UX/UI Website Design

10 Agosto 2021

5 min lettura

UX/UI Website Design per Lead Generation B2B di un'azienda italiana nel settore Food & everage

Matteo Papagni

Introduzione

E-MAC Professional è un’azienda italiana che vende macchinari per pastifichi e laboratori di pasta fresca.

Insieme abbiamo realizzato il nuovo sito web che permette di guidare i potenziali clienti all’acquisto di corso o attrezzature, fornendo uno strumento di Lead generation costruito sui bisogni dell’utente finale.

Cliente

E-MAC Professional opera nel settore degli impianti e macchine per pastifici. Vende macchinari destinati a laboratori di pasta fresca artigianali che cercano un prodotto finale di qualità.

Nella successiva sezione Design, analizziamo alcuni Before/After rispetto al sito precedente

Obiettivi

Realizzare il nuovo sito web per posizionare il brand correttamente rispetto al mercato di riferimento.

In particolare, ci siamo concentrati sul risolvere uno dei problemi che il cliente stava affrontando: molti lead che arrivavano tramite il vecchio sito, pensavano di trovarsi di fronte ad un venditore di pasta fresca e non di macchinari per produrla.

Design moderno in grado di rispecchiare i valori del brand e trasmettere la vera differenza che può fare rispetto ad altri concorrenti presenti sul mercato.

Miglioramento del posizionamento SEO ottimizzando le Core Web Vitals in vista dell’aggiornamento dell’algoritmo Google avvenuto a giugno 2021.

Velocità ed ottimizzazione della Mobile Experience, con focus principale per aumentare la generazione di lead.

Portare rapidamente gli utenti in un flusso di iscrizione ai corsi di formazione o al contatto diretto, e per inviare una richiesta di preventivo per i macchinari.

User Personas

Durante la fase iniziale abbiamo lavorato insieme al team del cliente per definire le User Personas, ovvero gli utenti tipo che avrebbero successivamente utilizzato il sito web e che erano ritenuti utenti target su cui concentrarsi.

I dati utilizzati sono stati forniti dal team del cliente, analizzando i lead ricevuti, il panel clienti attuale e gli insight del loro reparto di sales.

Customer Journey

Nella fase successiva all’identificazione delle User Personas, abbiamo proceduto insieme al team del cliente a definire il Customer Journey.

Sono stati utilizzati i dati del customer support e del reparto di vendite, anche analizzati in fase di definizione delle personas, incrociando le informazioni ricavate da:

  • Google Analytics
  • Google Search Console

User Flow

Quando durante i progetti vengono utilizzati questi strumenti, riteniamo fondamentale riuscire a tradurre il percorso del cliente nel percorso utente.

Il User Flow rispecchia il flusso di comportamento che l’utente avrà quando navigherà il sito, e deve rispettare i vari stadi definiti nel customer journey.

Ogni informazione deve essere raggiunta dall’utente al momento giusto e nel luogo giusto, assecondando le sue necessità di discovery o volontà di acquisto.

Design

In questa sezione vengono presentate alcune delle scelte di design prese analizzando i dati della UX Research, suonate con le soluzioni precedenti sotto forma di Prima/Dopo.

Problema

Gli utenti non sapevano quale tipologia di pasta fosse prodotta da ogni macchinario, se non dopo aver visualizzato le pagine singolarmente.

Questo portava ad un effort maggiore richiesto agli utenti, rimuovendo anche la possibilità di filtrare facilmente i prodotti in base alle proprie necessità.

Abbiamo analizzato il tasso di abbandono analytics e i dati qualitativi delle richieste di informazioni ricevute.

Soluzione

  • Il tipo di pasta prodotta è diventata un’illustrazione che rappresenta il filtro stesso.
  • Il sistema di filtri permette una navigazione semplificata nella pagine dei risultati
  • Le informazioni chiave di ogni macchinario sono visibili anche senza visualizzare la pagina dedicata.

Problema

Molti utenti chiedevano informazioni su finanziamenti e i noleggi per conoscere gli importi stimati, ma sul sito precedente era solo presente un blog post che conteneva informazioni generiche a riguardo.

Molte di queste richieste erano evase a mano dal customer service, utilizzando un foglio elettronico per effettuare il calcolo della stima.

Soluzione

  • Realizzare una pagina dedicata all’interno del sito a cui convogliare gli utenti interessati alla soluzione di finanziamento leasing, senza obbligarli a passare da un blog post generico.
  • Creazione di un tool dedicato per il calcolo del finanziamento del noleggio, che rispecchia l’attività condotta manualmente in precedenza dall’assistenza clienti.

Problema

L’azienda, propone dei corsi per pastaio a numero chiuso.

Sul sito precedente l’utente aveva la possibilità di ricavare queste informazioni all’interno di una tabella, che obbligava l’utente a scorrere la pagina orizzontalmente e verticalmente per poter visualizzare tutti i dati.

Se l’utente aveva intenzione di prenotarsi, al fondo della precedente versione, la pagina presentava un form di contatto da compilare, all’interno del quale era necessario inserire tutti i dati di riferimento del corso reperiti nella tabella soprastante.

Questo obbligava l’utente a dover scorrere ripetutamente la pagina al fine di completare la sua azione.

Soluzione

Abbiamo ideato un sistema di prenotazione veloce, direttamente dal sito, dove l’utente ha la possibilità di selezionare la data per poi essere indirizzato direttamente ad un form precompilato contenente tutti i dati del corso, dove dovrà solamente inserire i suoi dati personali.


Problema

La pagina prodotto presentava informazioni disposte in una sequenza confusionaria, ed i dati tecnici erano mostrati solo dopo lunghi paragrafi di testo.

Questo, oltre a rappresentare un problema di usabilità dai dispositivi mobili perché costringe l’utente ad effettuare un lungo scroll prima di arrivare all’informazione principale, era sopportato dai dati ottenuti in UX Research, dove era sorto che una delle informazioni più richieste erano i dati tecnici del macchinario.

Sempre all’interno della pagina prodotto, le singole versioni e i diversi modelli erano gestiti all’interno della stessa area inserendoli uno sotto l’altro.

Soluzione

Abbiamo riorganizzato i contenuti stabilendo delle priorità in base ai dati che la UX Research ha fatto emergere, dando più importanza all’informazioni più richieste dagli utenti.

Tra queste emergevano principalmente i dati tecnici del macchinario e le tipologie di pasta che può produrre.

La selezione dei modelli è stata gestita con un dropdown a selezione multipla, permette all’utente di visualizzare la stessa pagina con i dati aggiornati, dopo aver selezionato il modello desiderato.


Problema

Il menù precedente presentava una navigazione complessa poiché erano presenti numerosi elementi, dovuti dalla grande quantità di sottopagine e sottocategorie mostrate.

Inoltre nella versione mobile, come nella schermata di sinistra sopra riportata, era presente l’icona di una freccia posizionata sul lato destro di ogni elemento del menu.

Questa, che intuitivamente sembra raffigurare la presenza di sottocategorie, non sempre permetteva all’utente di compiere quest’azione.

Soluzione

Abbiamo riorganizzato l’intera struttura del sito web e dei menu eliminando i sottomenu superflui e non contestualizzati.

Il nuovo flusso utente permette comunque a chi naviga di raggiungere le pagine necessarie attraverso sezioni dedicate nelle pagine principali.

All’interno degli elementi nel menu di navigazione è inoltre stata aggiunta un’icona che rappresenta e identifica in maniera più intuitiva il determinato elemento.


Matteo Papagni

UX/UI Designer

Su di me:

freccia arancione che indica il titolo della sezione

Mettiamoci al lavoro

Hai un’idea pazzesca?Trasformiamola in realtà.

Prenota una call con il team

Diventa la persona più
informata sul design

Più di 15 mila iscritti alla newsletter che in soli
10minuti a settimana si aggiornano con
tante novità e consigli sul mondo della UX/UI
design e product design. Non male, vero?