Università Commerciale Luigi Bocconi

Savas Milano

Leone Sport 1947

Boxeur Des Rues

Puro Sushi

Ross Liuteria

Fondazione Somaschi Onlus

miBabbo

Giuliano Dottori

n\'orma

Bigi Gregoli

JungleLink

Scuola di Musica Cluster


## 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:
Web

## Descrizione progetto:
Ridisegnare un leaflet? perché non introdurre piuttosto un’esperienza phyigital!
Progettazione e sviluppo di un’area riservata ai formulatori, per far conoscere gli ingredienti partendo dalle lavorazioni finite che li contengono.

## Attività:
Mappatura dell’esperienza utente durante gli eventi fieristici, analisi dei diversi touch point con particolare interesse per la trasformazione digitale di questi.
Sviluppo Area sul sito, programmazione a oggetto custom.

<RenderedImage 
    imgPath='journey-sustainability.jpg' 
    imgDescription="Mappando le interazioni dell’utente e la sua percezione di Sostenibilità abbiamo compreso una soluzione alternativa" 
/>

## Ricerca:
La ridondanza di touch points viene limitata introducendo un’area dedicata alle formulazioni sul sito corporate.

Il QR diventa il portale attraverso cui passare dalla dimensione fisica della carta, a quella digitale del sito web.

<RenderedImage 
    imgPath='formulation-area-mobile-scaled.jpg' 
    imgDescription="Dal re-design di un volantino, si è passati al re-design di un servizio in chiave digitale" 
/>

## Design:
Inizialmente è stato ridisegnato il leaflet, come da loro richiesta originaria, per poi digitalizzarlo e presentarlo come solo documento scaricabile.

Il limite maggiore del flusso era rappresentata proprio dal cartaceo, causa di un flessione negativa importante nella curva della sostenibilità del progetto.

<RenderedImage 
    imgPath='formulation-area-front.jpg' 
    imgDescription="Le combinazioni dei campi di ricerca non daranno mai più l’odiosa “Zero Risultati possibili”" 
/>

## Development:
Il design delle pagine si è concentrato sulle funzionalità di ricerca per collegamento dei campi e risultati in Ajax.

La ricerca consente di aggiornare automaticamente i campi influenzando le scelte successive, con l’obiettivo specifico di filtrare dinamicamente e non mostrare mai “Zero risultati disponibili”, guidare l’utente a scoprire i prodotti selezione dopo selezione.

Progettazione e sviluppo di un'area di ricerca avanzata dedicata a un target specifico

Ecommerce Re-design Development

Progettazione e sviluppo di un’area riservata a formulatori, per far conoscere gli ingredienti partendo da lavorazioni finite che li contengono.

Area Formulativa


## 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

Portfolio

Alcune Case History significative che, spero, aiutino a comprendere il metodo di lavoro adottato in alcuni pratici esempi

Ecommerce B2B

Web App

Ecommerce Re-design

Area Formulativa

Applicazione Mobile Cross-Platfom

Ho avuto l'onore di lavorare con: