SitoWeb – Multimarket Fieristico (2021)

Story Map

Sviluppo del progetto in diverse aree, riassumendo qui le principali fasi. Il progetto, un modello avanzato e personalizzato, ha riguardato la realizzazione della parte grafica di UI e UX, l’implementazione della struttura su WordPress, WooCommerce e Dokan; e infine numerose personalizzazioni e l’ottimizzazione della comunicazione dei dati all’utente.

Analisi

Il progetto consiste nell’ideazione di una piattaforma e-commerce multi-market, specificamente pensata per i venditori che operano all’interno delle fiere dedicate al “comics & games”. L’obiettivo principale è quello di creare un punto di riferimento digitale in cui sia possibile ritrovare facilmente i venditori e i prodotti che si incontrano abitualmente durante le fiere. Questa iniziativa non è da vedersi come un limite al tradizionale modello di vendita fieristico; ma piuttosto un supplemento digitale, per chi non può recarsi alle fiere o nuove opportunità di vendita nei periodi senza fiere. Il progetto è stato concepito per essere strettamente legato a LuccaFan, con l’intenzione di creare una community digitale dedicata ai piccoli stand.

I sistemi avanzati

La creazione di un marketplace richiede l’implementazione di funzionalità avanzate, due delle quali sono cruciali: la gestione di liste prodotti preimpostate da richiamare e l’automazione dei metodi di pagamento.

Gestione delle liste prodotti: i sistemi standard di marketplace, come quelli basati su Woo e relativi plugin, non offrono una gestione nativa di liste prodotti automatiche. L’unica opzione solitamente disponibile è il caricamento di un file CSV dal profilo del venditore, con limitazioni nella descrizione dei prodotti. Per rispondere a questa necessità, si è pensato all’implementazione di strumenti specifici per il caricamento e la sincronizzazione automatica dei prodotti da liste esterne e agganciate a specifici venditori. Questa funzionalità libera il venditore dal gravoso compito di inserire e aggiornare manualmente i prodotti su più piattaforme, semplificando notevolmente il suo lavoro. L’integrazione di questi strumenti ha richiesto una fase di sviluppo e test.

Sistemi di pagamento automatizzato: un’altra componente fondamentale è la suddivisione automatica dei pagamenti. Al tempo dello sviluppo, questi sistemi non erano ancora ampiamente integrati e si stavano affacciando i primi servizi market offerti da PayPal e Stripe. L’implementazione di un sistema di pagamento che divida in automatico i compensi rende il marketplace più attraente per i venditori, in quanto garantisce l’accredito dei fondi direttamente sul loro conto (pur tenendo conto dei tempi di rimborso). Sebbene oggi questi sistemi siano più evoluti e facili da integrare, all’epoca l’implementazione era particolarmente complessa, sia a livello tecnico che burocratico.

Il Logo e l’immagine coordinata

Il logo e l’immagine coordinata del progetto sono stati concepiti ispirandosi allo stile del sito principale, LuccaFan. Tuttavia, per il progetto è stata creata un’identità grafica personalizzata, con loghi e icone unici. Il processo di creazione del logo si è svolto in diverse fasi: inizialmente, è stata realizzata una versione di base per la fase beta; poi è stato ideato un logo testuale con l’aggiunta di un icona semplice e infine è stata creata un’icona specifica da accoppiare al testo .

UX Design – Esperienza utente

Come primo progetto che integrava sistemi innovativi e temi con le limitazioni dei plugin per marketplace, l’obiettivo è stato quello di creare un’esperienza user-friendly sia per i clienti che per i venditori. L’assistenza ai venditori è stata una priorità, studiata per favorire l’adozione della piattaforma. Nonostante il budget limitato e le restrizioni tecniche, l’esperienza offerta ai venditori è stata discreta, anche se non esaustiva. Si è riusciti, comunque, a realizzare uno strumento più dinamico e veloce da utilizzare rispetto ad altre soluzioni sul mercato, come lo strumento marketplace di PrestaShop. Oltre a ottimizzare l’esperienza per i clienti dello store, si è data grande importanza ai venditori. L’interfaccia a loro dedicata è stata migliorata graficamente per risultare chiara e intuitiva. Inoltre, si è definita una sequenza di azioni post-ordine “minima”, riducendo il processo a due semplici e veloci passaggi, lasciando al venditore la possibilità di concentrarsi sulla gestione della spedizione.

UI Design – La grafica

La grafica del sito, data la natura a basso costo del progetto, ha seguito in larga parte le direttive e le tempistiche imposte dai plugin per il marketplace. Invece di creare una struttura completamente nuova, si è optato per migliorare e rendere più elegante quella esistente. Si è lavorato quindi sull’ottimizzazione delle disposizioni fornite dagli strumenti, piuttosto che sulla riorganizzazione radicale dell’architettura del sito.

