SitoWeb – E-commerce per dropshipping (2024)

Viene presentato come modello principale dell’E-commerce il progetto “GadgetStrore”.

Il progetto, anche se per dropshipping, si può applica benissimo a qualunque e-commerce di negozio fisico.

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 e WooCommerce; e infine numerose personalizzazioni e l’ottimizzazione della comunicazione dei dati all’utente.

Analisi

Questo progetto di E-commerce rappresenta la confluenza di diverse fasi di progettazione, finalizzate a offrire un modello efficace e versatile, adatto a un’ampia varietà di mercati e tipologie di negozi. Non è concepito esclusivamente per il dropshipping, ma si propone anche come strumento eccellente per le attività commerciali fisiche che intendono espandersi nel mercato digitale. Il progetto è stato testato e risulta pienamente funzionante, sebbene si riconosca che miglioramenti e aggiornamenti saranno sempre possibili e opportuni nel tempo.

Target

Il target demografico standard per questo e-commerce si estende dai giovani maggiorenni agli adulti. In questo contesto, non si considerano le fasce d’età più anziane, che tendono a non effettuare acquisti online autonomamente.

Per il progetto primario, il target specifico è costituito da giovani maggiorenni e giovani adulti, dato che il sito si concentra su gadget e prodotti legati a fumetti e manga. Per altri progetti come ad esempio quello denominato “Il coniglio sul loto”: il target scelto è un appassionato della cultura e delle tradizioni orientali. Questo pubblico è principalmente composto da donne, ma include anche uomini interessati a fare regali inerenti a questa cultura.

Il Logo e l’immagine coordinata

La definizione dell’immagine coordinata e del logo è stata rivista in due fasi distinte. Inizialmente, si è optato per un colore Blu scuro per richiamare i marchi LuccaFan e LF Store, mantenendo un contrasto semplice e minimale su sfondo bianco. Successivamente, si è provveduto a definire il nuovo logo, utilizzando tonalità di blu più chiare. Di conseguenza, anche il colore di base dell’identità visiva è stato leggermente schiarito, virando verso un Blu chiaro.

Per quanto riguarda il logo, l’idea iniziale del nome e del sottotitolo è stata mantenuta, ma è stata introdotta una nuova icona, creata appositamente in formato vettoriale per essere più specifica e distintiva. Questo processo ha permesso di conferire al sito un’identità grafica completa e coesa, composta da logo, titolo e sottotitolo, e un’immagine coordinata che ne esprime l’identità visiva.

UX Design – Esperienza utente

Per l’esperienza utente dell’e-commerce, si sono adottate le best practice e una filosofia di navigazione pulita e chiara, evitando comunicazioni confuse o eccessive. I visitatori troveranno contenuti ordinati e ben presentati, una modalità di ricerca avanzata e personalizzata, e un iter di pagamento semplice e intuitivo, guidato in ogni passaggio. È stata appositamente studiata un’interfaccia utente (UI) che offrisse tutti i comandi necessari con un impatto visivo piacevole e leggero. La pagina del checkout, in particolare, è stata revisionata e modificata al massimo delle capacità del builder per essere il più chiara e gradevole possibile per tutti i visitatori.

L’esperienza utente non si limita alla grafica e ai menu di navigazione, ma include anche tutti i contenuti di cui il visitatore necessita. Ciò significa che l’esperienza deve considerare l’accesso a informazioni fondamentali come “spedizioni”, “resi”, “sconti”, “dati legali” e, naturalmente, le sezioni classiche quali la scheda prodotto, le liste, il carrello e i pagamenti. Un buon e-commerce dovrebbe fornire tutte le informazioni necessarie senza appesantire la navigazione. In questo contesto, la citazione “la perfezione si raggiunge […] quando non c’è più nulla da togliere” è particolarmente pertinente, essendo che in un e-commerce non sia possibile eliminare elementi essenziali e obbligatori.

UI Design – La grafica

L’esperienza utente (UX) e la grafica sono elementi che spesso procedono di pari passo nello sviluppo di un progetto. L’obiettivo è realizzare un’interfaccia piacevole che conduca ai risultati desiderati e che massimizzi l’efficacia della comunicazione. Tutto ciò deve essere conciliato con le strutture dei template e le funzionalità offerte dai vari plugin.

