51
@Fabbrucci Welcome by @Fabbrucci

Lean UX Development - Approach and toolkit

Embed Size (px)

DESCRIPTION

by Fabio Fabbrucci - Nel libro "Lean UX" Jeff Gothelf e Josh Seiden mostrano un nuovo modo di fare UX, meno waterfall e più iterativo. Diventa sempre meno netta la linea che separa l'analisi dal prodotto, dal prototipo al prodotto, dal requisito all'assunto. In questo talk vorrei fornire una panoramica riassuntiva sui contenuti del libro focalizzandosi sul ruolo del frontendista a supporto del team. Come fare CSS riutilizzabile? Come creare automatismi che semplifichino lo sviluppo? Come creare una styleguide manutenibile? E' possibile testare il css? Tutto frutto di studio e di un anno in GNV Parnters.

Citation preview

Page 1: Lean UX Development - Approach and toolkit

@Fabbrucci

Welcomeby @Fabbrucci

Page 2: Lean UX Development - Approach and toolkit

@Fabbrucci

Ciao, sono FabioDipendente, imprenditore, startupper; ora freelancer

Frontend Developer presso GNV & Partners

Agile practitioner presso Avanscoperta

Mi piace mangiare, conoscere le persone, Scrubs

@Fabbrucci

Page 3: Lean UX Development - Approach and toolkit

@Fabbrucci

Fonti

Page 4: Lean UX Development - Approach and toolkit

@Fabbrucci

Esperienza

Page 5: Lean UX Development - Approach and toolkit

@Fabbrucci

Page 6: Lean UX Development - Approach and toolkit

@Fabbrucci

Page 7: Lean UX Development - Approach and toolkit

@Fabbrucci

The dark side

Page 8: Lean UX Development - Approach and toolkit

@Fabbrucci

Page 9: Lean UX Development - Approach and toolkit

@Fabbrucci

No!

@Fabbrucci

Page 10: Lean UX Development - Approach and toolkit

@Fabbrucci

Roadmap

Contesto

Cosa posso fare io come Developer

@Fabbrucci

Approcci

Page 11: Lean UX Development - Approach and toolkit

@Fabbrucci

L’agenzia Il cliente

Qualcosa

Quanto

Come faremo? Ci riusciremo? Ci pagherà? Chi è l’altro?

Dove sta l’inc#?

Contesto

Page 12: Lean UX Development - Approach and toolkit

@FabbrucciContesto

Il cliente

Il tuo team

Dev Mkt Qualcuno

PO Older ExpertNewCEO

BusinessStoria

Vision

Roadmap

L’acquisita

Goal

BoardProgetto

nuovo

L’utenteSlave or master?

Page 13: Lean UX Development - Approach and toolkit

@Fabbrucci

0

25

50

75

100

Contact Kickoff Iteration 1 Iteration 2 Iteration 3

Learning Risks Trust Delegation

Contesto

Page 14: Lean UX Development - Approach and toolkit

@Fabbrucci

Paura di perdere il controllo

Approcci alla #leanux

Page 15: Lean UX Development - Approach and toolkit

@Fabbrucci

Roadmap

Contesto

Cosa posso fare io come Developer

@Fabbrucci

Approcci

Page 16: Lean UX Development - Approach and toolkit

@Fabbrucci

Miglioramento continuo

Approcci alla #leanux

Page 17: Lean UX Development - Approach and toolkit

@FabbrucciApprocci alla #leanux

Trasparenza

Page 18: Lean UX Development - Approach and toolkit

@Fabbrucci

CodesignApprocci alla #leanux

Page 19: Lean UX Development - Approach and toolkit

@Fabbrucci

Convergere e divergereApprocci alla #leanux

Page 20: Lean UX Development - Approach and toolkit

@Fabbrucci

Interruzioni e urgenza

http://www.hanselman.com/blog/ScottHanselmansCompleteListOfProductivityTips.aspx

Approcci alla #leanux

Page 21: Lean UX Development - Approach and toolkit

@Fabbrucci

Parliamo un po’ di iterazioni …

Approcci alla #leanux

Page 22: Lean UX Development - Approach and toolkit

@Fabbrucci

Utenti Team

Approcci alla #leanux

Page 23: Lean UX Development - Approach and toolkit

@Fabbrucci

Utenti Cliente

Team

Approcci alla #leanux

Page 24: Lean UX Development - Approach and toolkit

@Fabbrucci

Iterazioni: primo approccio