Template Pagine

Di seguito vengono presentate alcune delle pagine più significative del template, suddivise in base alle loro versioni: la V1 del 2021 e la successiva V2 del 2022-2023.

Versione 2022-2023

Per visionare le immagini a dimensione reale su desktop, si consiglia di aprire le immagini nella galleria ( sfondo nero ) e poi con tasto destro sull’immagine aprirle nuovamente con “ apri in un’ altra scheda”.

Versione 2021

Menu Profilo Cliente

Per migliorare l’esperienza utente e la navigazione, è stato ottimizzato il menu del profilo utente, rendendo più immediato l’accesso a tutte le sezioni dedicate. A differenza del modello di menu standard di WooCommerce, che è minimale, sono state introdotte delle sezioni per strutturare e suddividere in modo più ordinato i contenuti. Questa miglioria, implementata tramite le funzioni di filtro di WooCommerce, ha permesso di riorganizzare gli elementi per una maggiore chiarezza e fruibilità.

Ordine Effettuato – Venditore e Cliente

Gli ordini rappresentano un elemento cruciale sia per i venditori che per i clienti. Per questo motivo, la loro gestione e la comunicazione ad essi relativa sono state oggetto di un’attenta ottimizzazione.

Venditore

La lista degli ordini per i venditori, originariamente strutturata come una semplice tabella priva di immagini e dati di spedizione, è stata significativamente migliorata. Sono state implementate le immagini dei prodotti per consentire una rapida identificazione e lo stato della spedizione per un controllo immediato. L’uso di colori diversi per ogni stato offre un alert visivo che facilita la gestione. Analogamente, la scheda del singolo ordine è stata rivisitata con una migliore disposizione dei dati e l’introduzione di box informativi ben distinti e colorati. Un’aggiunta importante è la tabella dedicata in azzurro con i dati specifici del prodotto. Il numero dell’ordine, che nel template standard era poco visibile, è stato ingrandito e messo in evidenza. Pur essendo una grafica molto colorata, lontana da uno stile minimalista, la scelta cromatica è funzionale a migliorare la comunicazione: il colore aiuta a dividere e a individuare rapidamente gli elementi visivi all’interno della struttura a tabella predefinita.

Per visionare le immagini a dimensione reale su desktop, si consiglia di aprire le immagini nella galleria ( sfondo nero ) e poi con tasto destro sull’immagine aprirle nuovamente con “ apri in un’ altra scheda”.

Cliente

Anche per i clienti, il template degli ordini è stato ottimizzato. Similmente alla sezione dedicata ai venditori, sia la lista che il dettaglio del singolo ordine sono stati migliorati. Sono state aggiunte le immagini dei prodotti, i dati di spedizione e sono stati potenziati gli elementi comunicativi, ingrandendo le informazioni chiave e inserendo pulsanti interattivi per una migliore fruibilità.

Grafiche Comunicative

Slider per Home Page e Testate

Per aggiungere un tocco creativo e fare leva sulle emozioni positive legate alle fiere di settore, sono state realizzate delle slider comunicative. Queste contengono grafiche vettoriali a tema e messaggi umoristici, pensati per creare un legame empatico con gli utenti e richiamare il piacere dell’esperienza fieristica.

Grafiche Categorie

Grafiche Categorie

Per alcune categorie di prodotti, sono state create delle grafiche esclusive in vettoriale. L’obiettivo è stato rappresentare visivamente la tipologia di articoli in vendita, molto specifici del mondo delle fiere del fumetto e del gioco (ad esempio, le sezioni dedicate a cosplay e abbigliamento fantasy). Per ogni categoria, sono state realizzate tre varianti grafiche (rettangolare, quadrata e senza testo) per poterne garantire l’utilizzo su diverse piattaforme e supporti comunicativi.

Guide Venditore (format di spiegazione)

L’approccio a un nuovo strumento può risultare complesso, specialmente per chi ha già molte altre attività da gestire. Per facilitare l’utilizzo della piattaforma, sono state create delle guide dettagliate che spiegano passo dopo passo come sfruttare al meglio ogni sezione a disposizione dei venditori. Di seguito, alcuni esempi delle guide visive realizzate per illustrare le diverse funzionalità:

Per visionare le immagini a dimensione reale su desktop, si consiglia di aprire le immagini nella galleria ( sfondo nero ) e poi con tasto destro sull’immagine aprirle nuovamente con “ apri in un’ altra scheda”.