Visual Design Thinking #VDT Carlo Frinolli Emanuele Macri we are nois3 roma world usability day rome 2015 #WUDROME2015

Workshop: #VDT – Visual Design Thinking

21 October 2015

Quick Info

Data: mercoledì, 11 novembre 2015

Titolo: #VDT – Visual Design Thinking

Trainer:
Carlo Frinolli – User Experience Designer, CEO & Founder di nois3
Emanuele Macri – User Interface Designer, Frontend Developer e Co-Founder di nois3

Durata: 4 ore

Orario: dalle 09:45 alle 14:00

Costo: € 110 + IVA

Sede: Parco Leonardo, Piazza Leon Battista Alberti 12 – ROMA FIUMICINO

Prenota il workshop #VDT – Visual Design Thinking

 

Descrizione

VISION DI PROGETTO

Tutti abbiamo vissuto quell’incubo. Quello in cui il Cliente ti chiede il logo più grande, di provarlo in rosso/verde/blu/giallo/ocra/terradisienabruciata oppure se possiamo prendere la tipografia di una proposta e l’icona dell’altra ruotando tutto di 3° e farlo più pop. #VDT parte da questo incubo per dire: mai più!

Carlo Frinolli ed Emanuele Macri spiegheranno come, utilizzando il mantra “costumer collaboration over contract negotiation”, è possibile costruire un percorso collaborativo con il cliente che guida tutto il team di lavoro verso la conclusione di progetti più efficaci e soddisfacenti.

Saranno illustrate le 5 fasi del metodo #VDT e suggerite buone pratiche che miglioreranno i processi lavorativi personali e del team, positivamente impattanti sulla gestione e la soddisfazione del cliente, evitando così  la realizzazione delle famigerate tre proposte grafiche differenti.

Le fasi del metodo #VDT

#1 Discovery

A chi non è successo, il cliente chiama per iniziare una collaborazione e propone una soluzione invece di esporre il problema?!

Pronto. Mi serve un’app iPhone per…

In pochi si soffermano a chiedere il “perché” ci troviamo a realizzare le sue “soluzioni” anziché partire dalla sua esigenza. Da questa poi, possiamo scegliere assieme la soluzione tecnica o creativa più adatta.

Il metodo #VDT suggerisce di iniziare ogni nuovo progetto tramite una fase di scoperta, fatta insieme al cliente grazie ad un workshop di co-design. L’obiettivo di questo “Discovery Co-Design Workshop” è quello di scoprire i motivi per i quali un cliente sta commissionando un qualcosa, per cercare di tarare meglio non solo lo sforzo, ma anche il taglio di comunicazione e, a volte, anche per decidere se quel che il cliente chiede è davvero quello di cui a bisogno.
Grazie all’uso di tecniche di facilitazione, di co-design (personas, user journey) e dello sviluppo agile (user stories) spiegheremo come riunire attorno a un tavolo gli stakeholder per tirare fuori tutti gli insights utili e necessari per il progetto.

02_Questionari

#2 Ricerca e ispirazione

Uno degli altri grandi temi è evitare la classica fattispecie: fammi tre proposte.

Non solo perché siamo pigri. Ma perché è profondamente sbagliato il concetto. Come designer quel che facciamo è prestare la nostra capacità e competenza alle esigenze del Cliente. Che abbiamo conosciuto al massimo attraverso un brief. Non è sufficiente. Serve un’osservazione più lunga per impadronirsi davvero del linguaggio che assomigli a quello che si aspetta non solo il Cliente, ma anche i suoi affezionati. Un progetto, lo diciamo sempre, è un ménage à trois.

In questa fase vi facciamo vedere come un’idea semplice e quasi ovvia come l’uso di Pinterest e delle board segrete sia un ottimo modo per avvicinarci al gusto del Cliente, così da poter sviluppare solo uno o due concept isolati assieme, e non figli di una suggestione tipica da Designer.

03_Inspiration

#3 IA e Wireframe

A questo punto abbiamo insights sul progetto dalla fase di Discovery e un po’ di indicazioni di ispirazione, comprese quelle di struttura che possono emergere.