Pertanto, non è semplice tradurre l’ideale di navigazione immaginato da un grafico nell’implementazione pratica con gli strumenti disponibili. Inoltre, nell’attuale era digitale, caratterizzata da una complessità crescente, non è più proponibile l’idea di creare piattaforme da zero e mantenerle costantemente performanti. È preferibile, invece, supportarsi con strumenti avanzati e concentrarsi sulle fasi finali e sul risultato complessivo del progetto.

Per l’interfaccia, in termini di stile e grafica, si è optato per un approccio minimal che, tuttavia, include una ricchezza di contenuti. Lo sfondo è bianco e i testi sono di un colore primario (selezionabile tra tonalità di blu, viola, verde, ecc.), garantendo così una grafica pulita, ma con tutti i pulsanti essenziali. Si mantiene la filosofia di rendere tutti i contenuti facilmente accessibili al visitatore.

Le pagine primarie dello store sono state elaborate per una comunicazione chiara e piacevole. La pagina prodotto, in particolare, cerca di fornire le informazioni chiave già nella parte superiore dello schermo, incentivando però l’utente a esplorare ulteriori dettagli tramite pulsanti testuali. Inoltre, si trovano un popup per le domande sul prodotto e un pulsante guida per ottimizzare l’uso della scheda (ad esempio, come utilizzare la galleria immagini su dispositivi mobili). Poiché gli schermi mobili difficilmente possono contenere tutti i dati di un prodotto come quelli desktop, è fondamentale organizzare i contenuti in una sequenza logica e intuitiva, pur mantenendo la loro importanza.

Anche la pagina di pagamento è stata strutturata per essere il più possibile pulita, fornendo comunque tutte le spiegazioni e le informazioni necessarie per una corretta compilazione. Il tutto è organizzato in un modello sequenziale a step verticali. Ogni sezione del sito è stata quindi pensata e revisionata nel tempo per codificare al meglio un’esperienza piacevole attraverso le diverse fasi di navigazione.

Testata e Footer

Testata Header

Le versioni della Testata (header) hanno subito diverse revisioni, con l’obiettivo di massimizzare la comunicazione e l’esperienza dell’interfaccia. Sebbene le versioni desktop e mobile mantengano lo stesso stile e colore, presentano strutture completamente diverse per soddisfare le specifiche esigenze di comunicazione di ciascun layout.

In entrambi i casi è stato implementato lo Sticky Header, un effetto che modifica l’header durante lo scorrimento della pagina. Questa è considerata una best practice per l’esperienza utente, in quanto permette di mantenere i comandi principali dell’header sempre accessibili durante la navigazione, riducendo al contempo lo spazio occupato dalla stessa testata. Infatti, lo sticky header si riduce a circa un terzo delle sue dimensioni originali.

Il Desktop

La testata ha attraversato diverse fasi di sviluppo prima di raggiungere l’interfaccia ottimale. Le versioni per desktop e mobile adottano approcci molto distinti e sono state progettate separatamente per adattarsi al meglio alle diverse esigenze. Nella versione desktop, si è mantenuta la prassi di posizionare il logo e il menù sulla sinistra, la prima area di visione per il visitatore. I comandi e-commerce e i dati aggiuntivi sono invece collocati sulla destra, seguendo lo standard di disposizione più diffuso per garantire un’esperienza utente intuitiva.

Si è scelto di sfruttare la Topbar, solitamente utile per i negozi fisici, come area di comunicazione per annunci. A differenza delle classiche strisce in alto con “X” di chiusura, che spesso risultano fastidiose: qui invece è stata integrata in modo più armonioso. Inizialmente, il lato destro della Topbar era stato pensato per ospitare le icone social, ma questa idea è stata poi sostituita da una comunicazione importante relativa alla piattaforma multi-e-commerce. La barra di ricerca si conferma un elemento di punta nelle testate e-commerce, fungendo anche da elemento di spaziatura tra due aree di comando poste agli estremi dello schermo. Questa sua qualità, tuttavia, non è riproducibile nell’interfaccia mobile.

La stesura finale desktop

