This document discusses collaborative sketching for user experience design. It defines collaborative sketching as benefiting from colleagues' participation to communicate and refine ideas through visualizing, generating, and iterating on sketches. An exercise is described where teams discuss features for an event website, sketch ideas silently, share sketches to provide feedback, and sketch again with new insights. Resources on design studio methodology, sketching tools, and prototyping with sketches are also provided.

1. Collaborative Sketching for UX
Robert Stribley
UX Sketch Camp NYC – 10/12/14

2. First, remember,
anyone can sketch
Cartoon by XKCD

3. And for the
purposes of
today’s workshop,
sketching is …
•Quick
•Simple
•Collaborative

4. All the tools you
need:
Paper
Sharpies
Photo by JasonTank, Flickr

5. Some Examples

9. Any idea what this is a sketch of?

10. Twitter
[This sketch] has very special significance – it's hanging in the office somewhere
with one other page. Whenever I'm thinking about something, I really like to take
out the yellow notepad and get it down.
– Jack Dorsey, Twitter
“twttr sketch”
Twitter.com

11. Advice from the Experts

12. “There are techniques
and processes whereby
we can put experience
front and center in design.
My belief is that the basis
for doing so lies in
extending the traditional
practice of sketching.”
- Bill Buxton
Bill Buxton
Sketching User
Experiences

13. Attributes of a Sketch
•Quick
•Timely
•Inexpensive
•Disposable
•Plentiful
•Clear vocabulary
•Distinct gesture
•Minimal detail
•Appropriate degree of refinement
•Suggest & explore rather than confirm
•Ambiguity
Bill Buxton
Sketching User
Experiences

14. "There is no more powerful
way to prove that we know
something well than to draw a
simple picture of it. And there
is no more powerful way to
see hidden solutions than to
pick up a pen and draw out
the pieces of our problem."
Dan Roam
The Back of the
Napkin

16. Collaborative Sketching

17. Defining Collaborative Sketching
Origins
• Rooted in Design Studio Methodology
• Grew out of industrial design and architecture
• No “rockstars”
• Different versions/methods
• For example, Todd Zaki Warfel, Message First, talks
about …
• Create. Pitch. Critique.
• 6.8.5 game

18. Methodology
• Sketch
• Limit your time
• Don’t worry about mistakes or style
Goals
• Benefit from the participation of your colleagues
• Communicate ideas effectively by visualizing
them
• Quickly generate ideas and refine through
iterations

19. Process:
1. Discuss
2. Sketch
3. Share
4. Revise

20. Discuss
• Discuss the experience you’re sketching
• What’s its purpose?
• What features are necessary?
• How would you prioritize them?
• What’s the audience?
• However, you are not discussing layout or design
• Just the problem you’re trying to solve
• No sketching yet!

21. Sketch
• Sketch silently
• Limit your time – 5, 10 minutes
• Sketch as much has possible, as many different
ideas as possible
• Emphasis is on quantity of ideas not quality of
sketches

22. Share
• Review your work with your team
• Keep it short – 60 seconds each
• You provide feedback to others
• What you like
• Questions about didn’t work for you
• You’re not grilling your colleagues and this is
not a competition

23. Revise
• Now begin your wireframe with a more informed
view, more and better ideas
• And sketch again if you need to

24. Our Exercise

25. What to do?

26. Our Exercise:
A home page for Events.com
• A website for finding local events
– Listed by category
– Listed by date
– Listed by ???
• Who is the audience?
– Personas

27. Our Exercise:
Consider other
event sites you’re
familiar with. This
will be your
“competitive
analysis”

28. Our Exercise:
In teams, sketch your ideas.
Events.com Home Page
1. Take 10 minutes to discuss what features
belong here
2. Sketch your ideas silently for 10 minutes
3. Share your sketches with your team
4. Sketch again, incorporating what you learned
from others

29. Our Exercise:
1. Take 10 minutes to discuss what features
belong here

30. Our Exercise:
2. Sketch your ideas silently for 10 minutes

31. Our Exercise:
3. Share your sketches with your team

32. Our Exercise:
4. Sketch again, incorporating what you
learned from others

33. Some Resources

35. Online Reading & Viewing
Introduction to Design Studio Methodology
http://uxmag.com/articles/introduction-to-design-studio-methodology
The Design Studio Method – Presentation by
Todd Zaki Warfel
https://vimeo.com/37861987

36. Sketching Tools
The following apps are all
for the iPad:
• Adobe Ideas
• Bamboo Paper
• Muji Notebook
• Penultimate
• SketchBook Pro

37. Prototyping With
Sketches
AppSeed
Currently a Kickstarter
projects, AppSeed allows
you to turn your app
sketches into working
mobile prototypes
"Sketching is simply the fastest way to
test ideas and visually brainstorm”
– Greg Goralski, AppSeed creator

38. thanks
www.slideshare.net/stribs
@stribs