Una volta raccolti i contenuti da riproporre – se presenti – facendo quindi content inventory quel che serve è strutturarli.
In questa fase vi facciamo vedere come quest’operazione cerchiamo di farla, sempre con il Cliente, per strutturare i tipi di contenuto, le tassonomie e i tipi di pagine coinvolti.

Una volta creata questa parte fondamentale – siti e web app si basano sulla consultazione di contenuti o sullo svolgimento di task che con i contenuti hanno molto a che fare – è il momento di decidere la gerarchia dei contenuti, degli spazi e delle disposizioni per fare quella fase che è confusa spesso con la “User Experience” e che invece è più propriamente quella in cui si decide lo user journey del progetto.

Quindi è il momento di fare degli schemi funzionali che in gergo vengono chiamati Wireframe, e che per noi sono tendenzialmente sketch in bassa fedeltà fatti con carta e matita.

04_Wireframing

#3.5 Prototyping e implementazione

Ci sono varie scuole di pensiero per i Wireframe in alta fedeltà. Noi abbiamo scelto di non farli, e di puntare tutto, piuttosto su prototipi HTML/CSS/JS costruiti direttamente con il framework che adottiamo sempre per i nostri front-end: Foundation 5.

Visto che le strutture che facciamo rispettano sempre queste caratteristiche, sfruttiamo da subito il sistema di griglie e di scaffolding di Foundation per poter permettere al Cliente e non solo, di testare le interazioni e le funzionalità anche se in termini prototipali.

Niente paura, è molto, molto più semplice di quel che sembra. 🙂

#4 Interface Design: style guide e style tiles

Alzi la mano chi ha avuto la richiesta di fornire tutti i PSD delle pagine agli sviluppatori.

Noi preferiamo lavorare diversamente, disegnando un paio di pagine fondamentali (pagine interne e dopo la homepage) e poi progettando e disegnando una guida di stile per tutti gli elementi inclusi nell’interfaccia. Quest’approccio è molto più scalabile secondo noi, perché ci permette, assieme alla progettazione di style tiles – ovvero di pagine verosimile in cui accostiamo gli elementi per vedere come lavorino visualmente assieme – di fornire al Cliente e più spesso poi a noi stessi nel futuro, un vocabolario e una grammatica visuale con la quale continuare ad evolvere il progetto senza snaturarne il tono di voce e il look & feel.

L’approccio del design di ogni singola pagina è invece un limite – che funziona solo quando non si hanno manuali d’uso di questo tipo – perché invece perde di scalabilità ed è strettamente legato al grafico che l’ha pensato la prima volta.

06_Interface

Obiettivi del Workshop

L’obiettivo dell’intervento è rendere il processo di lavoro tra il team e il Cliente il meno doloroso e il più collaborativo possibile, creando un percorso condiviso tra tutti gli attori per far crescere insieme la soluzione sfruttando le conoscenze del committente e le expertise dei professionisti in gioco.
Le aree di intervento saranno le seguenti.

Discovery

  • Giochi di apertura: la bias line
  • Cover story
  • Personas
  • User Stories

Ricerca e ispirazione

  • Creazione di una board segreta di Pinterest (1′)
  • Invitare il Cliente (1′)
  • Piccoli consigli e suggerimenti (5′)

IA e Wireframing

  • Raccogliere i materiali e organizzarli
  • Compilare una tabella con Tipi di pagine, Content Type e Custom fields (useremo WordPress per comodità)
  • Disegnare i primi sketch

Prototyping

  • Uno sguardo su Foundation 5 e il grid
  • Come utilizzarlo velocemente
  • Responsive in-browser e un accenno interchange js

Interface Design: Style guide e Style Tile

  • Il parallelo tra il manuale del brand e le style guide web
  • La creazione di una style guide (utilizzando Sketch)
  • L’assemblaggio delle pagine principali (seguendo i Wireframe e i prototipi)
  • Le style tile

Prenota il workshop #VDT – Visual Design Thinking