How to prototype to understand your clients
-
Upload
antti-tarvainen -
Category
Technology
-
view
638 -
download
0
description
Transcript of How to prototype to understand your clients
![Page 1: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/1.jpg)
How to prototype to understand your clients
[email protected]@tarvaina
[email protected]@harri_lammi
![Page 2: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/2.jpg)
1.
3.
2.
Understand the contextof your system.
Build prototypes to validate your understanding of the context and the design.
Talk in one slide
Different situations call for different kinds of prototypes.
![Page 3: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/3.jpg)
“A prototype in seven days”PROTOSONNI
![Page 4: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/4.jpg)
Demohttp://youtu.be/jVlYofasZnI
http://lausuntopalvelu.fi
https://github.com/leonidas/lausuntopalvelu-prototyyppibut look at it on your own risk — it really is throwaway code.
Case: Lausuntopalvelu
![Page 5: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/5.jpg)
Schedule:
Team:Proxy product owner
2 IX/UI designers
2 software developers
Start shop 1 dayUnderstand the problemIterate with paper protos
Design & Development 5 days
Design user interfaceDevelop functionality
Demo 2 hours Deliver to the customer
![Page 6: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/6.jpg)
![Page 7: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/7.jpg)
![Page 8: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/8.jpg)
![Page 9: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/9.jpg)
![Page 10: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/10.jpg)
Startshop Tips
DO have a schedule
DO let the client tell their story
DON’T try to come up with a solution before you understand the problem
DON’T delegate design responsibility to the client
![Page 11: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/11.jpg)
Personas
Scenarios
Paper prototypes
Wireframes
Layouts
Context
Solution
We need to understand the context before we can implement the solution.
From context tothe solution
![Page 12: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/12.jpg)
Personas
Scenarios
Paper prototypes
Wireframes
Layouts
From context tothe solution
Context
Solution
We use different tools to move from context towards solutions.
![Page 13: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/13.jpg)
Personas
Scenarios
Paper prototypes
Wireframes
Layouts
From context tothe solution
Context
Solution
We verify our understanding at each level with the client and by comparing to the other levels.
![Page 14: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/14.jpg)
![Page 15: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/15.jpg)
PO CODE
![Page 16: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/16.jpg)
Development Tips
DO have small tasks (< 2h)
DO commit and deploy all the time
DO have product owner test the prototype all the time
DON’T write anything extra
DON’T spend time in polishing
![Page 17: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/17.jpg)
Internals in this casejQuery, Transparency, Spine, Undescore, ...
CoffeeScript
Node.js
MongoDB
Github
Linode
YouTube
![Page 18: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/18.jpg)
Demo to the client
![Page 19: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/19.jpg)
Lessons learned
• 7-day projects are exciting!
• Throw the code away.
• Throw the design away.
![Page 20: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/20.jpg)
What is good software?
![Page 21: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/21.jpg)
What is a good tool?
![Page 22: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/22.jpg)
A tool is used in some context.
tool
context
![Page 23: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/23.jpg)
tool
context
In the context different forces act upon the tool
![Page 24: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/24.jpg)
tool
Tool is goodif it fits the context.
context
![Page 25: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/25.jpg)
tool
Tool is badif it doesn’t fit the context.
context
![Page 26: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/26.jpg)
Example.
![Page 27: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/27.jpg)
when you arebored and needentertainment
just a fewminutes of time
you can stop wheneveryou want
you don’twant to learn
anything difficult
alwayswith you
etc. etc.
Example.
![Page 28: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/28.jpg)
Example. when you arebored and needentertainment
just a fewminutes of time
you can stop wheneveryou want
you don’twant to learn
anything difficult
alwayswith you
etc. etc.
![Page 29: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/29.jpg)
Example. when you arebored and needentertainment
just a fewminutes of time
you can stop wheneveryou want
you want to learn something useful
alwayswith you
etc. etc.
![Page 30: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/30.jpg)
Example. when you arebored and needentertainmentsocial
situationyou can stop
wheneveryou want
you want to learn something useful
alwayswith you
etc. etc.
![Page 31: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/31.jpg)
So to create a good toolyou need two things.
![Page 32: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/32.jpg)
context
1. Understand the context where the tool will be used.
? ?
?
![Page 33: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/33.jpg)
context
2. Design a tool that fits the context.
tool
![Page 34: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/34.jpg)
tool
context
You cannot tell from an abstract idea,if it will fit the context.
![Page 35: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/35.jpg)
tool
context
As you make the idea more concrete,you will see its problems more clearly.
![Page 36: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/36.jpg)
tool
context
This gives you an idea how to improve it.
![Page 37: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/37.jpg)
tool
context
And so on.
![Page 38: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/38.jpg)
tool
Continue iteratinguntil you find a design that
fits the context well enough.
context
![Page 39: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/39.jpg)
specification design implem
entation testing maintenance
Traditional waterfall lacks iteration
![Page 40: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/40.jpg)
Probably resulting in a bad tool.
tool
context
specification design implem
entation testing maintenance
![Page 41: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/41.jpg)
Agile methods, e.g. Scrum,introduce iteration to fix that problem.
![Page 42: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/42.jpg)
But a few things are unclear
1. How do you find the context?
2. How does the context result in a backlog?
![Page 43: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/43.jpg)
user needs
User needs are the mostfundamental part of the context.
![Page 44: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/44.jpg)
user needs
architecture
user interface
requirements
data model
feature list
What is the most logical next step?Why?
?
![Page 45: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/45.jpg)
user interface
User interface is, because itcan be tested against user needs.
user needs
architecture
requirements
data model
feature list
![Page 46: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/46.jpg)
You cannot tell from e.g. data modelalone if it will match the user needs.
user interface
architecture
requirements
data model
feature list
user needs
![Page 47: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/47.jpg)
This is our process.
![Page 48: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/48.jpg)
The right side of the processis traditional agile, e.g. Scrum.
![Page 49: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/49.jpg)
Before starting Scrum weinvestigate the context and look
for solutions by prototyping.
![Page 50: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/50.jpg)
We find out the context of the systemby interviewing potential users.
context
?
??
?
![Page 51: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/51.jpg)
We describe the contextby writing scenarios.
context
?
![Page 52: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/52.jpg)
tool
context
We create prototypesbased on the scenarios.
?
![Page 53: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/53.jpg)
We test the prototypesusing simulation and user testing.
tool
context
?
![Page 54: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/54.jpg)
When the user interaction of the most common scenarios is clear, we put
them to the product backlog.
![Page 55: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/55.jpg)
A use case may consist of one or more features.
![Page 56: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/56.jpg)
We take new features to production basedon the rhythm of the project.
Preferrably as soon as they are ready.
![Page 57: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/57.jpg)
There are multiple kinds of prototypes.
![Page 58: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/58.jpg)
Paper prototyping is fastest.
![Page 59: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/59.jpg)
A fancier prototype adds precisionbut not necessarily accuracy.
![Page 60: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/60.jpg)
We use mostly paper prototypesand functional prototypes.
![Page 61: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/61.jpg)
The length of a paper prototypefeedback loop is minutes.
![Page 62: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/62.jpg)
The length of a functional prototypefeedback loop is days.
![Page 63: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/63.jpg)
Paper prototype is good forfinding out and validating
the use cases and the design.
![Page 64: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/64.jpg)
A functional prototype is good for communicating the vision of the product,
selling it and validating the market.
![Page 65: How to prototype to understand your clients](https://reader034.fdocuments.us/reader034/viewer/2022042514/558d023ed8b42a0b2b8b4586/html5/thumbnails/65.jpg)
1.
3.
2.
Understand the contextof your system.
Build prototypes to validate your understanding of the context and the design.
Different situations call for different kinds of prototypes.
Talk in one slide