Design Studios are a popular method for getting product teams together to focus on design. Design Studios are more than just getting people together to sketch and critique. In this workshop, Brian Sullivan, author of The Design Studio Method: Creative Problem Solving with UX Sketching, will share his secrets to planning, running, and leading successful Design Studios In this workshop, you will learn: Ways to creative and evaluate sketches quickly See different tools to get you started The 9 Steps of a Design Studio Stories of success and failure in Design Studio How to deal with difficult people/strong personalities We will have plenty of time for your burning questions, too.

1. Confidential
Designing a Better
Design Studio
@BrianKSullivan
@bigdesign
#studio

2. 2Confidential
Creative and EvaluativeSides of Your Brain

3. 3Confidential
Simple Definition= Generate and EvaluateSketches *
* Design Studios arenotsimple.

4. 4Confidential
Politics

5. 5Confidential
Hidden Agendas

6. 6Confidential
Confusion

7. 7Confidential
Controlling

8. 8Confidential
1. Sketching
2. Storytelling
3. Critiquing
4. Presenting
5. Facilitating Jared Spool (2010)
Master UX Designers Do Five Things Well:
For practicing UX Designers, one of the most important Sturgeon's Law, which
tells us that 99% of everything is crap. It's easy to produce a poor quality
result. Master UX Designers disciplines within the UX world—interaction
design, information architecture, user research, copywriting, and visual design.
They had these five things in common:
Sketching, Storytelling, Critiquing, Presenting, and Facilitating

9. 9Confidential

10. 10Confidential
“But, Brian I can’t draw!”

11. 11Confidential

12. 12Confidential
Taking notes? Try this!

13. 13Confidential
Why dowe sketch?
1. To Communicate an Idea:
“Here’s what I’m trying to tell you…”
2. To Record What We’re Seeing and Hearing:
“This is what I want to remember…”
3. To Work Through Some Thinking:
“What will this look like?”
4. To Document:
“Here’s what we’ve ended up with”

14. 14Confidential
Basics of
Sketching

15. 15Confidential
“There is no substitute for
good drawing.”
- Walt Stanchfield

16. 16Confidential
Walt Stanchfield (1919 – 2000)
FILMCREDITS:
• The Jungle Book
• The Aristocats
• The Great Mouse Detective
• Who Framed Roger Rabbit
STUDENTS:
• Brad Bird
• John Lasseter
• Don Bluth
• Glen Keane

17. 17Confidential

18. 18Confidential
Let’s keep it simple!

19. 19Confidential
Exercise #1
Let’s dot the “eyes”!

20. 20Confidential

21. 21Confidential

22. 22Confidential
“We learndrawing by studying parts; we practice drawing
by assemblingthose parts into a meaningfulwhole.”
- Walt Stanchfield

23. 23Confidential
SIMPLESHAPES

24. 24Confidential
Simple Shapes in FamiliarObjects
• Identify objects or parts of object

25. 25Confidential
SIMPLESHAPES: EVOKEEMOTIONS

26. 26Confidential
Simple Shapes in UX Wireframes
• Wireframes are mostly squares, circles, and lines.

27. 27Confidential
Simple Shapes Can Make Complex
Objects
• Identify objects or parts of object

28. 28Confidential
Simple Rules of Perspective

29. 29Confidential
We’llStick to SimpleUX Designs

30. 30Confidential
Exercise #2
Let’s Get Hands On!

31. 31Confidential
Another Exampleof a UX Wireframe

32. 32Confidential
Use Some UX Sketch Paper

33. 33Confidential
Setting the Scene
Jared Spool
The $300,000,000 Fix (per Jared Spool):
In the above example, we have a form with two fields,
two buttons, and one link. This form appeared on the
bottom of a Shopping Cart. What are the problems?
Hint: Current and New Customers both had problems.

34. 34Confidential
New Customers:
New customers did not want to register. They resisted clicking the Register
button. New customers wanted to buy what was in their shopping cart.
They did not want a relationship. Most wanted to leave. As it turns out,
customers are not required to register—it is optional.
New Customers Struggled

35. 35Confidential
ExistingCustomers Struggled
Existing Customers:
Existing customers couldn’t remember their exact email and/or password.
They clicked the “Forgot Password” link. Help Desk logs revealed this link
was clicked about 167,000 each day! According to Spool, 75% of these
people didn’t make a purchase. They did leave!

