MAKE YOUR STICK FIGURES WORK HARDER
The 3 C’s of Sketching

Jason Ulaszek @webbit

Sketch Camp Chicago
November 2, 2013
INTRO
So, this sketching thing...

2
THE 3 C’S OF SKETCHING
1. Communication
2. Context
3. Collaboration

@webbit
EXERCISE
Let’s warm up.

4
URBAN PUPS
It’s important to socialize your dog and make sure they get enough
exercise, but for people who live in cities,...
YOUR ASSIGNMENT (PART 1)
You’ve been hired to lead the UX practice at Urban Pups. As the lead UX
designer, you’re now resp...
COMMUNICATION
Sketches communicate. You should too.

7
“

Communication is one of the
largest hurdles we face in the
product design process.

”

Aaron Irizarry
Product Designer,...
SKETCHING CAN HELP
•
•
•
•

Quickly communicates ideas & direction (early)
Helps avoid roadblocks by inviting discussion
V...
WE USE IT TO COMMUNICATE
THE EXPERIENCE

@webbit
TO COMMUNICATE OUR FOCUS

OR

@webbit
OR EVEN
BUSINESS
IDEAS...

Source: “twttr sketch”, Jack Dorsey
March 24th, 2006
http://bit.ly/bKQPrd

@webbit
OR PHYSICAL PRODUCTS

Source: “Early sketch book”, Harley Davidson Museum,
Milwaukee, Wisconsin

@webbit
OR SERVICES

http://bit.ly/Htn4lS
@webbit
BUT, EQUALLY IMPORTANT...

Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD

@webbit
COMMUNICATE EVALUATION

Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD

@webbit
COMMUNICATE THE PLAN

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
SAMPLE PLAN - SKETCHBOARDING

@webbit
SHOW & TELL THE STORY
OF THE PROCESS
@webbit
IT WILL HELP SET EXPECTATIONS

@webbit
KEY ELEMENTS TO COMMUNICATE
✓ Assumptions
✓ Structure

you’re making

and flow of the process

✓ Roles

team members will ...
CONTEXT
Focus, depth and dynamics of the sketch experience.

22
“

Don’t get focused on the screen.
You want to pull back and consider
the context. The experience.

”

Peter Merholz
VP o...
INSIGHT

The fidelity of a sketch
should reflect the depth
of your thinking.

@webbit
FOCUS AND PURPOSE
•

Sketching To Communicate An Idea
"Here's what I'm trying to tell you..."

•

Sketching To Record What...
COMMUNICATE AN IDEA

@webbit
RECORD WHAT WE’RE SEEING & HEARING

@webbit
WORK THROUGH SOME THINKING

@webbit
WORK
THROUGH
SOME
THINKING

@webbit
SKETCHING TO DOCUMENT

@webbit
SKETCHING TO DOCUMENT

@webbit
SO, HOW DO YOU GET THERE?

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
THE SKETCH MIGHT INCLUDE...
•
•
•

Nouns – people, places and things

•
•
•

Reaction of the system - personality, playful...
SHARPIE MAKES YOU COMMIT

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
OR TOOLS...

@webbit
COLLABORATION
Work together to build understanding and fill in the gaps.

36
“

The goal is to move from the
idea of designer as artiste
towards a notion of designer
as facilitator.

”

Leah Buley

A...
TYPICAL PROCESS
1. Ground yourself
2.Sketch
3. Share and evaluate
4.Refine

@webbit
ROLES IN COLLABORATION

• The pen
• The team (contributors)
• The sketch
• Moderator/instigator
• Parking lot
@webbit
FOR SOME TEAM MEMBERS,
GETTING STARTED MIGHT
BE CHALLENGING

@webbit
MAXIMIZE ENGAGEMENT
Do
•
•
•
•
•

