
## Piattaforma:
Ecommerce

## Descrizione progetto:
Progettazione e Sviluppo da zero di una piattaforma Ecommerce per un Trader internazionale B2B.

## Attività:
UX e Service design, in particolare una mappatura del flusso di acquisto B2B nella specifica attività del trader. Attenzione massima è stata dedicata alla variazione dei prezzi (su base quantitativa in automatico o grazie a quotazione dedicata), ciò ha implicato in fase di sviluppo customizzazione dell'installazione WooCommerce.

<RenderedImage 
    imgPath='' 
    imgDescription="L'analisi del flusso ha determinato la necessità di convogliare le logiche commerciali B2B adattando i meccanismi B2C tipici dell'Ecommerce" 
/>

## Ricerca:
il progetto, in fase di start up, si è basato l'analisi di alcuni casi d'uso specifici. 
Abbiamo monitorato in particolare, le fasi di ricerca delle referenze, sulla base sia delle loro istanze tecnologiche, applicative e funzionali; le fasi legate alla contrattazione commerciale, sia con la sola scelta del quantitativo per determinare il prezzo, che, soprattutto, della contrattazione diretta con la richiesta di quotazione dedicata. 

Quest'ulitma, naturalmente, è risultata essere la più importante opportunità sia in sede tecnologica che in sede commerciale, la vera chiave di svolta del progetto che lo posizionava in modo univoco.

Assumono importanza cruciale le fasi di registrazione al portale, di richiesta quotazione, lato utente; la generazione e gestione di un litino personalizzato per ogni cliente come l'amministrazione dei codici sconto e l'applicazione dei prezzi personalizzati per ogni singolo prodotto lato amministratore.


<RenderedImage 
    imgPath='web-products-filters.jpg' 
    imgDescription='È possibile ricercare i prodotti per tecnologia, per logica applicativa e caratteristiche funzionali, aggiornando in automatico i risultati a ogni selezione e senza produrre "zero risultati"' 
/>

## Design:
L'obiettivo da garantire era il mantenimento più snello possibile del modello di business tradotto in tecnologia. 
La materia stessa trattata, non essendo visivamente cosí "interessante" ha suggerito di procedere per metafore illustrate, privilegiando l'aspetto tecnologico, appunto, e solo in secondo caso sulla base delle funzionalità.

Abbiamo dedicato attenzione massima agli stati dei bottoni sulla base delle contrattazioni e alla più immediata identificazione dei prodotti appartenenti alla categoria "Available on Request", particolari prodotti per cui è necessaria la contrattazione sempre e comunque.

<RenderedImage 
    imgPath='web-price-variations.jpg' 
    imgDescription="I prezzi variano in funzione della quantità inserita in carrello, oppure dopo contrattazione e quotazione si può avere un prezzo specifico e dedicato" 
/>

## Development:
È stato necessario aggiungere al classico bottone 'Add to Cart' un ulteriore bottone 'Quote' per permettere la contrattazione il prima possibile nel flusso di navigazione.
Nella pagina prodotto, invece, grazie alla customizzazione di WooCommerce si è reso possibile, variare i prezzi in funzione delle quantità selezionate, l'aggiornamento avviene in tempo reale evidenziando il passaggio nella tabella prezzi.

Attenzione particolare si è data alla tabella delle spedizioni che necessitava logicamente un'attenzione specifica, sia in base alle destinazioni (world-wide) che per le variazioni di peso (su basi di 25kg per box).

Nella pagina shop è possibile filtrare i prodotti per tecnologia, funzionalità e applicazioni con aggiornamento in tempo reale delle istanze senza il pericolo del "zero risultati" come già descritto in altri progetti.

Ecommerce B2B, variazione prezzi per quantità, quotazioni personalizzate e email marketing

Applicazione Cross-platform

Trading online di materie prime di straordinaria qualità. Variazioni dei prezzi in base alle quantità e trattative commerciali con quotazioni custom, le regole per la vendita B2B in uno strumento puramente B2C.

Ecommerce B2B


## Piattaforma:
Web app, sviluppo in HTML, CSS, JavaScript