36. 36Confidential
Sketch YourSolution….5 Minutes!!!

37. 37Confidential
Jared Spool
$300,000,000 Fix:
Make it obvious. The results:
- The number of customers purchasing went up by 45%.
- Extra purchases resulted in 15 million the first month.
- In the first year, there was additional $300 million.
The ActualSolution….MakeIt a Checkout Button

38. 38Confidential
Evolutionof the CheckoutButton at Amazon

39. 39Confidential
Customer Widget to Checkout Button toShopping
Cart

40. 40Confidential
Critiquing Best Practices

41. 41Confidential
Simon CriticizesEarly,He CritiquesLater

42. 42Confidential
Criticismversus Critique
Criticism Critique
Finds Fault Determines Design Intent
Looks for Problems Looks for What Works and Doesn't Work
Condemns What It Doesn't Understand Asks for Clarification
Can Be Abrasive Is Honest and Objective
Is Usually Negative Is Positive Even About What Isn't Working
Is General and Vague Is Concrete and Specific
Is Opinionated Is Collaborative

43. 43Confidential
A UX Critique is a method for evaluating design concepts against
design principles and the collective experience of the participants.
- It’s not a brainstorming session.
- It doesn’t evaluate engineering feasibility.
- It is part Heuristic Inspection and part Art School Critique.
What’s a UX Critique?
UX Critique = Heuristic Inspection + Art School Critique

44. 44Confidential
• A UX Critique differs from a Design Review.
- Design Reviews: peer-based (not part of the delivery team)
- UX Critiques: stakeholder-based (people who implement a design)
• Both groups are important reviewers, but their purposes entirely distinct.
UX Critiqueis Not a Design Review!
DBA,TRAINER, MARKETER, WRITER, QA,
ANALYST, DEVELOPER, SUPPORT,
STRATEGIST, SALES,CEO……………….
VS

45. 45Confidential
• Invite 5 or 6 people to the UX Critique
- You need open, honest feedback
- Consider the most critical people only
• You can’t be informal with 7+ people
- You can send email after the meeting
- Schedules are a great excuse
• Don’t worry about job titles or hierarchy
- Moving the design forward is the goal
- Don’t play office politics here
Who’s in theRoom?
The right people are critical to success.

46. 46Confidential
• Handouts. Each person gets a copy to
enter questions and comments. Sketches
can be used, but Marketers may see the
low-fidelity sketch as low quality idea.
• Hang Pictures on Wall. You can easily
compare different ideas, review branding,
and see inconsistencies this way. Use
post-it notes for questions and comments.
• Project on a Wall. If you have prototype,
demo it. Project on a whiteboard, where
people can make comments and questions.
Take a picture to capture the feedback.
Ways to ShowYour Designs
Pick the right room! We recommend a small conference room with
whiteboards. You may need to have a War Room for long projects.
The environment puts people at ease.

47. 47Confidential
• Moderator. Facilitates the Critique. Ensures
everyone is focused, on-track, and on-
schedule.
• Designer. Presents their work and answers
questions. They must be impartial participant
(like it is someone else’s work). They work
with (not against) reviewers.
• Scribe. Takes notes for the Designer and
socializes the feedback to the larger team.
• Reviewer. Critiques designs with thought
provoking questions. Avoids opinions.
Roles ina UX Critique
The best piece of feedback is not feedback at all, but
a questions that prompts the Designer to think!
Each person plays a specific role.

48. 48Confidential
• Design Intent. You start by exploring the
problem(s) the Designer is trying to solve.
- What problem is the design addressing?
- Is this the essence of the problem?
- What if the problem is worded differently?
• Design Execution. Any design addresses a
problem by its form and function.
What are weCritiquing?
Formal Elements Functional Elements
- Color - Efficiency
- Typography - Effectiveness
- Layout - Discoverability
- UI Text - Readability
- Iconography - Findability
- Transitions - Navigation

49. 49Confidential
• What are the user scenarios the site or app is designed for? Can you
walkthrough through how each design would enable those scenarios?
• What known usability / design / business issues are these sketches
trying to solve?
• What is the intended style of the design, and is it appropriate for the
target audience?
• What is the intention of the style, and does it achieve the desired effect?
• Are there standard brand elements that should be used, and are they
used appropriately?
• Are there similar software products or features that these designs
should relate to?
• What usability heuristics does each design support well? (or not?)
Questions You Might Hear orAsk…

