Collaborative Sketching for UX - Jumpstart Your Design! - As presented by Robert Stribley, SXSW 0314

1. Robert Stribley
03/15/15
Collaborative Sketching: Jumpstart Your Design!
#sketch1st

2. Robert Stribley
@stribs
Associate Experience Director, Razorfish
My clients have included:
• Bank of America, PNC, Wachovia
• Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds,
Prudential, Smith Barney, T. Rowe Price
• Boston Scientific, Nasonex
• Choice Hotels, RCI, Sotheby’s International Realty
• Computer Associates, EMC
• Ford, Lincoln
• FreshDirect
• AT&T, Nextel
• Day One, Red Cross
• Pearson, Travel Channel, Women’s Wear Daily

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

4. my conversion story

6. Arguably, we’ve
been sketching
for eons

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

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

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

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

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

12. Really,
anyone can
sketch
Cartoon by XKCD

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

14. However, we can
learn from the
pros

15. Who often begin
with a sketch

16. Adding layers,
detail, color

17. Until they complete
their masterpiece

18. A Quick Case Study

19. Any idea what this is a sketch of?

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

21. Some Advice from the Pros

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

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

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

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

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

28. Collaborative Sketching

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

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

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

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

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

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

35. • 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

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

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

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

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

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

44. Now, it’s your
turn

45. Our Exercise

46. What to do?

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

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

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

50. Exercise 1:
Event Page

51. In teams, sketch your ideas for an
Event 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. Sketch again, incorporating what you
learned from others
Discuss
Sketch
Share
Iterate
Our Project
Exercise 1

52. Typical features? Differentiators?

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

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

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

56. 4. Sketch again, incorporating what you learned
from others
Our Project

57. Exercise 2:
Home Page

58. In teams, sketch your ideas for a Home
Page
Our Project
Exercise 2

59. Typical features? Differentiators?

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

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

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

63. 4. This time, collaborate on a sketch together as a
group, incorporating what you learned from
each other.
Our Project

64. Some Resources

65. Books

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

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

68. • 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

69. Thank you
@stribs
Deck: www.slideshare.net/stribs
Feedback: sxsw.feedogo.com/fdbk.do?sid=IAP35733