## Descrizione progetto:
Grazie a questo strumento, non è più necessario inviare allegati, stampare bolle d’accompagnamento e bollettini di analisi di qualità per ogni ordine; modifica radicale del modello tipico del distributore di materie prime.

## Attività:
Ricerca e analisi sul campo, interviste agli utenti e prototipazione (wireframe e ad alta fedeltà).
Progettazione e sviluppo della WebApp (HTML5, CSS3, JavaScript).


<RenderedImage 
    imgPath='customer-area-service-blueprint.jpg' 
    imgDescription="L’analisi dei principali processi è stata la chiave di lettura che ha consentito di generare valore nel prodotto sviluppato" 
/>

## Ricerca:
In osservanza delle norme regolatorie del settore, ogni prodotto/ordine deve obbligatoriamente essere accompagnato da diversi documenti.
Questi, una volta creati, devono, essere stampati e accompagnare il prodotto spedito.

La soluzione proposta permette di caricare automaticamente alla mezzanotte nell’Area Riservata di ciascun cliente attivo, grazie all’integrazione di sistemi e linguaggi di programmazione diversi.

<RenderedImage 
    imgPath='sampled-web-mockup-V2-front-ls.jpg' 
    imgDescription="La difficoltà maggiore: grande quantità di dati da mostrare in tabelle responsive, risolto con brillantemente con dataTable.js e alcuni trucchetti in CSS" 
/>

## Design:
Lo stile minimale e materico si arricchisce di vero e proprio Neomorfismo, esasperando luci e ombre nei componenti a seconda dei vari stati.

La vera sfida è stata restituire la grande quantità di dati in modo tanto semplice e schematico, quanto godibile e usabile.

Data la natura di “strumento di lavoro”, il componente principale non poteva che essere la tabella, vera e propria sfida nell’ambito del responsive design, mentre l’elenco dei documenti è nascosto nell’elenco di base.

<RenderedImage 
    imgPath='error-mockup-V2-front-ls.jpg' 
    imgDescription="Il punto di forza: l’utente può cercare liberamente, oppure seguire i collegamenti verso nuove aree di business quando il contenuto gli è negato" 
/>

## Design:
Attenzione massima è stata profusa per i messaggi di errore, e le pagine a “Zero Risultati”, cercando di offrire comunque percorsi alternativi e un’esperienza completa.

Anziché nascondere le aree il cui accesso è negato, questo possono essere visitate ma il contenuto è nascosto con javascript.

Un'area riservata per migliorare l'esperienza utente nel processo di vendita e relazione con il cliente

Grazie a questo strumento, non è più necessario inviare allegati, stampare bolle d’accompagnamento e bollettini di analisi di qualità per ogni ordine; modifica radicale del modello tipico del distributore di materie prime.

Web App


## Piattaforma:
Ecommerce

## Descrizione progetto:
Progettazione e sviluppo del Negozio online di un brand di prodotti dermocosmetici e parafarmaceutici sul mercato da oltre dieci anni.
Non essendo possibile ridisegnare il packaging dei prodotti, abbiamo cominciato dalla loro vetrina.

## Attività:
Ricerca e analisi sul campo, interviste agli utenti e prototipazione, prima in wireframe poi ad alta fedeltà con HTML5, CSS3, JavaScript e JQuery.
Sviluppo sviluppo del sito in WordPress e WooCommerce.

<RenderedImage 
    imgPath='flow-example-figma.jpg' 
    imgDescription="Vetrina on line di prodotti dermocosmetici e parafarmaceutici basata sull’In-Formazione" 
/>

## Ricerca:
Si è scelto di approfondire i prodotti partendo con un approccio basato sulla Soluzione. Il target decisamente di nicchia, conosce la materia in modo approfondito e ha dimostrato interesse per i trattamenti legati ai prodotti come per gli ingredienti contenuti in essi.

Assume quindi un ruolo centrale l’attività di In-Formazione e blogging per spiegare i prodotti e il loro valore, declinata sia in chiave di tutorial (trattamenti) che enciclopedica (ingredienti).

<RenderedImage 
    imgPath='web-mockup-V2-front-2-ls.jpg' 
    imgDescription="Comunicazione B2C, tipica dello strumento Ecommerce, per utenti e contesti tendenzialmente B2B, la sfida più grande in questo processo" 
