UX design is not a job to be done in silos anymore, designers are tasked with guiding the teams they work with to make better choices for the sake of the users. They need to work collaboratively with stakeholders/team members to integrate and understand business requirements and technology feasibility while advocating for the user. Time has come to repurpose some of the core UXers’ tools and methods for a collaborative and lean environment to build a shared understanding and work towards common product goals. In this workshop, you will be introduced to collaborative sketching exercises. You will learn how to run such exercises to ideate, develop and iterate on possible design solutions with the development and management teams they work with.

2. Currently…
UX Manager
Previously…
User Researcher, Ethnographer, UX Consultant,
Service Designer, Product Designer, Customer
Experience Specialist
@
HFI, GrameenPhone, Samsung, Stanford, Startups…
@mphaxise mphaxise
Introductions

3. Expectations

4. Agenda
Exercise 1 Sketching Break
10:45am – 11:00am
Exercise 2 Wrap up

5. Exercise 1

6. Exercise 1
Each one gets a sheet
When I say start…
Fill up as many circles as possible in a minute

7. Exercise 1
Each one gets a sheet
When I say start…
Fill up as many circles as possible in a minute

8. Exercise 1
When I say share…
Pass your sheet to the person sitting on
the right
You get a minute again to see and fill
more circles

9. Exercise 1
We will continue until a full circle is
completed

10. Exercise 1
• Each one gets a sheet
• When I say start…
• Fill up as many circles as possible in a minute
• When I say share…
• Give your sheet to the person sitting on the right to you
• Continue to fill circles
• ……….
• Until a full circle is complete

11. Exercise 1 : Discussion
• How did it go?
• Did you draw outside the circle?
• Did anyone use more than one circle to form objects?
• Did anyone label their objects?
• How did your ideas evolve over each round?

12. Exercise 1 : Discussion
• How did it go?
• Did you draw outside the circle?
• Did anyone use more than one circle to form objects?
• Did anyone label their objects?
• How did your ideas evolve over each round?

13. Exercise 1 : Discussion
• How did it go?
• Did you draw outside the circle?
• Did anyone use more than one circle to form objects?
• Did anyone label their objects?
• How did your ideas evolve over each round?

14. Exercise 1 : Discussion
• How did it go?
• Did you draw outside the circle?
• Did anyone use more than one circle to form objects?
• Did anyone label their objects?
• How did your ideas evolve over each round?

15. Exercise 1 : Discussion
• How did it go?
• Did you draw outside the circle?
• Did anyone use more than one circle to form objects?
• Did anyone label their objects?
• How did your ideas evolve over each round?

16. Early sketch of an idea that became…

17. Twitter
March 2006
June 2006
And now…

