2. UX Sofia
May 26, 2011
Sofia
Bulgaria

3. The problem

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

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. t y p ic a l
Wireframes (our tools of choice)
don’t work for this

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

9. 1. Sketch and explore ideas

10. 2. Bring lots of ideas together

11. 3. Share and iterate with the team

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

13. What do you want to accomplish today?

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

15. Sketching
hacks

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

17. 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

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

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

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

21. 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

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

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

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

25. 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

26. 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

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

28. Let’s try it out

29. your personal SHOPPER &
NUTRITIONIST &
CHEF &
FOODIE.

30. 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.

31. 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.

32. 30 minute
B REAK
(пауза)

33. 2. Bring lots of ideas together

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

35. A healthy sketchboard has depth and breadth

36. STEP ONE: get a large sheet of paper

37. In this case, size matters

38. STEP TWO: give it some structure

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

40. STEP THREE: add inputs

41. Include anything that drives your thinking

42. STEP FOUR: fill it with sketches!

43. Trick #7: The incredible drafting dot

44. 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.

45. 3. Share and iterate with the team

46. Share with the team

47. How?
X

48. Team Review

49. 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.

50. Tips for getting good feedback

51. 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

52. Bringing it all together

53. The 5-day sprint

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

55. The 5-day sprint

56. Tips for iterating sprints

57. Your “Sprint Kit”

59. 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

60. Thank you!
Yo u were awesome!