50. 50Confidential
• Where in the design are the most likely places for users to have
trouble? and why?
• Are there reasonable design changes that might avoid these problem
points?
• Does each design idea take advantage of things the user might already
have learned?
• What are the pros and cons of each design idea, relative to each other?
• Are there any hybrid design ideas that are worth exploring, based on the
designs in the room?
• What open issues might best be resolved by a usability study or other
research?
More Questions You Might Hear orAsk…

51. 51Confidential
Exercise #3
Critiquing

52. 52Confidential
Let’s CritiqueThis Page…..
Some Background:
This sketch was actually created for a
project that I worked on five years ago.
It is an Air Availability page, which appears
after you do a search for flights.
We were trying to solve the problem of
unused air tickets for companies.
How would you critique this page?

53. 53Confidential
What’s YourImmediateResponse?
• What is your first reaction to what you see?
(could be positive or negative)
• What did you notice first?
• Where have you seen something like this
before? Was that successful?
• What stands out to you? How could this
affect users?

54. 54Confidential
Describe WhatYou See Here…
• What do you think see initially?
• What do you think customers will see?

55. 55Confidential
What about Form and Function?
• How are the form factors of this design:
- Color
- Typography
- Layout
- UI Text
- Iconography
- Transitions
• How are the functions of this design:
- Efficiency
- Effectiveness
- Discoverability
- Readability
- Findability
- Navigation

56. 56Confidential
What about Consistency?
• Is the design consistent with other areas of
the product?
• What about other products (web, phone,
tablet, kiosk)?
• Is there deliberate inconsistency? Why?
• What about other products within the
overall portfolio (i.e.branding)?

57. 57Confidential
WhereCritiques Fit In YourDesign Process?
Internal
Design
Review
UX Critique
or
Design Studio
Heuristic
Inspection
(3rd Party)
Use the critique guidelines here in other meetings.
Each UX critiquing checkpoint is more formal than the last one.
• Peer Designers
• Style Guides
• Consistency
• Opportunity Finding
• Project Stakeholders
• Form and Function
• Branding and Product Portfolio
• Solution Finding
• Usability Professionals
• Design Guidelines
• Expert Review
• Cognitive Walkthrough

58. 58Confidential
Design Studio:
Sketching & Critiquing

59. 59Confidential
1. Sketching
2. Storytelling
3. Critiquing
4. Presenting
5. Facilitating Jared Spool (2010)
Design Studios Use Your Master UX Skills
Do you remember this slide from earlier?

60. 60Confidential
What is a Design Studio Session?
• Designers express and explore
ideas, generate, and evaluate
alternatives to ultimately make
decisions and take action.
• Artists, industrial designers,
graphic designers, and architects
use Design Studio sessions.
• Used to: brainstorm, refine, and
share ideas, build design skills.
• Main purpose is to saturate the
design space with possibilities,
which can be refined.
Original Sketch for Flckr
Design Studios Overview

61. 61Confidential
Sketch for Word Processor Program
for One Laptop Per Child
Two excellent sources for design thinking are Bill Buxton’s Sketching the
User Experience and Edward De Bono’s Six Thinking Hats.
- Buxton’s book tells of different ways to perform Design Studio projects
- De Bono’s “Thinking Hats” helps to control the conversation
Sources for a Design Studio

62. 62Confidential
Project Timeline
Buxton talks about
a Design Funnel in
the SDLC, where
the opportunity to
saturate the design
space with ideas
occurs very early.
The design space
is limited (or goes
into a funnel) as
projects move in
the timeline.
BillBuxton’sDesign Funnel

63. 63Confidential
Buxton explains that
opportunities to
saturate the design
space decrease, as
convergence occurs.
Concept generation
narrows the further
you move into the
SDLC, but there are
still opportunities.
Coding limits the
design opportunities.
Sketch Early,Prototype Later

64. 64Confidential
Source: Bill Buxton’s “Sketching the User Experience”
Why Sketches?
• Worth a 1,000 words
• Disposable
• Quick
• Cheap
• No special skills needed
• No coding needed
The goal is to saturate the
design space with ideas…
Why Use Sketches ina Design Studio?

