Client: Claudio Mariani
Industry: Fashion
My Services: #UX, #UI, #Shopify
Design Tool: Figma
Ecommerce platform: Shopify
Claudiomariani.eu - il mio primo ecommerce con Shopify
Grazie alla mia attività di redesign del sito di Ridewill.it, sono stato contattato per il redesign di claudiomariani.it, un e-commerce di pantaloni da uomo di un'azienda sartoriale della Costiera Amalfitana: il sito, sviluppato con tecnologia Wordpress, oltre a presentare problemi di lentezza nel caricamento dei contenuti, non comunicava visivamente i valori dell'alta sartorialità, non rispecchiava la qualità e l'attenzione al dettaglio dei prodotti venduti e non parlava il linguaggio del fashion a cui il brand si vuole rivolgere.
Ricerca e Analisi
Il mio approccio alla progettazione inizia sempre con un benchmark di competitor e comparable, che mi consente l'approfondimento della conoscenza del mercato di riferimento: mi sono fatto "una cultura" sui principali brand di capi sartoriali per uomo, ho analizzato svariati siti e blog di moda maschile, comparando le tecnologie adottate, i tone of voice e gli stili fotografici, ho confrontato le diverse tipologie di sezioni, pagine e le relative funzioni: homepage e homepage di sezione, schede prodotto, pagine di categoria, login, registrazione, carrello e check-out.
Competitor e comparable
Per ogni sito analizzato ho estrapolato dei take-out e identificato delle best practice, sia desktop che mobile.
Ho quindi analizzato nel dettaglio anche il sito originale claudiomariani.it, ricostruendone l'alberatura e studiando le linee di prodotto e le collezioni, imparando le nomenclature delle tipologie di pantaloni e i nomi dei capi.
Al termine dell'analisi ho identificato degli spunti evolutivi da usare come base per la strategia di progettazione quali:
Spunti evolutivi per menu, sezioni e contenuti
1 ) Nel menu di primo livello usare la label “pantaloni” e creare un fat menu per la navigazione tra categorie, modelli, collezioni, etc -> Brand Specialization
2) Ampliare la sezione “azienda” per parlare del brand, del made in Italy, della filiera, della sostenibilità e dello staff -> Brand Perception
3) Creare un’area editoriale (Blog/Journal) con articoli di stile, interviste, press area -> Brand Authority (& SEO)Spunti evolutivi per immagini e illustrazioni
1) Aumentare l’uso di foto di indossati ambientati, in contesti evocativi e con richiami all’Italia: edifici storici, ambienti soleggiati e marini, giardini, ville, etc -> Brand Nationality
2) Scegliere modelli in cui gli utenti si possano riconoscere o che siano di ispirazione -> Brand Influence
3) Nelle foto includere dettagli di stile quali automobili (di lusso o d’epoca), orologi, occhiali etc -> Brand Inspiration
4) Mantenere le illustrazioni (acquerelli) in quanto elementi distintivi del brand rispetto a tutti gli altri player, ma limitandone l’uso -> Brand Distinction
Spunti evolutivi per UI e assets
1) Realizzare un’interfaccia molto pulita, essenziale e minimal, partendo dalla scelta delle font, delle dimensioni e dei colori -> Effetto Luxury
2) Realizzare contenuti video da usare come “microclip” in alternanza alle foto prodotto (quasi delle foto animate) e nei background (hero e banner) -> Effetto Wow3) Inserire box fotografici di navigazione per target, passione o stile per far identificare l’utente con il proprio cluster e collegarli a pagine con consigli di stile e prodotti -> Effetto identificazione
Questa analisi mi ha permesso di studiare una nuova alberatura più ricca e completa, con accessi alle pagine di categoria per collezioni, per tipologia, per stile e per tessuto.
Questa analisi mi ha permesso di studiare una nuova alberatura più ricca e completa, con accessi alle pagine di categoria per collezioni, per tipologia, per stile e per tessuto.
Nuova alberatura del sito claudiomariani.eu
Progettazione
Partiamo dal rebranding
Il brand Claudio Mariani non aveva un brand manual e si presentava in modo non omogeneo, a partire dal logo, per cui ne esistevano due versioni diverse, una usata sul sito e sui social, l'altra sulle newsletter e sulle email.
Si è deciso di non modificare il pittogramma, ma di intervenire sul logotipo cercando un carattere in grado di esprimere i concetti di eleganza e pulizia: la mia scelta è ricaduta sul Josefin, un Google font simile a quello del logo originale, ma più incisivo e curato, disponibile in svariati stili e pesi, sia nel formato bastone classico (Josefin Sans) che nella versione con grazie squadrate (Josefin Slab).
Il logo è stato pertanto ricomposto usando per il nome del brand il Josefine Sans Semibold maiuscolo per avere uno spessore uguale alle linee del pittogramma circolare. Inoltre è stata aggiunta la dicitura Made in Italy usando il Josefin Slab Bold.
Redesign del logo Claudio Mariani
Una volta effettuata la scelta della font family Josefin, ho studiato le typescale desktop e mobile da una parte e la palette colore dall'altra che vanno a comporre la style guide del brand.
La sfida: online in 30 giorni
Nell'ottica di progettare un nuovo ecommerce, prima di avviare le attività di UX e UI design, di concerto con il cliente e con Marcello D'Ambrosio, developer interno dell'azienda, sono state valutate le diverse piattaforme tecnologiche a disposizione: dato per certo l'abbandono della soluzione Wordpress+Woo commerce del sito attuale, la scelta è ricaduta su Shopify, adottato dall'80% dei siti benchmark analizzati, ma lasciando DAWN, il tema di default, e usando il minor numero di plugin/app possibile, per mantenere un'installazione snella e di conseguenza un sito dal caricamento veloce.
L'esigenza sfidante del cliente era di poter andare online con il nuovo sito entro 30 giorni. Mi sono pertanto concentrato sullo studio delle possibilità di customizzazione del tema, dei moduli disponibili e della struttura delle pagine di default.
Progettazione dell'interfaccia
Con Figma ho realizzato il wireframe solo della home per definire la sequenza delle fasce di contenuto per alternare lo storytelling, in grado di valorizzare l'azienda, con i lanci commerciali a prodotti, collezioni e servizi sartoriali personalizzati. Ma sono passato subito alla definizione dello stile della user interface per mostrare al cliente il design del suo nuovo ecommerce, proprio partendo dalla homepage.
Ho usato in parte le foto di prodotto fornitemi, ma poiché volevo anche suggerire un nuovo stile visivo, ho cercato immagini con modelli e ambientazioni cui ispirarsi per i futuri shooting: modelli con inquadratura a figura completa e non solo sulle gambe, ambientazioni interne in ville e palazzi e in esterna con viste sul mare, sui porti, vicino ad auto d'epoca o barche di lusso: l'obiettivo è riuscire a trasmettere ad un pubblico straniero il senso di italianità con evidenti richiami alla vita vacanziera in Costiera Amalfitana.
Per ogni template di pagina disegnato su Figma e approvato tramite visione del prototipo, ho avviato la sua ricostruzione su Shopify, utilizzando il builder integrato del tema e apportando modifiche ai css e al codice .liquid se necessario, per rendere il risultato aderente al progetto.
Dopo la home ci siamo dedicati alla scheda prodotto per finalizzarla e consentire il data entry in tre lingue degli oltre 100 capi della nuova collezione.
Anche il template delle pagine collezioni è stato oggetto di studio: i pantaloni di Claudio Mariani hanno nomi che si rifanno a città e paesi della Costiera Amalfitana, quali Amalfi, Positano, Sorrento, Furore, Tramonti, etc.
Per valorizzare questo aspetto e per usarlo come leva di comunicazione ho predisposto, a chiusura delle pagine, una mappa geografica con l'indicazione della città e una citazione inerente ad essa
Per valorizzare questo aspetto e per usarlo come leva di comunicazione ho predisposto, a chiusura delle pagine, una mappa geografica con l'indicazione della città e una citazione inerente ad essa
Online!
Siamo riusciti a traguardare l'obiettivo della messa online del nuovo sito dopo un mese dall'inizio della progettazione, grazie ad un lavoro di squadra con Marcello e alla fiducia che il cliente ha riposto in me, nelle mie scelte e nelle mie proposte.
Come tutti i siti ecommerce, anche questo non sarà mai finito: dopo la messa online abbiamo aggiunto pagine e sezioni, dovremo implementare nuove funzioni ed integrazioni e ci sarà sempre una nuova collezione o una stagione di saldi da comunicare e valorizzare.