Rapid prototyping
Rapid prototyping Why, Who, What, Where, How, When
Client
Prototype
User Team
I loved this..
I hated this… • Can’t move it • Can’t hold it • Cable too short • Hard to click • Hard to clean
Simples! Real users need to use it so they can tell us that they can’t use it!
I was having a shower this morning…
Remind you of anything?
I am really scared of this guy…
…assumption
When you assume you
Ass Out of U And me
Make an
Still need convincing?
Why do it?
Is it even possible?
Will they like it?
Does this look right?
How badly do you want it?
Did NOT prototype
Who is it for?
The un-usual suspects Client
UI developer
Business Analyst
Experience designer
PM
Developer
Graphic Designer
End user
Where does it fit?
Wow, I see, it works
wow the client Research
(twitter, trends, personas, stories)
Ideate
• • •
Sketch
Prototype
Usability test
Skills capability and technology feasibility Business understanding early Win the gig Wow, that is amazing. Let’s get you to build it! Client
Share a common vision Front end vs Live code
Design, usability test, develop
Project timeline XD UI Dev Designer
Here is how it should look
I see. Thanks! DEV
Build the right thing!
Usability test It would be great if it…
Dev
Don’t need that
Wow, it works!
Iterate UI Dev Designer Guerilla Low fidelity
User Lab Hi fidelity
Few screens
Many screens
Early in project
Late in project
Feedback XD
React to usability feedback That’s going to be expensive
BA
Prioritise these based on this key Business drivers
This is A cheaper alternative
Client
Dev
I suggest we do this
XD
I’m worried about this issue
Users are struggling with this
UI Dev Designer
I like that option
Here’s how it might look
resources sketch Markers Paper/card Stickies
wireframe Omnigraffle Balsamiq Mockflow.com Gomockingbird.com
Graphic design 365psd.com Smashingmagazine.com Iconfinder.net
UI Dev usability Silverback (mac) Adobe connect Skype Smart phone
sharing Dropbox Jing Skype Sit together
pics
960 gs css3please.com css-tricks.com/snippets
Flickr.com Google images Istockphoto.com Your own!
Remember… 1. 2. 3. 4. 5. 6. 7. 8.
Be quick, gut feel is best Experiment Do whatever it takes to get feedback Make constant improvements Get good stuff into the next release Ask: Does it meet business & user needs? Wow the client so they choose you Designers and Devs may have different solutions in mind. Share a common vision
Everyone does it automotive, architecture & product design
But it can take a long time…
Thanks Eewei Chen, Nick Bailey ThoughtWorks XD team [email protected]
www.eewei.com twitter: Ultraman
Client
Prototype
User Team
I loved this..
I hated this… • Can’t move it • Can’t hold it • Cable too short • Hard to click • Hard to clean
Simples! Real users need to use it so they can tell us that they can’t use it!
I was having a shower this morning…
Remind you of anything?
I am really scared of this guy…
…assumption
When you assume you
Ass Out of U And me
Make an
Still need convincing?
Why do it?
Is it even possible?
Will they like it?
Does this look right?
How badly do you want it?
Did NOT prototype
Who is it for?
The un-usual suspects Client
UI developer
Business Analyst
Experience designer
PM
Developer
Graphic Designer
End user
Where does it fit?
Wow, I see, it works
wow the client Research
(twitter, trends, personas, stories)
Ideate
• • •
Sketch
Prototype
Usability test
Skills capability and technology feasibility Business understanding early Win the gig Wow, that is amazing. Let’s get you to build it! Client
Share a common vision Front end vs Live code
Design, usability test, develop
Project timeline XD UI Dev Designer
Here is how it should look
I see. Thanks! DEV
Build the right thing!
Usability test It would be great if it…
Dev
Don’t need that
Wow, it works!
Iterate UI Dev Designer Guerilla Low fidelity
User Lab Hi fidelity
Few screens
Many screens
Early in project
Late in project
Feedback XD
React to usability feedback That’s going to be expensive
BA
Prioritise these based on this key Business drivers
This is A cheaper alternative
Client
Dev
I suggest we do this
XD
I’m worried about this issue
Users are struggling with this
UI Dev Designer
I like that option
Here’s how it might look
resources sketch Markers Paper/card Stickies
wireframe Omnigraffle Balsamiq Mockflow.com Gomockingbird.com
Graphic design 365psd.com Smashingmagazine.com Iconfinder.net
UI Dev usability Silverback (mac) Adobe connect Skype Smart phone
sharing Dropbox Jing Skype Sit together
pics
960 gs css3please.com css-tricks.com/snippets
Flickr.com Google images Istockphoto.com Your own!
Remember… 1. 2. 3. 4. 5. 6. 7. 8.
Be quick, gut feel is best Experiment Do whatever it takes to get feedback Make constant improvements Get good stuff into the next release Ask: Does it meet business & user needs? Wow the client so they choose you Designers and Devs may have different solutions in mind. Share a common vision
Everyone does it automotive, architecture & product design
But it can take a long time…
Thanks Eewei Chen, Nick Bailey ThoughtWorks XD team [email protected]
www.eewei.com twitter: Ultraman