a versione desktop finale (4°) rappresenta una sintesi e un’uniformità degli elementi delle versioni precedenti. L’altezza dell’header è stata compattata per ottimizzare lo spazio, mentre gli elementi interni sono stati ingranditi. Questo rende il blocco dell’header un elemento pieno e strutturato, non più un semplice sfondo con elementi dispersi. La colorazione è stata uniformata, fatta eccezione per il cuore rosso delle liste dei preferiti, che mantiene il suo ruolo di piacevole tocco stilistico e di contrasto. Nel complesso, il primo impatto visivo è gradevole e omogeneo. Gli elementi, pur avendo scopi differenti, sono ben distinti tra loro e offrono una comunicazione pressoché immediata.

Il Mobile

Come accennato in precedenza, la versione mobile deve essere concepita in modo autonomo, con una parte dei contenuti accessibile solo in uno step successivo. La difficoltà primaria nel design mobile risiede nella capacità di inserire un buon numero di elementi in uno spazio ridotto. Si tende a mantenere uno stile minimal ed essenziale, ma alcuni aspetti sono fondamentali, come l’icona del carrello. Un altro elemento che si è reso necessario, in questo caso, è la scelta di una testata su due linee. Questa soluzione non appesantisce la grafica, ma permette di offrire quasi tutti gli stessi comandi presenti nella versione desktop. È inoltre canonico l’utilizzo di sole icone, senza testi, per ottimizzare lo spazio e la chiarezza visiva.

La stesura finale mobile

Anche per la versione mobile, si è compattato lo spazio dell’header, ingrandendo gli elementi e creando uniformità di colore e spaziature. Questo ha permesso di mantenere un’area di “comandi” chiaramente percepibile nella sua distinzione tra il lato destro e sinistro dello schermo. Gli elementi, pur avendo scopi differenti, sono ben distinti tra loro e offrono una comunicazione pressoché immediata.

Footer – a Piè di Pagina

Come di consueto, il footer di un e-commerce deve contenere tutti i dati di natura amministrativa e legale. Per questo motivo, la sua disposizione è solitamente piuttosto standardizzata su tutti i siti. In questo contesto, si è optato per un’impostazione a tre colonne: la prima dedicata alle informazioni legali generali, mentre la seconda e la terza contengono link diretti alle informative legali e contrattuali. I collegamenti ai social media, così come i link a privacy e cookie policy, sono stati inseriti in questo spazio.

Nella versione mobile, la disposizione è stata semplificata con un’organizzazione verticale dei blocchi.

Il Menu di navigazione

Il menu di navigazione è stato strutturato in modo standard: compatto e discreto nella versione desktop, e a blocchi espandibili in quella mobile. Lo strumento risulta lineare e semplice nell’utilizzo. Per quanto riguarda le categorie, oltre al classico elenco delle categorie primarie all’interno del menu principale, si è optato per una visualizzazione separata, con menu distaccati dedicati alle categorie.

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”.

Home Page

La home page è stata concepita con un duplice scopo: presentare lo store, descrivendo in linee generali la sua offerta e il settore di riferimento, e fornire una vetrina per le novità, i prodotti più votati e una selezione di articoli. Si è quindi realizzata una home page che parte con un grander slider di presentazione, seguita dai prodotti consigliati.

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”.

Lista prodotti e Ricerca

La lista prodotti richiede alcune considerazioni chiave: innanzitutto, quali dati dovrebbero comunicare i singoli box, e in secondo luogo, come migliorare la sidebar dei filtri.

Decidere gli elementi da mostrare nei Box Prodotto non è semplice. È scontato che saranno sempre presenti l’immagine, il titolo e il costo. Ma cosa aggiungere per non sovraccaricare la grafica? In questo contesto, si è optato per inserire il rating, il pulsante per i preferiti e il pulsante aggiungi al carrello. Le indicazioni di saldi o “esaurito” sono invece posizionate direttamente sull’immagine.

Per quanto riguarda i filtri di ricerca, sarebbe utile includere tutti i filtri possibili, posizionando quelli più classici e utili in alto. I filtri minori dovrebbero essere posti in fondo o, ancor meglio, disposti in tab chiuse che si aprono su richiesta dell’utente. Nella versione mobile, la sidebar è accessibile tramite un pulsante che apre un menu a tendina dedicato.

