Collaborative Sketching for UX - As presented by Robert Stribley for Razorfish on 04/21/15

1. Robert Stribley
04/21/15
Collaborative Sketching: Jumpstart Your Design!

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
• Ensure
recollection
• Humanize ideas
• Jumpstart
collaboration

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

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

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

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

10. Really,
anyone can
sketch
Cartoon by XKCD

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. “twttr sketch” Twitter.com
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

19. Some Advice from the Pros

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

21. “We sit
around, stand
around those
tables and we
draw. We still
draw. … We
would draw
and we would
make lots of
models.”
Jonathan Ive

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

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

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

26. Collaborative Sketching

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

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

29. Defining Collaborative Sketching
Origins
• Rooted in Design Studio
Methodology
• Grew out of industrial design and
architecture
• Jim Ungar and Jeff White, “Agile
user centered design: enter the
design studio - a case study,”
2008

30. - Stefan Klocek, “Better together;
the practice of successful
creative collaboration,” Cooper
Journal
Defining Collaborative Sketching
“Ninja. Rockstar. Gifted
genius. Many of the
ways we talk about
creative work (whether
it’s design or
development) only
capture the brilliance of
a single individual.”

31. Defining Collaborative Sketching
Origins
• Will Evans
• Introduction to Design Studio
Methodology – Article
• Process
• Illumination
• Collaborative Ideation
• Presentation
• Critique
• Iteration @semanticwill

32. Origins
• Todd Zaki Warfel, Message First
• The Design Studio Method –
Presentation
• Create. Pitch. Critique.
• 6.8.5
• 6-8 sketches in 5 minutes
• 3 minutes to pitch
• 2 minutes of review
• Concept generation not details
• Not just designers
• Stealing is encouraged
Defining Collaborative Sketching
@zakiwarfel

33. • To communicate your ideas
effectively by visualizing them
• To benefit from the participation of
your colleagues
• To quickly generate ideas and refine
through iterations
Goals

34. 1. Discuss
2. Sketch
3. Share
4. Iterate
Process

35. Discuss
• Discuss the experience you’re sketching
• What’s its purpose?
• What features are necessary?
• How would you prioritize them?
• Who’s the audience?
• You’re not discussing layout or design
• Just the problem you’re trying to solve
• You’re not sketching yet
Process

37. Sketch
• Sketch silently
• Limit your time – 5, 10 minutes
• Sketch as much as possible, as many different
ideas as possible
• Don’t worry about mistakes or style
• Emphasis is on the quantity of ideas not the
quality of sketches
Process

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

41. Iterate
• Now sketch again if you need to
• Or collaborate on a high-level wireframe (e.g.
via whiteboard)
• Then begin your wireframe with a more
informed view, with more and better ideas
• Iterate on your design
Process

42. Now, it’s your
turn

43. Our Exercise

44. What to do?

45. Events.com
A website for finding and posting local
events
• Listed by category
• Listed by date
• Listed by … what else?
Our Project

46. Events.com
Consider … Who is the audience?
• Locals
• Tourists
• Event promoters
Our Project

47. Consider other event sites you’re familiar with.
This will be your “competitive analysis.”

48. Group Exercise:
Home Page

49. Typical features? Differentiators?

50. In teams, sketch your ideas for the
Events.com Home Page
1. Take 15 minutes to discuss what
features belong here
2. Sketch your ideas silently for 10
minutes
3. Share your sketches with your team
4. Collaborate on a sketch together as a
group, incorporating what you
learned
Discu
ss
Sketc
h
Shar
eIterate
Our Project
Exercise 1

51. 1. Take 15 minutes to discuss what features
belong there
Our Project

52. 2. Sketch your ideas silently for 10 minutes
Our Project

53. 3. Share your sketches with your team
Our Project

54. 4. Collaborate on a sketch together as a group,
incorporating what you learned from each
other.
Our Project

55. Some Resources

56. Books

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

58. 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
Prototyping

59. • User Interface Design in an Agile Environment: Enter
the Design Studio – Jim Ungar and Jeff White
• Design Studio Methodology – Article by Will Evans
• The Design Studio Method – Presentation by Todd Zaki
Warfel
Further Study

60. Thank you
@stribs
Deck: www.slideshare.net/stribs