Slides for Adaptive Path's Good Design Faster workshop, as given by Peter Boersma at Design by Fire 2010.

1. De sign by Fire
Oc tober 12-13, 2010
Utrecht
The Netherlands

2. The problem

3. Clients want great experiences, and they want
them faster.

4. t y p ic a l
Wireframes (our tools of choice)
don’t work for this

5. t y p ic a l
Wireframes (our tools of choice)
don’t work for this

6. t y p ic a l
Wireframes (our tools of choice)
don’t work for this

7. An approach inspired by the design studio...
http://www.flickr.com/photos/98736785@N00/1589941777/

8. 1. Sketch and explore ideas

9. 2. Bring lots of ideas together

10. 3. Share and iterate with the team

11. What we’re going to do today
13:00-15:00 15:30-16:00 16:00-17:00 pm
Sketch and explore ideas Bring lots of ideas together Share & iterate with the team
PEOPLE!

12. What do you want to accomplish today?

13. Activity #1: Tele-Pictionary
1 write expression
Create a
2 pass to neighbor
“Stack of Stickies”
3 read expression
(as many sheets as
4 place sheet at bottom
there are people at
5 draw expression
the table)
6 pass to neighbor
7 check drawing
8 place sheet at
bottom
(9) repeat

14. Sketching
hacks

15. Sketching with markers
Yellow marker
Look at me!
Sharpie markers
More attention Fat
Regular
Start here Small
Gray marker
Depth:
Pop forward
Push back

16. Tips for design sketching
Use markers and pens, not pencils;
our goal is Fast, not perfect
If you mess up, keep going
If you really mess up, grab a new page

17. ACTIVITY highlighting
Trick #1: ONE:
Build-a-Bike
Courtesy of Rachel Glaves

18. ACTIVITY line weight
Trick #2: ONE:
Courtesy of Brandon Schauer

19. ACTIVITY shading / warm gray
Trick #3: ONE:
Courtesy of Rachel Glaves

20. ACTIVITY ONE:
Activity #2: Sketching Boxes
INSTRUCTIONS
1. Fill a page with overlapping rectangles
2. Hold the page up for the group to see
3. Pass it to your neighbor, then choose one
rectangle and color it yellow
4. Pass it to your neighbor, then outline 3-4
rectangles with the fat sharpie
5. One more pass! Shade in 3-4 rectangles with
the gray marker ... or add some shadows

21. It’s not about HOW to sketch, but WHAT to sketch

22. Exploratory sketches
Meaningful only to you
Low fidelity
Wildly varied
Unsubtle

23. Refinement sketches
Interpretable by others
Higher fidelity
More realistic
Within a framework

24. Tips for sketching screens: helpful patterns
Callouts
Header Can show alerts, Drop Shadows
help, guidance or Communicate depth and
sketch annotations bring attention to
Tab callouts or popup boxes
Filler text
Pop-up Calendar
Module
User
Picture Page curl
Arrows
Photo Larger ones can
communicate weight,
or act as labels Mouse Cursor
Video
Quietly indicates a
rollover state
Side-scrolling Module

25. Trick #4: 6-Up Template
HOW TO:
1. Draw the first
things you think of
2. Then, think
about opposites
3. Also, think about
other goals of the
experience

26. Trick #5: 1-Up Template
HOW TO:
1. Use line weight
2. Use shading
3. Use highlights
3. Use labels

27. Let’s try it out

28. your personal SHOPPER
NUTRITIONIST
CHEF
FOODIE

29. ACTIVITY ONE:
Activity #3a: Exploratory Sketching
INSTRUCTIONS
1. Using a 6-up template, sketch 6 new ideas for
the same problem.
2. Put your first ideas down.
3. If you get stuck, think about opposites.
Or, think about design principles.

30. ACTIVITY ONE:
Activity #3b: Refinement Sketching
INSTRUCTIONS
1. Pick the most promising ideas from your 6
sketches. (Which one was it?)
2. Using the 1-up template, sketch a higher
fidelity version that brings it all together.
3. Go back over your sketch with a sharpie and
add line weight, shading, and labels to make it
even clearer.

31. B REAK
(pauze)

32. Enter Sketchboards
“A new buzzword for a blatantly obvious
technique” —danny.hope

33. A healthy sketchboard has depth and breadth

34. STEP ONE: get a large sheet of paper

35. In this case, size matters

36. STEP TWO: give it some structure

37. The structure can change
(Trick #6: use stickies to keep it flexible)

38. STEP THREE: add inputs

39. Include anything that drives your thinking

40. STEP FOUR: fill it with sketches!

41. Trick #7: The incredible drafting dot

42. ACTIVITY ONE:
Activity #4: Assemble a Sketchboard
INSTRUCTIONS
Working as a group, use sticky notes to structure
your sketchboard. Tape up your inputs, and any
sketches that you’ve done so far in each section.

43. Share with the team

44. ACTIVITY ONE:
Activity #5: Review the Sketchboard
INSTRUCTIONS
1. Discuss your sketches as a group.
2. Decide which sketches are the most viable
direction (consider your inputs).
3. Do additional sketches as necessary to fill in
holes and evolve the design.

45. Tips for getting good feedback

46. ACTIVITY ONE:
Activity #6: Black Hat session
INSTRUCTIONS
1. Working quickly, add a stickie to the
sketchboard for every question or concern
that you have
2. As a group, talk through the stickies, and
decide how to improve the design to address
issues raised
3. Resketch as necessary

47. Bringing it all together

48. The 5-day sprint

49. Sketchboards are just a jumping off point
Customer
Action
Front
Office
Back
Office

50. The 5-day sprint

51. Tips for iterating sprints

52. Your “Sprint Kit”

54. Resources to get you started
Peter Boersma
peter.boersma@adaptivepath.com
Sketchboards: Discover Better + Faster UX Solutions
http://www.adaptivepath.com/ideas/essays/archives/000863.php
6-up and 1-up Templates
http://www.ugleah.com/ux-team-of-one/
Thanks to
Leah Buley
Brandon Schauer
Rachel Glaves
Kate Rutter

55. Se e you tomorrow,
at the conference?