65. 65Confidential
• Participants produce several rough sketches
• Discuss and critique the sketches
• Merge ideas into one design concept
Design Studios Saturate the Design Space

66. 66Confidential
What Makes
a GoodSketch?

67. 67Confidential
• You’re making a rough sketch—Use pen & paper, and colored markers.
Don’t use a computer.
• Use large paper and use the whole page—Write BIG. Draw BIG. Only
use fat-nib markers so a roomful of people can see the idea when you
present it.
• “Good enough” is good enough—You’re making a rough sketch.
• Use only enough detail to communicate your main idea.
• Only ONE idea per sketch.
• ANY idea—even crazy or expensive ideas—are OK. Don’t judge your
ideas now, just get five on paper.
• Remember: QUANTITY breeds QUALITY.
How to Do a GoodSketch?

68. 68Confidential
One Idea Per Page (Screen, Flow, etc.)

69. 69Confidential
Don’t Worry Too MuchAbout Details

70. 70Confidential
Sketch EnoughDetails to Convey Your Idea

71. 71Confidential
You Can AlwaysStart Over

72. 72Confidential
Use Arrows and Annotations

73. 73Confidential
Provide a Title and BriefDescription

74. 74Confidential
• Add LABELS and arrows that identify the actions and the results.
Number the labels and responses.
• Always write labels in red, and use red only for labels. (Text in the
GUI and title bars is not a label.)
• Add a SKETCH TITLE to help communicate the idea and to help
people remember what it’s about later on.
• Be able to take about 20 seconds to talk about your sketch.
(Don’t worry—it’s enough time. Remember, a picture is “worth a
thousand words”.)
What Makes aPresentable Sketch?

75. 75Confidential
What Makes a Good
Design Studio?

76. 76Confidential
• Do your sketches separately from others on the team.
• Expect to spend 2-4 minutes on each sketch, but don’t expect to do all
your sketches in one sitting.
• FIVE substantially different ideas—five sketches—for each solution.
We need to get out of the common response zone, so five unique
sketches, or else (FUSE).
• Don’t be discouraged if you feel uncomfortable when it’s harder to come
up with sketches after doing your third one. This is “the sticking point.”
Hang in there! Your really creative ideas need a bit more time to come
to the surface. They will come. Talk to other people who’ve done
sketching sessions about their experience.
• QUANTITY breeds QUALITY. We are saturating the design space.
Before You Come to a Design Studio

77. 77Confidential
• You must come with five sketches, or else:
- We are wasting our time.
- We are staying in the common response zone.
- We are not saturating the design space.
• The sketches must be unique, or else:
- You are iterating the same basic idea.
- You risk getting committed to one idea.
- You are still in the common response zone.
Five Sketches, orElse (FUSE)

78. 78Confidential
• De Bono’s Six Hats help team
members think about a problem
in the same way at the same
time, and in a specific
progression.
• This allows the team to
complete each step more
quickly, and it ensures that all
essential details get covered.
• The hats are ordered in a
specific way, so we all think
about the designs from various
perspectives.
SixThinkingHats = CommunicationMethod

79. 79Confidential

80. 80Confidential

81. 81Confidential
• Blue hat: Process (meta-talking). Useful to guide and
focus the group.
• For example: “Now let’s think of yellow-hat thoughts
about this idea” moves the group to the next step, and
“Can you hold that thought? We’ll look at grey-hat thoughts
later” postpones a comment to the right time.
• Things You Might Hear:
- What have we done so far?
- What decision have we reached?
- What do we do next?
- Let’s where a different hat for the next few minutes.
- Let’s summarize what we have learned.
BlueHat: Process, Organizing

82. 82Confidential
• White hat: Factual (state the facts). Seeking
objective information, without opinions.
• Things you might hear:
- What do we know?
- What don’t we know?
- What information is missing?
- What questions do we need to ask?
- How will we get the information we need?
WhiteHat: Factual,Neutral

