Dan Harrelson, Leah Buley
Sketchboards & PrototypesAgile 2008
1
Dan Harrelson, Leah Buley
[hand waving] Hello there.
2
Dan Harrelson, Leah Buley
Who are we?
3
Dan Harrelson, Leah Buley
Why are we here?
4
Dan Harrelson, Leah Buley
Agile + User Experience
5
Dan Harrelson, Leah Buley
A troubled history
6
Dan Harrelson, Leah Buley
Why all the fuss?
7
Dan Harrelson, Leah Buley
Designers in an agile world
*don’t let this go to your head8
Dan Harrelson, Leah Buley
What makes agile agile?
9
Dan Harrelson, Leah Buley
What makes design design?
10
Dan Harrelson, Leah Buley
The big picture (a.k.a, what you get from design)
11
Dan Harrelson, Leah Buley
One recipe for apple pie...
12
Dan Harrelson, Leah Buley
What we’re going to do today
13
Dan Harrelson, Leah Buley
Facebook for the Enterprise
( time to wake up, you’re about to get involved )
14
Dan Harrelson, Leah Buley
Your mission
15
Dan Harrelson, Leah Buley
3 scenarios
16
Dan Harrelson, Leah Buley
Meet your mates
instructions:
1. Introduce yourselves.
2. Pick a scenario.
3. Pick a name for your team.
17
Dan Harrelson, Leah Buley
Sketching
18
Dan Harrelson, Leah Buley
Why sketch?
19
Dan Harrelson, Leah Buley
“But I can’t draw!”
20
Dan Harrelson, Leah Buley
2 kinds of sketching
21
Dan Harrelson, Leah Buley
#1: Exploratory sketching
22
Dan Harrelson, Leah Buley
Techniques for exploratory sketching
23
Dan Harrelson, Leah Buley
Techniques for exploratory sketching
24
Dan Harrelson, Leah Buley
An example
25
Dan Harrelson, Leah Buley
#2: Refinement sketching
26
Dan Harrelson, Leah Buley
Techniques for refinement sketching
27
Dan Harrelson, Leah Buley
Techniques for refinement sketching
28
Dan Harrelson, Leah Buley
Techniques for refinement sketching
29
Dan Harrelson, Leah Buley
An example
30
Dan Harrelson, Leah Buley
Where does sketching fit in?
31
Dan Harrelson, Leah Buley
Let’s get sketching
instructions:
1. Working on your own, grab a 6-up template.
2. Fill in different ideas for the scenario your team has chosen.
3. Now grab a 1-up template.
4. Draw a screen that combines the best ideas from your 6-up template.
5. Go back over the 1-up template and emphasize what most important.
6. Do it in 10 minutes.
32
Dan Harrelson, Leah Buley
(An example)
33
Dan Harrelson, Leah Buley
Let’s get sketching
instructions:
1. Working on your own, grab a 6-up template.
2. Fill in different ideas for the scenario your team has chosen.
3. Now grab a 1-up template.
4. Draw a screen that combines the best ideas from your 6-up template.
5. Go back over the 1-up template and emphasize what most important.
6. Do it in 10 minutes.
34
Dan Harrelson, Leah Buley
How did it go?
35
Dan Harrelson, Leah Buley
Collaboration With Sketchboards
36
Dan Harrelson, Leah Buley
How a sketch becomes a sketchboard
37
Dan Harrelson, Leah Buley
Anatomy of a sketchboard
38
Dan Harrelson, Leah Buley
Movie time!
No that’s not DanYeah, that’s LeahYep, there’s lots of bald guys in our office
39
Dan Harrelson, Leah Buley
Sharing sketchboards
40
Dan Harrelson, Leah Buley
Pass the pen
41
Dan Harrelson, Leah Buley
Break!If you find chocolate donuts, can you bring a few back?
42
Dan Harrelson, Leah Buley
Where do sketchboards fit in?
43
Dan Harrelson, Leah Buley
Build a sketchboard
instructions:
1. Get together with your group, and create a sketchboard from everybody’s sketches.
2. Pair up with another table, and share your sketchboards with each other.
3. When the other team is sharing their sketchboard, give your input for how to make it better
4. Do it in twenty minutes.
44
Dan Harrelson, Leah Buley
(An example)
45
Dan Harrelson, Leah Buley
Build a sketchboard
instructions:
1. Get together with your group, and create a sketchboard from everybody’s sketches.
2. Pair up with another table, and share your sketchboards with each other.
3. When the other team is sharing their sketchboard, give your input for how to make it better
4. Do it in twenty minutes.
46
Dan Harrelson, Leah Buley
How did it go?
47
Dan Harrelson, Leah Buley
Recap
48
Dan Harrelson, Leah Buley
How a sketchboard becomes a prototype
49
Dan Harrelson, Leah Buley
sketchy
sketch goeshere Design Prototyping
50
Dan Harrelson, Leah Buley
The design prototype
smallquick
disposable
51
Dan Harrelson, Leah Buley
Different kinds of prototypes
52
Dan Harrelson, Leah Buley
Who makes the prototype?
53
Dan Harrelson, Leah Buley
Where does a design prototype fit in?
54
Dan Harrelson, Leah Buley
Define your design prototype
=
fidelity
elementstime
resources
55
Dan Harrelson, Leah Buley
Prototypes from sketches
56
Dan Harrelson, Leah Buley
How do you figure out what’s what?
57
Dan Harrelson, Leah Buley
Scope a design prototype
instructions:
1. With your team, look at sketchboard.
2. Place a colored post-it on each item that’s critical to the experience.
3. Place a different colored post-it on each item that’s complex for a user.
4. Rank each of the marked items using the matrix template.
5. Define an interactive prototype that addresses the critical and complex items.
58
Dan Harrelson, Leah Buley
How did it go?
59
Dan Harrelson, Leah Buley
Agile product development
60
Dan Harrelson, Leah Buley
The long “wow!”
61
Dan Harrelson, Leah Buley
The long “wow!”
62
Dan Harrelson, Leah Buley
Want to learn more?Experience
strategy
Be Agile
UnderstandingYour Users
63
Dan Harrelson, Leah Buley
Thanks!
64
Dan Harrelson, Leah Buley
Resources
[email protected] [email protected]
adaptivepath.com/slides/agile08.zip
adaptivepath.com/ideas/essays
65