La struttura scelta per la lista prodotti non ha subito grandi cambiamenti, ma ha visto un miglioramento significativo nello stile grafico e nelle opzioni della Sidebar.

Il modello grafico della lista prodotti ha avuto 3 variazioni stilistiche (descritte sopra), qui di seguito vengono mostrati i template partendo dal più vecchio

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”.

Lista prodotti in categorie

Le pagine di lista prodotti in categoria sono molto simili alla classica pagine dello shop base che presenta la lista dei prodotti. La differenza sostanziale risiede nella testata, la quale comunica chiaramente la categoria in questione e mostra le sottocategorie a cui è possibile accedere.

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”.

La scheda prodotto

La scheda prodotto, vero fulcro della struttura di un e-commerce, offre innumerevoli possibilità stilistiche. La versione base di WooCommerce è molto semplice e si fonda su un concept che prevede l’acquisto di un prodotto con “pochissime informazioni”. Tuttavia, una scheda prodotto dovrebbe contenere tutti i dati di dettaglio necessari affinché un potenziale cliente possa “decidere” di effettuare l’acquisto. La disposizione di così tante informazioni diventa, quindi, il compito principale del UI Designer.

Certamente, nella parte superiore della pagina, è indispensabile inserire il titolo, l’immagine e il costo, che rappresentano i tre pilastri informativi fondamentali. A questi si aggiungono poi elementi come le varianti (ad esempio, colori o stili differenti), la descrizione dettagliata, le recensioni, le informazioni sulla spedizione, le categorie di appartenenza del prodotto e così via.

Nella realizzazione del template, sono state studiate diverse versioni. È stato fondamentale considerare che una parte significativa dei prodotti, specialmente quelli in dropshipping, presenta varianti da selezionare. Di conseguenza, la pagina non è stata progettata come una semplice scheda per singolo prodotto, ma è stata ottimizzata per una migliore visualizzazione delle varianti. Per l’implementazione, sono stati utilizzati gli strumenti del builder di Avada, che, in alcuni aspetti, hanno presentato qualche limite strutturale.

Si è optato per una struttura a due colonne nella versione desktop, in linea con i modelli standard adottati dai siti più rilevanti: l’immagine/galleria è posizionata a sinistra, mentre i dati del prodotto si trovano a destra. Le informazioni relative al prodotto sono disposte verticalmente e strutturate in “linee” per dividere l’area in blocchi e zone comunicative. Si è cercato di ampliare gli spazi e organizzarli in linee o blocchi per facilitarne la visualizzazione. I contenuti più lunghi e complessi sono stati inseriti in un TAB di contenuti che si apre automaticamente sulla descrizione completa. Altre informazioni, come i video, le recensioni, gli sconti e i dettagli sulle spedizioni, sono anch’esse organizzate all’interno di questi TAB apribili.
Infine, piccoli elementi informativi sono stati disposti ai margini dei contenuti, quali l’identificativo della scheda prodotto, le categorie di appartenenza e le opzioni di condivisione social.

Nella versione mobile, tutti gli elementi devono essere sequenziali, rendendo indispensabile la scelta di una “priorità” di visualizzazione. In questo contesto, si è optato per posizionare come primo elemento il titolo, seguito immediatamente da recensioni e preferiti, che rimangono strumenti da mostrare nella parte alta della pagina. Subito dopo, si trovano l’immagine, il prezzo e le varianti. Tutti gli altri contenuti seguono in un ordine di importanza più o meno decrescente.

I prodotti consigliati sono stati appositamente collocati a fondo pagina e suddivisi per tipologia di suggerimento. Questa scelta mira a non sovraccaricare i visitatori con consigli forzate, bensì a offrire loro la possibilità di visualizzarli solo quando lo desiderano, scorrendo fino alla fine della scheda prodotto, come avviene in molti marketplace.

Il modello grafico della scheda prodotto ha avuto 4 variazioni stilistiche, qui di seguito vengono mostrati i template partendo dal più vecchio

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”.

Scheda Carrello e Pagamento