83. 83Confidential
• Green hat: Creative (ideation). For each
problem, sketch five substantially different ideas.
• During green-hat thinking, do not analyze or
judge the ideas; reject nothing; all ideas are
acceptable, even “silly” or “impossible” ones.
• After presenting your sketches to the other
design participants, mash up—or re-sketch—to
add something new and something borrowed.
• Re-sketch one of your sketches, and present it.
Re-sketch one of someone else’s sketches, and
present it.
• Next, synthesize everything you’ve seen into a
few sketches. Present those, and then apply the
next two hats to them.
Rules of Creativity:
1. Defer Judgment
2. Strive for Quantity
3. Freewheel
4. Piggyback
Green Hat: Creative, Generative

84. 84Confidential

85. 85Confidential

86. 86Confidential

87. 87Confidential
• Yellow hat: Positive. What are the
reasons that a green-hat idea may
work?
• Analyze all sketches together, but
ask participants to comment on each
sketch in turn, so that one sketch
never gets two comments in
succession.
• Ask participants to start each
comment with the words “This idea
may succeed because….”
• This allows you to probe for value
and benefit of potential ideas.
Things You Might Ask/Hear:
• What are the good points?
• What are the benefits?
• How will it help us?
• Why can it be done?
• Why is this worth doing?
YellowHat: Positive, Sunny

88. 88Confidential
• Black hat: Critical. What are the reasons that a green-hat idea
may not work?
• Analyze all sketches together, but ask participants to comment
on each sketch in turn, so that one sketch never gets two
comments in succession.
• Require participants to start each comment with “This idea may
not succeed because….”
• This is a good time for a usability expert to identify unusable
features in all sketches.
• If participants get defensive about a comment, refocus them on
black-hat thinking (defensive remarks are often yellow-hat), and
remind them that one sketch never gets two comments in
succession. Follow the black-hat thinking by another round of
yellow-hat thinking.
• After the analysis (yellow- and black-hat thinking), do a further
round of green-hat thinking.
• Use this round of green-hat thinking to address the grey-hat
and yellow-hat thoughts.
BlackHat: Cautious, Critical

89. 89Confidential
• Red hat: Decision. Decision-making based on
everything you’ve experienced, based on
what you think and feel, using your judgment
and opinions.
• No consensus? You may need to follow the
process for another round, starting with
white-hat thinking. Although frustrating,
sketching is cheaper than having a developer
code and then discard (or worse—not discard)
a poor design.
• Things You Might Hear:
- I feel like this idea has potential.
- I feel like this idea is very unusual.
- How do I feel about this idea right now?
• NOTE: Everyone feels something, even
neutrality or apathy.
Your Feelings Could Be:
• Neutral
• Undecided
• Confused
• Doubtful
• Mixed
RedHat: Emotional, Intuitive Decisions (Voting)

90. 90Confidential

91. 91Confidential
CaseStudy:
Unused e-Tickets

92. 92Confidential
• Before the Design Studio Session, we
put on our White Hat to determine
design space:
- Two pages identified—Home
and Air Availability pages.
- High-level use cases were in the
Business Requirements Document.
- Affected user personas are
Traveler and Travel Arranger.
• Participants were asked to create five
unique designs for the Home and Air
Availability pages only. BRD delivered day before Design Studio.
WhiteHat: Understanda Design Space

93. 93Confidential
Green Hat: SketchSeparately

94. 94Confidential
• Before looking at any of the
sketches, we asked the
following question:
“What were your sticking points
as you sketched?”
• The answers were similar:
- Getting to the 5th idea
- Screen real estate
- Considering current state
- Thinking about the future
- General fear (of rejection)
For Your Consideration:
Ideas and thoughts are exposed in
Design Studios, so people can feel
nervous. Acknowledging the
emotions helps us to move forward.
It helps to know that other people
has the same sticking points, too.
BlueHat: StickingPoints?

95. 95Confidential
Green Hat: Saturate the Design Space

96. 96Confidential
• For the Air Availability pages,
we clustered the designs that
were similar to make them
easier to analyze.
• Three predominant page
designs emerged from the
Design Studio session.
• We still reviewed all of the
pages using the Yellow Hat
(positive) and the Black Hat
(critical). Three pre-dominate designs emerged.
BlueHat: Cluster SimilarPatterns

97. 97Confidential
YellowHat: Positive, Sunny

98. 98Confidential
BlackHat: Critical,Cautious

99. 99Confidential
RedHat: Emotional,IntuitiveDecision