/>

## Design:
Le pagine prediligono toni chiari per richiamare l’ambito farmaceutico grazie a un Design minimale e foto dei prodotti ambientate negli scenari d’uso.

Le immagini di anteprima dei prodotti infatti sono ambientate in scenari di vita quotidiana nell’ottica di avvicinare il prodotto al cliente, aumentandone la familiarità.

<RenderedImage 
    imgPath='cart-web-mockup-V2-front-02-ls.jpg' 
    imgDescription="Minimale e pulito, scentificamente si punta sull’efficacia dei prodotti attraverso la testimonianza e il racconto del blogging" 
/>

## Development:
Lo strumento è stato sviluppato in WooCommerce in ragione sia della semplicità di gestione degli ordini da parte dell’utente, che per la nativa attitudine al blogging.

Considerando anche le modifiche e customizzazioni richieste dal cliente, è stato possibile implementare lo strumento in tempi brevi pur mantenendo, con ottimi risultati, il progetto prototipato inizialmente.

Progettazione e Sviluppo della nuova versione dell'Ecommerce di un brand dermocosmetico

Una Web App per la gestione dei clienti attivi

Progettazione e sviluppo del Negozio online di un brand di prodotti dermocosmetici e parafarmaceutici sul mercato da oltre dieci anni.

Ecommerce Re-design


## Piattaforma:
Mobile App

## Descrizione progetto:
Esame finale del corso di App Design e Development,
Progettazione e sviluppo di Applicazione Cross-Platform in React-Native per i venditori di una Telco Low Cost.

## Attività:
User Research – interviste presso i punti vendita, Workshop per mappare esperienza utente e creazione di User Stories e Use Cases.
Wireframe a mano e prototipazione in Sketch
Sviluppo dell’applicazione in React-Native.

<RenderedImage 
    imgPath='research.jpg' 
    imgDescription="User Research sul campo, l'evidenza della necessità di avere un supporto nella rete vendita" 
/>

## Ricerca
Il focus era legato all’esperienza utente nei confronti del Supporto alla rete vendita; in particolare, gli strumenti che l’azienda mette in opera (oppure no) per favorire la risoluzione dei problemi.

Frase emblematica: non abbiamo strumenti di supporto, usiamo un gruppo WhatsApp.

Abbiamo progettato sulle esigenze di Personas specifiche, il venditore alle prese con le problematicità tipiche delle TelCo Low-Cost.


<RenderedImage 
    imgPath='kenaCommunity-journey-map.jpg' 
    imgDescription="Le aree di intervento sono molteplici, è necessario ottimizzare gli sforzi" 
/>

## User stories e Use cases:
Dalle interviste abbiamo estratto una serie di macro-argomenti su cui focalizzare la progettazione.
Per rispondere alle esigenze emerse, come alle limitazioni di budget, la soluzione si è delineata come una Community in cui pubblicare richieste di supporto, ricercare soluzione a problemi.

Abbiamo scelto di mettere in campo meccanismi di gamification per aumentare l’engagement degli utenti e produrre interazioni di qualità.


<RenderedImage 
    imgPath='cross-platfrom-mobile-app-Community-design.png' 
    imgDescription="La vera sfida: creare e alimentare una community nell’era dell’intelligenza artificiale" 
/>

## Design:
Il design ha privilegiato il minimalismo e l’illustrazione, in osservanza del linguaggio tipico del brand e le sue declinazioni nelle varie campagne pubblicitarie on line, come negli altri mezzi e supporti.

Abbiamo cercato di smorzare i toni infantili delle illustrazioni corporate virando verso uno stile flat.

Applicazione Mobile Cross platform sviluppata in React-Native per i punti vendita di una Telco Low-cost

Programmazione orientata a oggetti: Area Formulativa

Esame finale del corso di App Design e Development, sviluppo di Applicazione Cross-Platform in React-Native per i punti vendita di una Telco Low-Coast

Piattaforma:

Descrizione progetto:

Attività:

Ricerca:

Design:

Development:

Potrebbe interessarti anche: