Calzedonia: gestione media per il fashion (enterprise SaaS).
Come rendere più evidenti gli errori da modificare e risparmiare decine e decine di ore di lavoro.
Sommario:
Risultati ottenuti:
- Riduzione del tempo medio di revisione dei media −34%.
- Taglio delle ore di allineamento sulla gestione media −60%.
- Diminuzione dei cicli di rework −25% e +18% media approvati/settimana.
Tipo di lavoro:
Progettazione e sviluppo di funzionalità prodotto (UX/UI).
Consegna:
Modalità Confronto con slider e annotazioni contestuali (pin e disegno libero) integrate nel Pannello di Dettaglio della Media Library.
Team:
Giacomo Dalia; team sviluppo Warda; CPO; stakeholder cliente Calzedonia (referente: Olena Avramenko).
Il mio ruolo:
UX/UI Designer — discovery con stakeholder, osservazione sul campo, definizione dell’interazione (slider + note), micro‑UI e micro‑copy, prototipazione, handoff e QA.
Curiosità:
L'introduzione dello slider ci ha permesso di scoprire la quantità di editing che viene applicato nel mondo della moda. Il livello di perfezione richiesto alle volte è ridicolmente assurdo per i non tecnici.
Introduzione:
SeeCommerce è una piattaforma rivolta ai brand del fashion, consentendo di centralizzare i dati di prodotto, organizzare cataloghi e gestire i media in un unico ambiente, fino alla pubblicazione su siti istituzionali ed e‑commerce.
In questo scenario i media di prodotto sono un tassello essenziale del go‑live: shooting, post‑produzione, revisioni e approvazioni devono scorrere in modo fluido. Uno dei nostri principali clienti, Calzedonia, utilizza SeeCommerce per l’intero flusso e da qui è emersa l’esigenza di confrontare versioni differenti dello stesso scatto e comunicare con precisione le modifiche ai retoucher.
Ho avviato il lavoro con un confronto con la nostra referente in Calzedonia, Olena Avramenko, osservando il team mentre comparava gli scatti. Da questa attività di osservazione sono emerse tutti i principali elementi che hanno contribuito al successo del progetto
Il lavoro è partito osservando come gli specialisti di Calzedonia revisionavano le immagini. SeeCommerce ragiona per Viste: ogni Vista rappresenta una tipologia di scatto — può essere Shooting o Post‑production, codificata in base alle necessità del business come Still‑life, Worn, fronte o lato. All’interno della stessa Vista convivono le varie versioni dello stesso scatto.
Problema:
Capire le differenze tra una versione e l’altra richiedeva molto tempo e costringeva a continui passaggi manuali da un’immagine all’altra, affidandosi solo all’occhio esperto di chi revisionava.
Soluzione:
Integrare uno slider di confronto che sovrappone due immagini e consente di scorrere facilmente da una versione all’altra.
Fino a quel momento chi approvava era costretto ad aprire lo zoom e alternare manualmente le immagini per cogliere le differenze, anche le più sottili. Un processo lento, macchinoso e legato all’esperienza del singolo.
La soluzione che è sembrata subito più naturale è stata quella di sovrapporre due versioni e permettere di scorrere uno slider centrale per rivelare da un lato l’una e dall’altro l’altra immagine. Ho progettato un’attivazione leggera, direttamente dall’anteprima del media nel pannello destro. Se l’utente ha selezionato un solo media, l’interfaccia lo invita a sceglierne un secondo, per attivare il confronto. Inizialmente avevo pensato di limitare il confronto alle ultime due versioni, ma ho preferito lasciare la possibilità di affiancare una post‑produzione avanzata con lo shooting originale.
Problema:
le correzioni richieste venivano comunicate in modo vago, tramite chat o riunioni, con grande dispendio di tempo e rischio di fraintendimenti.
Soluzione:
introdurre un sistema di annotazioni contestuali direttamente sull’immagine (pin colorati e, in seguito, disegno libero) per indicare con precisione cosa modificare.
Risolto il confronto visivo, è emersa una seconda frizione forse ancora più impattante: come comunicare con precisione cosa andava corretto. Fino a quel momento le osservazioni viaggiavano attraverso chat generiche o lunghe riunioni: indicazioni come “ammorbidire spalla” o “togliere piega” rimanevano vaghe, non contestualizzate all’immagine, e costringevano a diversi giri di confronto per capirsi davvero. Una perdita di tempo notevole, che rallentava la pubblicazione e aumentava la frustrazione del team.
La prima soluzione che abbiamo introdotto è stato un sistema di annotazioni contestuali semplici: piccoli pin colorati applicati direttamente sull’immagine, ognuno con un commento testuale e lo stato Aperto/Risolto. Questa funzione ha già reso più chiaro e rapido lo scambio: ogni feedback si ancorava ad un punto preciso della foto ed era visibile con il tool di annotazione attivo, fino alla correzione definitiva.
Tuttavia, dopo i primi test, è emerso un limite: non sempre un pin era sufficiente. Alcune correzioni riguardavano aree irregolari (una piega lunga, un riflesso diffuso, un alone di colore) difficili da spiegare con un singolo punto. Da qui il passo successivo: le annotazioni a disegno libero. Con un semplice tratto era possibile cerchiare o evidenziare direttamente la zona da correggere.
Durante il confronto con lo slider, le note non rimanevano fisse e intrusive: seguivano l’immagine attiva, scomparendo quando si visualizzava la porzione della versione alternativa e riapparendo al ritorno. In questo modo si potevano leggere i feedback specifici di entrambe le versioni senza confusione visiva.
Per garantire chiarezza abbiamo poi curato alcuni micro‑dettagli: le etichette “Shooting” e “Post‑Production” sempre visibili, l’ordine di selezione indicato da “1” e “2” (fondamentale con immagini simili), la disattivazione automatica della feature in assenza di una seconda versione, la persistenza delle note nella scheda del file con storico consultabile. In parallelo ho seguito l’handoff con successive sessioni di QA, affrontando edge case come risoluzioni diverse, orientamento, zoom e drag del cursore, verificando performance e allineamento pixel‑perfect anche su immagini di grandi dimensioni (2000×3000 px).
Impatti e risultati
Nei primi sprint dopo il rilascio, il team ha completato i cicli di revisione con una riduzione media dei tempi del 34% (dal primo confronto alla chiusura delle note). La disponibilità di feedback contestuali e tracciati ha tagliato di circa il 60% le ore di meeting dedicate agli allineamenti e ha ridotto del 25% i cicli di rework con i retoucher. A livello di volume di lavoro, i media approvati a settimana sono cresciuti di circa 18%, con adozione della funzionalità oltre l’85% entro due settimane e zero incidenti critici post‑rilascio.
Questi risultati sono coerenti con il volume di lavoro di Calzedonia — decine di migliaia di immagini per stagione e ~50 utenze dedicate — e si sono tradotti in meno attrito operativo e go‑live più rapidi sulle collezioni successive.
Conclusioni
Lo slider di confronto e le annotazioni contestuali hanno trasformato un processo basato su intuito e memoria in un flusso visivo, preciso e collaborativo. La forza della soluzione sta nella sua essenzialità: vive dove serve (nel pannello di dettaglio), si attiva in un gesto e rispetta le abitudini del team, lasciando piena libertà di scegliere quali versioni confrontare.
Ha funzionato soprattutto l’approccio: osservazione sul campo, progettazione dell’interazione minima sufficiente, cura della micro‑UI (etichette chiare, ordine di selezione) e un handoff tecnico che ha coperto performance, edge case e allineamento pixel‑perfect.
Calzedonia: gestione media per il fashion (enterprise SaaS).
Come rendere più evidenti gli errori da modificare e risparmiare decine e decine di ore di lavoro.
Sommario:
Risultati ottenuti:
- Riduzione del tempo medio di revisione dei media −34%.
- Taglio delle ore di allineamento sulla gestione media −60%.
- Diminuzione dei cicli di rework −25% e +18% media approvati/settimana.
Tipo di lavoro:
Progettazione e sviluppo di funzionalità prodotto (UX/UI).
Consegna:
Modalità Confronto con slider e annotazioni contestuali (pin e disegno libero) integrate nel Pannello di Dettaglio della Media Library.
Team:
Giacomo Dalia; team sviluppo Warda; CPO; stakeholder cliente Calzedonia (referente: Olena Avramenko).
Il mio ruolo:
UX/UI Designer — discovery con stakeholder, osservazione sul campo, definizione dell’interazione (slider + note), micro‑UI e micro‑copy, prototipazione, handoff e QA.
Curiosità:
L'introduzione dello slider ci ha permesso di scoprire la quantità di editing che viene applicato nel mondo della moda. Il livello di perfezione richiesto alle volte è ridicolmente assurdo per i non tecnici.
Introduzione:
SeeCommerce è una piattaforma rivolta ai brand del fashion, consentendo di centralizzare i dati di prodotto, organizzare cataloghi e gestire i media in un unico ambiente, fino alla pubblicazione su siti istituzionali ed e‑commerce.
In questo scenario i media di prodotto sono un tassello essenziale del go‑live: shooting, post‑produzione, revisioni e approvazioni devono scorrere in modo fluido. Uno dei nostri principali clienti, Calzedonia, utilizza SeeCommerce per l’intero flusso e da qui è emersa l’esigenza di confrontare versioni differenti dello stesso scatto e comunicare con precisione le modifiche ai retoucher.
Ho avviato il lavoro con un confronto con la nostra referente in Calzedonia, Olena Avramenko, osservando il team mentre comparava gli scatti. Da questa attività di osservazione sono emerse tutti i principali elementi che hanno contribuito al successo del progetto
Il lavoro è partito osservando come gli specialisti di Calzedonia revisionavano le immagini. SeeCommerce ragiona per Viste: ogni Vista rappresenta una tipologia di scatto — può essere Shooting o Post‑production, codificata in base alle necessità del business come Still‑life, Worn, fronte o lato. All’interno della stessa Vista convivono le varie versioni dello stesso scatto.
Problema:
Capire le differenze tra una versione e l’altra richiedeva molto tempo e costringeva a continui passaggi manuali da un’immagine all’altra, affidandosi solo all’occhio esperto di chi revisionava.
Soluzione:
Integrare uno slider di confronto che sovrappone due immagini e consente di scorrere facilmente da una versione all’altra.
Fino a quel momento chi approvava era costretto ad aprire lo zoom e alternare manualmente le immagini per cogliere le differenze, anche le più sottili. Un processo lento, macchinoso e legato all’esperienza del singolo.
La soluzione che è sembrata subito più naturale è stata quella di sovrapporre due versioni e permettere di scorrere uno slider centrale per rivelare da un lato l’una e dall’altro l’altra immagine. Ho progettato un’attivazione leggera, direttamente dall’anteprima del media nel pannello destro. Se l’utente ha selezionato un solo media, l’interfaccia lo invita a sceglierne un secondo, per attivare il confronto. Inizialmente avevo pensato di limitare il confronto alle ultime due versioni, ma ho preferito lasciare la possibilità di affiancare una post‑produzione avanzata con lo shooting originale.
Problema:
le correzioni richieste venivano comunicate in modo vago, tramite chat o riunioni, con grande dispendio di tempo e rischio di fraintendimenti.
Soluzione:
introdurre un sistema di annotazioni contestuali direttamente sull’immagine (pin colorati e, in seguito, disegno libero) per indicare con precisione cosa modificare.
Risolto il confronto visivo, è emersa una seconda frizione forse ancora più impattante: come comunicare con precisione cosa andava corretto. Fino a quel momento le osservazioni viaggiavano attraverso chat generiche o lunghe riunioni: indicazioni come “ammorbidire spalla” o “togliere piega” rimanevano vaghe, non contestualizzate all’immagine, e costringevano a diversi giri di confronto per capirsi davvero. Una perdita di tempo notevole, che rallentava la pubblicazione e aumentava la frustrazione del team.
La prima soluzione che abbiamo introdotto è stato un sistema di annotazioni contestuali semplici: piccoli pin colorati applicati direttamente sull’immagine, ognuno con un commento testuale e lo stato Aperto/Risolto. Questa funzione ha già reso più chiaro e rapido lo scambio: ogni feedback si ancorava ad un punto preciso della foto ed era visibile con il tool di annotazione attivo, fino alla correzione definitiva.
Tuttavia, dopo i primi test, è emerso un limite: non sempre un pin era sufficiente. Alcune correzioni riguardavano aree irregolari (una piega lunga, un riflesso diffuso, un alone di colore) difficili da spiegare con un singolo punto. Da qui il passo successivo: le annotazioni a disegno libero. Con un semplice tratto era possibile cerchiare o evidenziare direttamente la zona da correggere.
Durante il confronto con lo slider, le note non rimanevano fisse e intrusive: seguivano l’immagine attiva, scomparendo quando si visualizzava la porzione della versione alternativa e riapparendo al ritorno. In questo modo si potevano leggere i feedback specifici di entrambe le versioni senza confusione visiva.
Per garantire chiarezza abbiamo poi curato alcuni micro‑dettagli: le etichette “Shooting” e “Post‑Production” sempre visibili, l’ordine di selezione indicato da “1” e “2” (fondamentale con immagini simili), la disattivazione automatica della feature in assenza di una seconda versione, la persistenza delle note nella scheda del file con storico consultabile. In parallelo ho seguito l’handoff con successive sessioni di QA, affrontando edge case come risoluzioni diverse, orientamento, zoom e drag del cursore, verificando performance e allineamento pixel‑perfect anche su immagini di grandi dimensioni (2000×3000 px).
Impatti e risultati
Nei primi sprint dopo il rilascio, il team ha completato i cicli di revisione con una riduzione media dei tempi del 34% (dal primo confronto alla chiusura delle note). La disponibilità di feedback contestuali e tracciati ha tagliato di circa il 60% le ore di meeting dedicate agli allineamenti e ha ridotto del 25% i cicli di rework con i retoucher. A livello di volume di lavoro, i media approvati a settimana sono cresciuti di circa 18%, con adozione della funzionalità oltre l’85% entro due settimane e zero incidenti critici post‑rilascio.
Questi risultati sono coerenti con il volume di lavoro di Calzedonia — decine di migliaia di immagini per stagione e ~50 utenze dedicate — e si sono tradotti in meno attrito operativo e go‑live più rapidi sulle collezioni successive.
Conclusioni
Lo slider di confronto e le annotazioni contestuali hanno trasformato un processo basato su intuito e memoria in un flusso visivo, preciso e collaborativo. La forza della soluzione sta nella sua essenzialità: vive dove serve (nel pannello di dettaglio), si attiva in un gesto e rispetta le abitudini del team, lasciando piena libertà di scegliere quali versioni confrontare.
Ha funzionato soprattutto l’approccio: osservazione sul campo, progettazione dell’interazione minima sufficiente, cura della micro‑UI (etichette chiare, ordine di selezione) e un handoff tecnico che ha coperto performance, edge case e allineamento pixel‑perfect.
Calzedonia: gestione media per il fashion (enterprise SaaS).
Come rendere più evidenti gli errori da modificare e risparmiare decine e decine di ore di lavoro.
Sommario:
Risultati ottenuti:
- Riduzione del tempo medio di revisione dei media −34%.
- Taglio delle ore di allineamento sulla gestione media −60%.
- Diminuzione dei cicli di rework −25% e +18% media approvati/settimana.
Tipo di lavoro:
Progettazione e sviluppo di funzionalità prodotto (UX/UI).
Consegna:
Modalità Confronto con slider e annotazioni contestuali (pin e disegno libero) integrate nel Pannello di Dettaglio della Media Library.
Team:
Giacomo Dalia; team sviluppo Warda; CPO; stakeholder cliente Calzedonia (referente: Olena Avramenko).
Il mio ruolo:
UX/UI Designer — discovery con stakeholder, osservazione sul campo, definizione dell’interazione (slider + note), micro‑UI e micro‑copy, prototipazione, handoff e QA.
Curiosità:
L'introduzione dello slider ci ha permesso di scoprire la quantità di editing che viene applicato nel mondo della moda. Il livello di perfezione richiesto alle volte è ridicolmente assurdo per i non tecnici.
Introduzione:
SeeCommerce è una piattaforma rivolta ai brand del fashion, consentendo di centralizzare i dati di prodotto, organizzare cataloghi e gestire i media in un unico ambiente, fino alla pubblicazione su siti istituzionali ed e‑commerce.
In questo scenario i media di prodotto sono un tassello essenziale del go‑live: shooting, post‑produzione, revisioni e approvazioni devono scorrere in modo fluido. Uno dei nostri principali clienti, Calzedonia, utilizza SeeCommerce per l’intero flusso e da qui è emersa l’esigenza di confrontare versioni differenti dello stesso scatto e comunicare con precisione le modifiche ai retoucher.
Ho avviato il lavoro con un confronto con la nostra referente in Calzedonia, Olena Avramenko, osservando il team mentre comparava gli scatti. Da questa attività di osservazione sono emerse tutti i principali elementi che hanno contribuito al successo del progetto
Il lavoro è partito osservando come gli specialisti di Calzedonia revisionavano le immagini. SeeCommerce ragiona per Viste: ogni Vista rappresenta una tipologia di scatto — può essere Shooting o Post‑production, codificata in base alle necessità del business come Still‑life, Worn, fronte o lato. All’interno della stessa Vista convivono le varie versioni dello stesso scatto.
Problema:
Capire le differenze tra una versione e l’altra richiedeva molto tempo e costringeva a continui passaggi manuali da un’immagine all’altra, affidandosi solo all’occhio esperto di chi revisionava.
Soluzione:
Integrare uno slider di confronto che sovrappone due immagini e consente di scorrere facilmente da una versione all’altra.
Fino a quel momento chi approvava era costretto ad aprire lo zoom e alternare manualmente le immagini per cogliere le differenze, anche le più sottili. Un processo lento, macchinoso e legato all’esperienza del singolo.
La soluzione che è sembrata subito più naturale è stata quella di sovrapporre due versioni e permettere di scorrere uno slider centrale per rivelare da un lato l’una e dall’altro l’altra immagine. Ho progettato un’attivazione leggera, direttamente dall’anteprima del media nel pannello destro. Se l’utente ha selezionato un solo media, l’interfaccia lo invita a sceglierne un secondo, per attivare il confronto. Inizialmente avevo pensato di limitare il confronto alle ultime due versioni, ma ho preferito lasciare la possibilità di affiancare una post‑produzione avanzata con lo shooting originale.
Problema:
le correzioni richieste venivano comunicate in modo vago, tramite chat o riunioni, con grande dispendio di tempo e rischio di fraintendimenti.
Soluzione:
introdurre un sistema di annotazioni contestuali direttamente sull’immagine (pin colorati e, in seguito, disegno libero) per indicare con precisione cosa modificare.
Risolto il confronto visivo, è emersa una seconda frizione forse ancora più impattante: come comunicare con precisione cosa andava corretto. Fino a quel momento le osservazioni viaggiavano attraverso chat generiche o lunghe riunioni: indicazioni come “ammorbidire spalla” o “togliere piega” rimanevano vaghe, non contestualizzate all’immagine, e costringevano a diversi giri di confronto per capirsi davvero. Una perdita di tempo notevole, che rallentava la pubblicazione e aumentava la frustrazione del team.
La prima soluzione che abbiamo introdotto è stato un sistema di annotazioni contestuali semplici: piccoli pin colorati applicati direttamente sull’immagine, ognuno con un commento testuale e lo stato Aperto/Risolto. Questa funzione ha già reso più chiaro e rapido lo scambio: ogni feedback si ancorava ad un punto preciso della foto ed era visibile con il tool di annotazione attivo, fino alla correzione definitiva.
Tuttavia, dopo i primi test, è emerso un limite: non sempre un pin era sufficiente. Alcune correzioni riguardavano aree irregolari (una piega lunga, un riflesso diffuso, un alone di colore) difficili da spiegare con un singolo punto. Da qui il passo successivo: le annotazioni a disegno libero. Con un semplice tratto era possibile cerchiare o evidenziare direttamente la zona da correggere.
Durante il confronto con lo slider, le note non rimanevano fisse e intrusive: seguivano l’immagine attiva, scomparendo quando si visualizzava la porzione della versione alternativa e riapparendo al ritorno. In questo modo si potevano leggere i feedback specifici di entrambe le versioni senza confusione visiva.
Per garantire chiarezza abbiamo poi curato alcuni micro‑dettagli: le etichette “Shooting” e “Post‑Production” sempre visibili, l’ordine di selezione indicato da “1” e “2” (fondamentale con immagini simili), la disattivazione automatica della feature in assenza di una seconda versione, la persistenza delle note nella scheda del file con storico consultabile. In parallelo ho seguito l’handoff con successive sessioni di QA, affrontando edge case come risoluzioni diverse, orientamento, zoom e drag del cursore, verificando performance e allineamento pixel‑perfect anche su immagini di grandi dimensioni (2000×3000 px).
Impatti e risultati
Nei primi sprint dopo il rilascio, il team ha completato i cicli di revisione con una riduzione media dei tempi del 34% (dal primo confronto alla chiusura delle note). La disponibilità di feedback contestuali e tracciati ha tagliato di circa il 60% le ore di meeting dedicate agli allineamenti e ha ridotto del 25% i cicli di rework con i retoucher. A livello di volume di lavoro, i media approvati a settimana sono cresciuti di circa 18%, con adozione della funzionalità oltre l’85% entro due settimane e zero incidenti critici post‑rilascio.
Questi risultati sono coerenti con il volume di lavoro di Calzedonia — decine di migliaia di immagini per stagione e ~50 utenze dedicate — e si sono tradotti in meno attrito operativo e go‑live più rapidi sulle collezioni successive.
Conclusioni
Lo slider di confronto e le annotazioni contestuali hanno trasformato un processo basato su intuito e memoria in un flusso visivo, preciso e collaborativo. La forza della soluzione sta nella sua essenzialità: vive dove serve (nel pannello di dettaglio), si attiva in un gesto e rispetta le abitudini del team, lasciando piena libertà di scegliere quali versioni confrontare.
Ha funzionato soprattutto l’approccio: osservazione sul campo, progettazione dell’interazione minima sufficiente, cura della micro‑UI (etichette chiare, ordine di selezione) e un handoff tecnico che ha coperto performance, edge case e allineamento pixel‑perfect.