This document discusses collaborative sketching for user experience design. It defines collaborative sketching as a quick, simple, and collaborative process rooted in design studio methodology. The key aspects of collaborative sketching outlined are discussing the problem or experience to sketch, individually sketching multiple ideas within a time limit, sharing sketches with the team to provide feedback, and revising sketches based on feedback. The document provides examples of collaborative sketching exercises and resources for further learning about design studio methodology and sketching tools.

1. Collaborative Sketching for UX
Robert Stribley
02/19/14

3. Arguably, we’ve
been sketching for
eons

4. But now, we’re sketching
more than ever
• IdeaPaint Inc makes a paint
that turns any surface into a
whiteboard
• Its sales have doubled every
year since introduced in 2008
• More than ½ its business is in
the workplace
See “Doodling for Dollars,” Wall Street Journal, April 24, 2012

5. Why sketch?
• Enable
communication
• Make abstract
concepts concrete
• Iterate on ideas
• Jumpstart
collaboration
• Ensure recollection
• Humanize ideas

6. What can I sketch?
• Home pages
• Category pages
• Product pages
• Wizards & widgets
• Search results
• Process Flows
• Anything, really

7. And there’s so
much more to
sketch for …
• Smartphones
• Tablets
• Google Glass
• iWatches
• Responsive design
• Ubiquitous
computing

8. Who can sketch?
• Information architects
• Interaction designers
• Graphic designers
• Content strategists
• Project managers
• Business analysts
• Functional analysts
• Developers
• Client directors

9. Really,
anyone can
sketch
Cartoon by XKCD

10. A few ways we sketch at
Razorfish:
•
•
•
•
•
Solo
Sketch to comp
Communicate to client
Storyboarding
As a team – collaboratively

11. What sketching isn’t …
• Sketching isn’t only for
designers
• Sketching isn’t difficult
• Sketching isn’t drawing
You needn’t be Michelangelo
to participate

12. However, we can
learn from the pros

13. Who often begin
with a sketch

14. Adding layers, detail,
color

15. Until they complete
their masterpiece

16. A Quick Case Study

17. Any idea what this is a sketch of?

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

19. Some Advice from the Experts

20. “The great benefit of drawing is that when you
look at something, you see it for the first time.”
- Milton Glaser

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

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

23. "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

25. Collaborative Sketching

26. For the purposes
of today’s
workshop,
sketching is …
•Quick
•Simple
•Collaborative

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

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

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

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

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

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

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

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

37. Now, it’s your turn

38. Our Exercise

39. What to do?

40. Our Exercise:
A home page for Events.com
• A website for finding local events
– Listed by category
– Listed by date
– Listed by … what else?
• Who is the audience?
– Locals
– Tourists
– Event promoters

41. Also, consider
other event sites
you’re familiar
with. This will be
your “competitive
analysis”

42. Our Exercise:
In teams, sketch your ideas
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
Discuss
Sketch
Share
Revise

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

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

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

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

47. Some Resources

48. Books

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

50. Prototyping
AppSeed
Currently in development,
this Kickstarter project lets
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

51. Further Study
• 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

52. Thank you
www.slideshare.net/stribs