Find inspiration
Work fast; generate more
Embrace constraints
Explain the experience (an...
GROUND EVERYONE
BEFORE EVALUATING
@webbit
EVALUATION TIPS
•

Clearly identify roles in the process - e.g.,

•
•

“Walk the data” before getting started

•
•

Refer ...
HAVE FUN WITH
SKETCH-PROPS

@webbit
ADDITIONAL IDEAS
• Document

the process and

experience (it’ll help you next time)

• Scan

the work for remote team

mem...
CREATE OPPORTUNITY
FOR OTHERS TO
PARTICIPATE

@webbit
EXERCISE
Let’s refine our earlier sketch.

47
YOUR ASSIGNMENT (PART 2)
1. Turn to the person next to you.
2.Explain your drawings to each other.
3.Now refine each other...
WRAP UP
What’s next?

49
“

I would add another “C” (CxCCC). Clarity of
Communication, Clarity of Context, Clarity of
Collaboration. Sketching does...
ica

ion
at
or

un
on
ti

lla
b

m

Co

m
Co

Clarity
Context

@webbit
“

Let’s eradicate illuphobia.
Is that even a word?
It is now.

”

Brandy Agerbeck

Artist & Graphic Facilitator, Loosetoo...
FIN
Thank you.

53
Upcoming SlideShare
Loading in...5
×

Make Your Stick Figures Work Harder: The 3 C's of Sketching

24,069

Published on

Presented at Sketch Camp Chicago on November 2, 2013.

Look inside a designer's toolkit and you'll likely find a broadly defined exercise called sketching. It's an exercise that can turn napkins, flip charts, whiteboards and 6-up templates into valuable assets containing everything from direction of business models to mobile app experiences. While a sketching exercise might produce an artifact seemingly simple to the uninitiated, great designers know the exercise requires design itself. By purposefully designing the exercise around the "3 C's" - communication, context and collaboration - we can increase participation and engagement by both design team members and stakeholders. In this session you'll learn about these three factors that are key to consider in planning and facilitating a sketching exercise. You'll also walk away with a handful of tips and tricks to try on your next project.

Published in: Design, Technology, Business
1 Comment
35 Likes
Statistics
Notes
  • Thanks about your presentation in C's
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
24,069
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
151
Comments
1
Likes
35
Embeds 0
No embeds

No notes for slide

Make Your Stick Figures Work Harder: The 3 C's of Sketching

  1. 1. MAKE YOUR STICK FIGURES WORK HARDER The 3 C’s of Sketching Jason Ulaszek @webbit Sketch Camp Chicago November 2, 2013
  2. 2. INTRO So, this sketching thing... 2
  3. 3. THE 3 C’S OF SKETCHING 1. Communication 2. Context 3. Collaboration @webbit
  4. 4. EXERCISE Let’s warm up. 4
  5. 5. URBAN PUPS It’s important to socialize your dog and make sure they get enough exercise, but for people who live in cities, this can be especially difficult to manage. Hectic schedules combined with limited access to dog-friendly public space results in many dogs spending their days cooped up in apartments. Urban Pups is a new service that allows dog owners to swap pet care tips, find dog-friendly parks, and share insights and experiences. Whether you’re looking for a dog park in your area or just looking for house training suggestions, Urban Pups can help keep all of the pups in your community happy and healthy. @webbit
  6. 6. YOUR ASSIGNMENT (PART 1) You’ve been hired to lead the UX practice at Urban Pups. As the lead UX designer, you’re now responsible for helping set the experience design strategy and direction for the soon-to-be-released mobile application. Until now, the company has only provided their service via a desktop site. Your team consists of a junior UX designer, a project manager and a front-end developer. They’ve been doing the best they can to support the sales and marketing business stakeholders, but they haven’t been following much of a design process. This could be a great opportunity to introduce some sketching! 1. Draw the experience of a sketching activity. 2. Consider communicating the process, the context of the experience and collaboration amongst team members. 3. You have 5 minutes. @webbit
  7. 7. COMMUNICATION Sketches communicate. You should too. 7
  8. 8. “ Communication is one of the largest hurdles we face in the product design process. ” Aaron Irizarry Product Designer, Nasdaq @aaroni @webbit
  9. 9. SKETCHING CAN HELP • • • • Quickly communicates ideas & direction (early) Helps avoid roadblocks by inviting discussion Visually communicates concepts, flows & designs Engaging and fun - builds dynamic team environment @webbit
  10. 10. WE USE IT TO COMMUNICATE THE EXPERIENCE @webbit
  11. 11. TO COMMUNICATE OUR FOCUS OR @webbit
  12. 12. OR EVEN BUSINESS IDEAS... Source: “twttr sketch”, Jack Dorsey March 24th, 2006 http://bit.ly/bKQPrd @webbit
  13. 13. OR PHYSICAL PRODUCTS Source: “Early sketch book”, Harley Davidson Museum, Milwaukee, Wisconsin @webbit
  14. 14. OR SERVICES http://bit.ly/Htn4lS @webbit
  15. 15. BUT, EQUALLY IMPORTANT... Source: “Sketching Interfaces”, Michael Angeles http://slidesha.re/SVgjaD @webbit
  16. 16. COMMUNICATE EVALUATION Source: “Sketching Interfaces”, Michael Angeles http://slidesha.re/SVgjaD @webbit
  17. 17. COMMUNICATE THE PLAN Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  18. 18. SAMPLE PLAN - SKETCHBOARDING @webbit
  19. 19. SHOW & TELL THE STORY OF THE PROCESS @webbit
  20. 20. IT WILL HELP SET EXPECTATIONS @webbit
  21. 21. KEY ELEMENTS TO COMMUNICATE ✓ Assumptions ✓ Structure you’re making and flow of the process ✓ Roles team members will play ✓ Level of fidelity rationale ✓ Review and evaluation process ✓ Anticipated outcome @webbit
  22. 22. CONTEXT Focus, depth and dynamics of the sketch experience. 22
  23. 23. “ Don’t get focused on the screen. You want to pull back and consider the context. The experience. ” Peter Merholz VP of Design, Groupon @peterme @webbit
  24. 24. INSIGHT The fidelity of a sketch should reflect the depth of your thinking. @webbit
  25. 25. FOCUS AND PURPOSE • Sketching To Communicate An Idea "Here's what I'm trying to tell you..." • Sketching To Record What We're Seeing And Hearing "This is what I want to remember..." • Sketching To Work Through Some Thinking • Sketching To Reflect What We're Hearing "This is what I think you're telling me..." • Sketching To Document "Here's is what we've ended up with..." "What will this look like?..." Source: “Why We Sketch”, Jared Spool http://www.uie.com/articles/why_sketching/ @webbit
  26. 26. COMMUNICATE AN IDEA @webbit
  27. 27. RECORD WHAT WE’RE SEEING & HEARING @webbit
  28. 28. WORK THROUGH SOME THINKING @webbit
  29. 29. WORK THROUGH SOME THINKING @webbit
  30. 30. SKETCHING TO DOCUMENT @webbit
  31. 31. SKETCHING TO DOCUMENT @webbit
  32. 32. SO, HOW DO YOU GET THERE? Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  33. 33. THE SKETCH MIGHT INCLUDE... • • • Nouns – people, places and things • • • Reaction of the system - personality, playfulness Emotion – frustration, surprise, enjoyment, fear Descriptors – compare previous to the new now, compare to competition Systems and data involved (current and new) Design principles that you’re satisfying ... and the environment of the experience! @webbit
  34. 34. SHARPIE MAKES YOU COMMIT Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  35. 35. OR TOOLS... @webbit
  36. 36. COLLABORATION Work together to build understanding and fill in the gaps. 36
  37. 37. “ The goal is to move from the idea of designer as artiste towards a notion of designer as facilitator. ” Leah Buley Author and UX Designer, Intuit @ugleah @webbit
  38. 38. TYPICAL PROCESS 1. Ground yourself 2.Sketch 3. Share and evaluate 4.Refine @webbit
  39. 39. ROLES IN COLLABORATION • The pen • The team (contributors) • The sketch • Moderator/instigator • Parking lot @webbit
  40. 40. FOR SOME TEAM MEMBERS, GETTING STARTED MIGHT BE CHALLENGING @webbit
  41. 41. MAXIMIZE ENGAGEMENT Do • • • • • Find inspiration Work fast; generate more Embrace constraints Explain the experience (annotate) Stop at ‘good enough’ Don’t • Be defensive • Focus on details early • Forget the purpose (big picture) @webbit
  42. 42. GROUND EVERYONE BEFORE EVALUATING @webbit
  43. 43. EVALUATION TIPS • Clearly identify roles in the process - e.g., • • “Walk the data” before getting started • • Refer back to inputs when needed designer, moderator, etc. Challenge common design patterns and assumptions Create three lists for each sketch advantages, disadvantages and open questions @webbit
  44. 44. HAVE FUN WITH SKETCH-PROPS @webbit
  45. 45. ADDITIONAL IDEAS • Document the process and experience (it’ll help you next time) • Scan the work for remote team members or later recall • Record screen casts and walk- throughs @webbit
  46. 46. CREATE OPPORTUNITY FOR OTHERS TO PARTICIPATE @webbit
  47. 47. EXERCISE Let’s refine our earlier sketch. 47
  48. 48. YOUR ASSIGNMENT (PART 2) 1. Turn to the person next to you. 2.Explain your drawings to each other. 3.Now refine each other’s drawing to improve upon the a. Communication b. Context c. Collaboration 4.You have 10 minutes. 5.Then we’ll share. @webbit
  49. 49. WRAP UP What’s next? 49
  50. 50. “ I would add another “C” (CxCCC). Clarity of Communication, Clarity of Context, Clarity of Collaboration. Sketching does that on all the three aspects, and if something isn’t clear… ask why, involve more people, fill the gaps until it gets clear. ” Davide Casali Author and UX Designer, Automattic @folletto @webbit
  51. 51. ica ion at or un on ti lla b m Co m Co Clarity Context @webbit
  52. 52. “ Let’s eradicate illuphobia. Is that even a word? It is now. ” Brandy Agerbeck Artist & Graphic Facilitator, Loosetooth @loosetooth @webbit
  53. 53. FIN Thank you. 53
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×