Le pagine del carrello e del checkout sono state studiate specificamente per garantire una “piacevole fruibilità”. Il termine “piacevole” racchiude un insieme di ottimizzazioni mirate: le pagine sono pulite, prive di distrazioni aggiuntive come popup o suggerimenti di altri prodotti. La testata si modifica, lasciando visibili solo un menù chiuso per la navigazione, il logo e i link alle pagine seguente del processo. L’elenco dei prodotti è graficamente ben delineato, e il riepilogo del subtotale comunica i dati essenziali con una grafica ampia, chiara e colorata.

Carrello

WooCommerce, nella sua configurazione standard, presenta spesso un’interfaccia minimalista basata su tabelle, che può rendere il design delle pagine di carrello e checkout eccessivamente piatto e poco comunicativo. In particolare, la colonna del “Subtotale” e “Totale” risulta spesso ridotta a una mezza colonna, priva di uno stile grafico distintivo.

Per migliorare questa struttura, si è intervenuti dilatando il tab del subtotale e mettendo meglio in evidenza i contorni delle tabelle. L’obiettivo è uniformare gli elementi e mantenere una chiara sequenza verticale. Inoltre, i due strumenti “supplementari”, ovvero i coupon e l’indirizzo, sono stati aggiunti alla pagina come blocchi paralleli (o in sequenza nella versione mobile), posizionandoli però dopo il pulsante “vai all’ordine”. Questa scelta è stata fatta per due motivi principali: in primo luogo, evita di creare una discontinuità con il contenuto superiore relativo ai prodotti e ai loro costi; in secondo luogo, essendo vicini al pulsante finale, questi blocchi sono immediatamente visibili prima del cambio di pagina, così da offrire la possibilità al visitatore di modificare i campi prima della pagina successiva.

Il modello grafico del carrello ha avuto 2 variazioni stilistiche, qui di seguito vengono mostrati i template partendo dal più vecchio

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”.

Checkout – Pagamento

Per quanto riguarda il checkout o la pagina di pagamento, la struttura grafica predefinita di WooCommerce è basata su tabelle e concepita su due colonne. Tuttavia, queste colonne contengono elementi molto differenti tra loro, il che rende l’interfaccia complessa da organizzare. Anche qui, ci troviamo di fronte a un’interfaccia minimal, creata con tabelle e che può risultare poco chiara per chi non è abituato al sistema.

Sebbene esistano estensioni per un checkout a step, queste spesso sono carenti di stile grafico (UI e UX) e pertanto è meglio evitarle. Si evidenzia, pertanto, la necessità di revisionare la struttura base del sistema e riadattarla laddove possibile, migliorando l’esperienza complessiva.

Dopo una fase iniziale di miglioramento grafico della struttura WooCommerce esistente, si è progettata un’interfaccia lineare e specificamente studiata per massimizzare la sequenzialità (verticale), richiamando i modelli di checkout a step.

Il contenuto è stato suddiviso in blocchi numerici, ognuno associato a un argomento o un form specifico: 1) revisione dei prodotti e subtotale, 2) Dati fatturazione, 3) Dati spedizione se variano da quelli di fatturazione, 4) Note aggiuntive, 5) Pagamento e azione finale di pagamento.

Inoltre, per evitare possibili dubbi del cliente, si è scelto di includere un testo esplicativo per ogni step: un’informazione semplice e chiara che fornisce indicazioni precise per ogni fase. Durante lo scorrimento tra le sezioni, una barra degli step cambia colore, indicando chiaramente la posizione attuale nel processo.

La strutturazione ottimale di questo layout sul builder di Avada, inclusa la realizzazione dell’effetto sticky durante lo scorrimento della pagina, ha rappresentato una sfida complessa.

Il modello grafico del checkout ha avuto 2 variazioni stilistiche, qui di seguito vengono mostrati i template partendo dal più vecchioù

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”.

Il progetto è sviluppato per applicarsi a più siti e-commerce:

https://gadgetstore.luccafan.com/
https://conigliosuloto.luccafan.com/
https://vestirelarp.luccafan.it/
https://kitsunecosplay.luccafan.com/
https://aischeck.luccafan.it/
https://bomboniere.luccafan.it/
https://adventurekit.luccafan.com/
https://gashapon.luccafan.com/
https://yoccastore.luccafan.it/