100. 100Confidential
Green Hat: Re-sketchthe Widget

101. 101Confidential
And the winner is…..
RedHat: DecisionPoint (4 of 4 Pick)

102. 102Confidential
• 4 Sketchers/1 Facilitator
• 20 Original Sketches
• 40 Positive Comments
• 40 Critical Comments
• 3 Basic Page Designs Emerge
• 4 Designs go to 2nd Round
• Iterate on 2 of 3 Page Designs
• 4 New Designs for 2nd Round
• 1 Design Voted on 4-4
• 2 Hours to Complete
Final sketch mashes up ideas from all participants.
BlueHat: Debrief

103. 103Confidential
• Using Final Sketch, a designer
can turn the initial drawing into
a JPG rendering.
• Key things to note here:
- About 2 hours to sketch
- About 2 hours to render JPG
- Further down Design Funnel
Green Hat: Refine the Sketch into aJPG

104. 104Confidential
Design Studio:
Another Case Study

105. Confidential
HMS Design Studio
August 2013

106. 106Confidential
Hospitality Management Solutions Case Study
Hospitality Solutions did a 5-day Design Studio for their Front Office product,
which is a 10-year old product used by a hotel’s front desk agents to check in
guests, schedule catering, manage housekeepers, and more.

107. Confidential
Front Desk
Home Page Snapshots | August 2013

108. 108Confidential
Current Front Office Module
108

109. 109Confidential
Hotel Log and Stats give a snapshot for front desk users

110. 110Confidential
Opens on the Guest tab with the ability to quickly search for guests

111. 111Confidential
Reservations Area shows existing customers and ability to create new reservations

112. 112Confidential
In House/Departing Area shows these types of customers with access to more info.

113. 113Confidential
Customers can create quick links in the Favorites. Here is an example.

114. 114Confidential
CLICK

115. 115Confidential

116. 116Confidential
CLICK
Preferences allow an option to select the elements displayed on the page

117. 117Confidential

118. 118Confidential
Home page changes based upon user preferences.

119. Confidential
Housekeeping Tab

120. 120Confidential
Log and Stats give a snapshot for managers and front desk users

121. 121Confidential
Progress Indicator to show current status of housekeeping for the property.

122. 122Confidential
“On the Books” shows the projected status of the rooms for housekeeping.

123. 123Confidential
“Assignment Board” provides a way to generate housekeeping assignments.

124. 124Confidential
Current Room Board

125. 125Confidential
Housekeeping Board shows warning for rooms with an unassigned housekeeper

126. 126Confidential
126
CLICK

127. 127Confidential
127

128. 128Confidential
128

129. 129Confidential
Housekeeping Board with all fully assigned with a housekeeper

130. 130Confidential
Housekeeping Board shows pop-ups for credits for each housekeeper.

131. 131Confidential
Housekeeping Board shows warning for not enough credits and visual indicators

132. 132Confidential
132

133. 133Confidential
133
Housekeeping Board allows for multiple print options, including Inspection Report

134. 134Confidential
134

135. Confidential
Room Assignments

136. 136Confidential
136

137. 137Confidential
137

138. 138Confidential
138

139. Confidential
Tape Chart

140. 140Confidential
Opera Tape Chart

141. 141Confidential
Current Sabre PMS Tape Chart
141

142. 142Confidential

143. 143Confidential
143

144. 144Confidential
144

145. 145Confidential
145

146. 146Confidential
Design Studio:
Exercise

147. 147Confidential
Need to Developa Widget for a Website

148. 148Confidential
Widget is MainSplash Element of the Page
WIDGET GOES HERE

149. 149Confidential
Create a Widget to Show Light BulbSavings

150. 150Confidential
1. Break into teams of 6 people.
2. Each person creates two sketches – separately.
3. In 30 minutes, meet as a team.
4. Cluster similar design together.
5. Provide two positive comments.
6. Provide two negative comments.
7. Vote.
8. Re-sketch your ideal design.
9. Present to the entire class, and then go home.
Let’s Do a Design Studio!!!

151. 151Confidential
Create a Widget….Based Upon This Information

152. 152Confidential
The FinishedWidget LookedLike This

153. 153Confidential
The FinishedWidget Tested Positively inUsability Surveys

154. 154Confidential
Question and Answer