18. Twitter
March 2006
“[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 & Square

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

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

22. Sketching, else where
“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

23. Sketching isn’t
• Difficult
• Drawing
• Only for designers

25. Sketching, else where
“There are techniques and processes whereby we can
put experience front and centre in design. My belief is
that the basis for doing so lies in extending the
traditional practice of sketching.”
-Bill Buxton

26. Attribute of a Sketch
• Quick
• Disposable
• Plentiful
• Minimal details
• Appropriate degree of refinement
• Suggest & explore rather than confirm

27. Sketching: Basic Shapes

28. Sketching Techniques : Combine the basic shapes

29. Sketching Techniques: Line Thickness
Increasing the weight of
the lines to give emphasis
to parts of the design.

30. Sketching Techniques: Size
Draw attention to parts of
your sketch by drawing
elements with varying size.

31. Sketching Techniques: Shading
Shading an area can draw
attention away from it. De-
emphasize part of the
sketch.

32. Sketching Techniques: Selective Detail
To save time, just fill in
details for the important
bits. Shows what’s
important.

33. Sketching Techniques: Isolation
Only sketch certain areas
leaving the rest fuzzy.

34. Sketching Techniques: Depth
Use shading to add depth
and perspective to make
clickable widgets

35. Sketching Techniques: Notes
Don’t hesitate to mix text
with your sketches to
explain what’s going on

36. Collaborative Sketching…
• Rooted in Design Studio Methodology
• Grew out of industrial design and architecture
• Jim Ungar, Jeff White, Will Evans, Todd Zaki Warfel, many
others…

37. Why Collaborative Sketching workshop…
• Communicate ideas effectivity
• Capture assumptions
• Bring out differences in ideas/thoughts/vision
• Move faster
• Generate more ideas, refine faster
• Diversity of experience and expertise

38. Process
• Setup and ice breaker exercise
• Sketch
• Share
• Iterate on sketches and share for a complete circle
• Vote to Prioritize
• Discuss and add notes
Repeat one more round of Sketch (Optional)

39. Process : Setup and Ice breaker
• Set agenda/purpose
• Bring use cases/user stories/insights/personas/usability test
results
• You are defining the problem, not giving solutions
• What is the purpose? In scope/out of scope
• What features are necessary? In what priority?
• Who is the audience?
• Team doing sketching for the first time?
• Ice Breaker Exercise

40. Process : Sketch
• Sketch silently
• Limit the time – 5/15 mins
• Sketch as much as possible, as many different ideas as
possible
• Don’t worry about mistakes or straight lines
• Emphasis on quantity over quality

41. Process : Share
• Give your sketches to the person sitting next to you
• Review the sketches silently…
• Do you see something interesting?

42. Process : Iterate Sketches
• Start sketching again
• Maybe you have a new idea
• Maybe you want to build up on an idea
• Maybe there is something that can be done better
• Repeat sketching and sharing until one full round

43. Process: Vote to prioritize
• Put up all the sketches on a wall/pin board
• Let everyone review the sketches silently
• Vote : dot voting, limit votes

44. Process: Discuss and add notes
• Start discussing trends
• Is there a clear winner?
• Are there multiple directions/different solutions?
• Are there ideas that did not get voted up but have potential?
• Add notes to the sketches using post-its

45. Exercise time again…

46. You all work for accuweather.com
You are going to generate ideas/concepts on defining a social experience on the
Accuweather mobile app
A mobile app for
- Local weather
- Alerts
- Forecast

47. Exercise 2 : Design Social Experiences for a Weather App
In teams, sketch your ideas for accuweather app
1. Setup, talk about who the users are, what kind of features belong here (10 mins)
2. Sketch your ideas silently (10 mins)
3. Share
4. Sketch again (5 mins).. Go full circle
5. Put up the sketches for everyone to see (5 mins)
6. Vote (10 mins)
7. Discuss and add notes (15 mins)
8. Sketch once more, incorporating what you just learnt (10 mins)

48. Exercise 2 : Design Social Experiences for a Weather App
Step 1: Setup 10 minutes
You are defining the problem, not giving solutions
• What is the purpose? In scope/out of scope
• What features are necessary? In what priority?
• Who is the audience?
• Goal: Define your use case/scenario

49. Exercise 2 : Design Social Experiences for a Weather App
Step 2: Sketch 10 minutes
• Solution mode
• Sketch silently
• Sketch as much as possible, as many different ideas as possible
• Don’t worry about mistakes or straight lines
• Emphasis on quantity over quality

50. Exercise 2 : Design Social Experiences for a Weather App
Step 3: Share 2 minutes
• Give your sketches to the person sitting next to you
• Review the sketches silently…
• Do you see something interesting?

51. Exercise 2 : Design Social Experiences for a Weather App
Step 4: Sketch 5 minutes
• Solution mode
• Sketch silently
• Build on top of ideas you saw
vs
new ideas with new inspiration

52. Exercise 2 : Design Social Experiences for a Weather App
Step 5: Share 2 minutes
• Give your sketches to the person sitting next to you
• Review the sketches silently…
• Do you see something interesting?

53. Exercise 2 : Design Social Experiences for a Weather App
Step 6: Sketch 5 minutes
• Solution mode
• Sketch silently
• Build on top of ideas you saw
vs
new ideas with new inspiration

54. Exercise 2 : Design Social Experiences for a Weather App
Step 7: Share 2 minutes
• Give your sketches to the person sitting next to you
• Review the sketches silently…
• Do you see something interesting?

55. Exercise 2 : Design Social Experiences for a Weather App
Step 8: Sketch 5 minutes
• Solution mode
• Sketch silently
• Build on top of ideas you saw
vs
new ideas with new inspiration

56. Exercise 2 : Design Social Experiences for a Weather App
Step 9: Put up the sketches 5 minutes

57. Exercise 2 : Design Social Experiences for a Weather App
Step 10: Dot voting 10 minutes
• You are given dot stickers, see all the sketches and place your votes on the top 5 ideas

58. Exercise 2 : Design Social Experiences for a Weather App
Step 11: Discuss and add notes 15 minutes
• Start discussing trends
• Is there a clear winner?
• What do you like?
• What do you not like?
• Are there ideas that can be eliminated?
• Are there multiple directions/different solutions?
• Are there ideas that did not get voted up but have potential?
• Add notes to the sketches using post-its

59. Exercise 2 : Design Social Experiences for a Weather App
Step 12: Sketch again 10 minutes
• Solution mode
• Sketch silently
• Sketch as much as possible, as many different ideas as possible
• Incorporate what you just learnt

60. Post workshop
• Take pictures of all/prioritised sketches
• Make sure these are available to all the members (wiki/SharePoint/Dropbox…)
• Setup a follow –up meeting to talk next steps
• If there is consensus, wireframe/prototype to move forward
• Usability test with prototypes?

61. In the trenches
Afraid of sketching
Want to talk about only one idea
Dominating personalities
Anything else?

62. Variations of the method
Sketch & Pitch
Sketch in groups of 2/3
Sketch in two groups
Sketch on whiteboards

63. Wrap up!
Plusses
Deltas