http://bit.ly/1mOepcT

Approcci alla #leanux

Processo di consegna e non comprensioneMilestones

Page 25: Lean UX Development - Approach and toolkit

@Fabbrucci@Fabbrucci

Page 26: Lean UX Development - Approach and toolkit

@FabbrucciApprocci alla #leanux

Iterazioni: secondo approccio

Framework di ipotesiRoadmap condivisa

Iterazione “retroattive”

Page 27: Lean UX Development - Approach and toolkit

@Fabbrucci

Soft LinkingApprocci alla #leanux

Business vision

Execution

Strategy

Page 28: Lean UX Development - Approach and toolkit

@Fabbruccihttps://twitter.com/Icelord/status/423739304691912705/photo/1

Approcci alla #leanux

Coaching/Consulenza/Training

Page 29: Lean UX Development - Approach and toolkit

@Fabbrucci

Roadmap

Contesto

Cosa posso fare io come Developer

@Fabbrucci

Approcci

Page 30: Lean UX Development - Approach and toolkit

@Fabbrucci

Cosa posso &

cosa dovrei

Cosa posso fare io come Developer

Page 31: Lean UX Development - Approach and toolkit

@Fabbrucci

Uscire allo scoperto

Cosa posso fare io come Developer

Deploy automatico #continuous-delivery

Setting dell’enviroment #devops

Comunicazione al resto del team

Page 32: Lean UX Development - Approach and toolkit

@Fabbrucci

Ridurre gli sprechiStyleguide Development

Cosa posso fare io come Developer

Page 33: Lean UX Development - Approach and toolkit

@Fabbrucci

È un ponte di “conoscenza” !tra le varie parti

Designer

Sviluppatore

Cliente

Cosa posso fare io come Developer

Styleguide

Page 34: Lean UX Development - Approach and toolkit

@Fabbrucci

Progettare per componenti, non

per pagine

Cosa posso fare io come Developer

Page 35: Lean UX Development - Approach and toolkit

@Fabbrucci

https://github.com/styleguide

Cosa posso fare io come Developer

Page 36: Lean UX Development - Approach and toolkit

@Fabbrucci

https://ux.mailchimp.com/patterns

Cosa posso fare io come Developer

Page 37: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Un esempio

Frontender campiona testoDesigner crea PSD

Frontender crea CSS

Page 38: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Problema

Il design rischia di esplodere negli stili

Il design rischia di bloccare la prototipazione

Il designer si dimentica i line-height

Page 39: Lean UX Development - Approach and toolkit

@Fabbrucci

Proviamo un altro approccio…

Cosa posso fare io come Developer @Fabbrucci

Page 40: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer @Fabbrucci

Page 41: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Caratteristiche

Migliorata continuamenteAccessibile

Azionabile

@Fabbrucci

Page 42: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Accessibile

Capistrano + EC2Multistage

CustomizedSilex + Twig

@Fabbrucci

Page 43: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Manutenzione

TestingCSS ad oggetti o modulare

@Fabbrucci

Page 44: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

CSS Modulare

OOCSSPrecompilatori (LESS, SASS)

Atomic DesignBEM, SMACSS, ITCSS

@Fabbrucci

Page 45: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Testing

Testing CSS: Phantom CSSTesting JS: Phantom JS

http://csste.st

@Fabbrucci

Page 46: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Page 47: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Come developer posso…

aiutare a rimuovere gli sprechiuscire allo scoperto

@Fabbrucci

Page 48: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Come developer dovrei…

lavorare sulle mie soft-skill

sviluppare un dizionario cross-funzionale

e infine…

@Fabbrucci

essere al servizio del mio team

Page 49: Lean UX Development - Approach and toolkit

@FabbrucciCosa posso fare io come Developer

Uscire dalla mia comfort-zone

Agile non è un framework?Che cos’è? Se lo cerco, per quale motivo?

Ascoltare per comprendere, senza di giudicare

La nostra felicità non è un side-project

Alleniamoci ad ottenere il meglio da ciò che abbiamo, e a sfruttare le differenze

@Fabbrucci

Page 50: Lean UX Development - Approach and toolkit

@Fabbrucci

Grazie a tuttiDomande? Insulti? Dubbi?

http://[email protected]

@Fabbrucci

Page 51: Lean UX Development - Approach and toolkit

@FabbrucciMarketing Time

Trainings

http://www.leanuxday.it/30 gennaio, Bologna

http://www.avanscoperta.it/25-26 maggio, Bologna