Agile ux practical design without wireframes

35
@uxplant and @solle | #euroia | #agileux euroIA VII welcome to agile ux… practical design without wireframes

description

Presentation from this morning's EuroIA workshop thinking about how to apply UX practices in an agile environment

Transcript of Agile ux practical design without wireframes

Page 1: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

welcome to agile ux…

practical design without wireframes

Page 2: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

also known as…

the art of making mistakes cheaply

Page 3: Agile ux   practical design without wireframes

who we are… on the post-it‣your name‣your current role‣your ambition for this sessionstand up and tell us who you are, what you want to achieve and stick the post-it on the chart based on:‣your experience with agile‣your feeling towards ux in agile

environments

Page 4: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

practical agile ux foundation

Page 5: Agile ux   practical design without wireframes

individuals and interactions over processes and toolsworking software over comprehensive documentationcustomer collaboration over contract negotiationresponding to change over following a plan

what are the values of agile?

Page 6: Agile ux   practical design without wireframes

scrumstoriessprintsgame planningretrospectives

are you familiar with

Page 7: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

practical agile ux foundation

Page 8: Agile ux   practical design without wireframes

collaboration over documentationiteration over up-front perfectionmore is not better, better is betterit’s not done until it’s usable and brings value to the business

some agile ux values

Page 9: Agile ux   practical design without wireframes

deliverables are dead…

collaboration over documentation

Page 10: Agile ux   practical design without wireframes

this facilitates iteration and is good enough for the largest bank in the world

iteration over up-front perfection

Page 11: Agile ux   practical design without wireframes

photoshop is a waste of time and effort…

it’s not done until it’s usable and brings value to the business

Page 12: Agile ux   practical design without wireframes

select an instrument

think about what is the best solution and how you get there (or not)

B

A

B

acdegijl

moprusvz

C

D

E

<< < | > >>

AZ018 Instrument NameAZ019 Instrument Name

BC001 Instrument NameBC002 Instrument NameBC003 Instrument NameBD001 Instrument NameBD002 Instrument NameBD003 Instrument NameBD004 Instrument NameBF001 Instrument NameBF002 Instrument NameBF003 Instrument NameBG001 Instrument NameBG002 Instrument Name

0/5000more is not better,better is better

Page 13: Agile ux   practical design without wireframes

a hero can’t win the race without the team

Page 14: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

practical agile ux foundation

Page 15: Agile ux   practical design without wireframes

lightweightquickusefulflexible

personas

Page 16: Agile ux   practical design without wireframes

as [persona],I want to [goal],so that [reason]

story structure

Never forget that a story is only ever supposed to be the opening / an invitation to a conversation - the meat is in the acceptance tests and inter-personal dialogueIt is not the answer

Page 17: Agile ux   practical design without wireframes

epics…themes…stories…

stories

Epic‣Simply a groupingTheme‣UX granularity, typically a simple, defined user

goal following the standard “story” patternStory‣Developer granularity always following with

standard “story” pattern‣Definition, acceptance tests and score (story

points) done as a collaboration between UX and Engineering

Page 18: Agile ux   practical design without wireframes

sketch, prototype, share and iterate when you need to

interaction design

Page 19: Agile ux   practical design without wireframes

guerrillalightweightiterative / oftenspecific

testing

http://www.flickr.com/photos/doos/4818399040/

Page 20: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

basic banking (fx)

Page 21: Agile ux   practical design without wireframes

the personas

the bank

the speculator the multi-national

Page 22: Agile ux   practical design without wireframes

the bank

http://www.flickr.com/photos/hessiebell/100323033/

Page 23: Agile ux   practical design without wireframes

the speculator

Page 24: Agile ux   practical design without wireframes

the multinational

http://www.flickr.com/photos/tinabinaboobops09/4703495022/

Page 25: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

sprint one:

fx spot trading

Page 26: Agile ux   practical design without wireframes

detailed stories

sprint one

as a speculator I want to:‣ select which currencies exchange rates I can see so

that I only have to cope with the information (currencies) I deal with

‣ see the price for buying and selling for each of those currencies so that I can watch the “spread”

‣ specify the amount I want to buy / sell separately for each currency so that I can see how much it would actually cost (based on “volume discounts”)

‣ see which way the prices are moving in real time so that I can see which way the price just moved

‣ see which way the prices are trending over time so that I can understand which way the market is moving

‣ see prices from multiple dealers for each currency/amount so that I can pick the best deal

Page 27: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

sprint two:

fx forwards

Page 28: Agile ux   practical design without wireframes

themes

sprint three

as a speculator I want to:‣be able to get a price quote and execute

trades for any time up to a year in advance

Page 29: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

gallery

Page 30: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

what we’ve learnt

Page 31: Agile ux   practical design without wireframes

agile ux understanding of agile valuessome thoughts on what the ux goals are in an agile projectintroduction to core agile methods (scrum)how to use and write good storieshow to use sketching to be communicative and iterativehow to be solution oriented instead of deliverable oriented

Page 32: Agile ux   practical design without wireframes

@uxplant and @solle | #euroia | #agileuxeuroIAVII

what nobody knows…

Page 33: Agile ux   practical design without wireframes

how do you define:good enough, sufficient, done, done done…

very satisfied

very dissatisfied

winfail

excitement performance

hygiene

Page 34: Agile ux   practical design without wireframes

is a collectivist set of principles in a capitalist world realistic?

Page 35: Agile ux   practical design without wireframes

euroIAVII

EuroIA, September 2011

thank you@uxplant and @sollewith special respect to: Lab49, Ann Carrier (@pixeldiva), and more…