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.

1. MAKE YOUR STICK FIGURES WORK HARDER
The 3 C’s of Sketching
Jason Ulaszek @webbit
Sketch Camp Chicago
November 2, 2013

2. INTRO
So, this sketching thing...
2

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

4. EXERCISE
Let’s warm up.
4

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. 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. COMMUNICATION
Sketches communicate. You should too.
7

8. “
Communication is one of the
largest hurdles we face in the
product design process.
”
Aaron Irizarry
Product Designer, Nasdaq
@aaroni
@webbit

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. WE USE IT TO COMMUNICATE
THE EXPERIENCE
@webbit

11. TO COMMUNICATE OUR FOCUS
OR
@webbit

12. OR EVEN
BUSINESS
IDEAS...
Source: “twttr sketch”, Jack Dorsey
March 24th, 2006
http://bit.ly/bKQPrd
@webbit

13. OR PHYSICAL PRODUCTS
Source: “Early sketch book”, Harley Davidson Museum,
Milwaukee, Wisconsin
@webbit

14. OR SERVICES
http://bit.ly/Htn4lS
@webbit

15. BUT, EQUALLY IMPORTANT...
Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD
@webbit

16. COMMUNICATE EVALUATION
Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD
@webbit

17. COMMUNICATE THE PLAN
Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010
@webbit

18. SAMPLE PLAN - SKETCHBOARDING
@webbit

19. SHOW & TELL THE STORY
OF THE PROCESS
@webbit

20. IT WILL HELP SET EXPECTATIONS
@webbit

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. CONTEXT
Focus, depth and dynamics of the sketch experience.
22

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. INSIGHT
The fidelity of a sketch
should reflect the depth
of your thinking.
@webbit

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. COMMUNICATE AN IDEA
@webbit

27. RECORD WHAT WE’RE SEEING & HEARING
@webbit

28. WORK THROUGH SOME THINKING
@webbit

29. WORK
THROUGH
SOME
THINKING
@webbit

30. SKETCHING TO DOCUMENT
@webbit

31. SKETCHING TO DOCUMENT
@webbit

32. SO, HOW DO YOU GET THERE?
Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010
@webbit

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. SHARPIE MAKES YOU COMMIT
Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010
@webbit

35. OR TOOLS...
@webbit

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

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. TYPICAL PROCESS
1. Ground yourself
2.Sketch
3. Share and evaluate
4.Refine
@webbit

39. ROLES IN COLLABORATION
• The pen
• The team (contributors)
• The sketch
• Moderator/instigator
• Parking lot
@webbit

40. FOR SOME TEAM MEMBERS,
GETTING STARTED MIGHT
BE CHALLENGING
@webbit

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. GROUND EVERYONE
BEFORE EVALUATING
@webbit

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. HAVE FUN WITH
SKETCH-PROPS
@webbit

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. CREATE OPPORTUNITY
FOR OTHERS TO
PARTICIPATE
@webbit

47. EXERCISE
Let’s refine our earlier sketch.
47

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. WRAP UP
What’s next?
49

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. ica
ion
at
or
un
on
ti
lla
b
m
Co
m
Co
Clarity
Context
@webbit

52. “
Let’s eradicate illuphobia.
Is that even a word?
It is now.
”
Brandy Agerbeck
Artist & Graphic Facilitator, Loosetooth
@loosetooth
@webbit

53. FIN
Thank you.
53