User-centered design (UCD) is a design philosophy that focuses on the needs of users throughout the design process. The document discusses the key steps in UCD, which include defining the project and users, creating concepts, designing visual solutions, development, and deployment. It emphasizes early and continuous user research methods like interviews and usability testing to help ensure designs meet user needs.

1. User-Centered Design
A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o
u s e r - c e n t e r e d d e s i g n .

2. Designer’s are crazy

4. We are particular about type
My favorite font!

5. Stretched type is not fun
A kitten dies every time this happens – but it’s still not ok

6. What’s wrong here?
Sounds…awkward? Kerning matters!

7. Programmers
are crazy too

8. No matter what:
The previous guys
code is crap.

9. JavaScript sucks…ex:
Every script is executed in a
single global namespace that
is accessible in browsers with
the window object.

10. Interactive designers
are no different

11. Save the floppy disk

12. Buttons vs links
Good:
Bad:
Sample debate: http://www.ixda.org/node/15621

13. Should designers
learn to code?
011110010110010101110011

14. It’s not crazy…
it’s passion

15. Are you this
enthusiastic about
Interactive Design?
I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u
a c h i e v e h e b e s t r e s u l t s p o s s i b l e .

16. Hello, I’m Patrick
A n d I h a v e a n o b s e s s i o n wi t h t h e we b

17. About me
I teach at the Univ. of Missouri St. Louis
About 15 years in the web industry
Started in tech – shifted to design – and back again

18. Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com

19. Today's agenda
1. An overview of the User-Centered Design
Process (90 min)
2. Deep dives into key topics (70 min)

20. PDF download
at the end
Got links?

21. I loathe bulleted
presentations…
Warning, impending hypocrisy

22. This is the tip of the iceberg
Caution,

23. The User-Centered
Design Process
Part 1:

24. Backgrounds
The background of UX professionals

25. Your backgrounds
From the pre-conference survey:
A previous group:

26. User-centered design (UCD) is a
design philosophy that puts the
user of a product, application, or
experience, at the center of the
design process.

27. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

28. Sure seems reasonable

29. Peeling potatoes
vs

30. users
define
concept
designdevelop
deploy
UCD Process overview
UCD is a state of mind & it is not a one man show
Start here…

31. UCD Step 1:
Defining the project
users
define
concept
designdevelop
deploy

32. Define the scale
• Replacement or brand new product
• Update to an existing product

33. Documentation
Many options to select from

34. Define basic requirements
• What should it do (features, functionality, what
it does etc)? Or what are we working on?
• How will we measure our success?
• Incremental changes in revenue (direct or indirect)
• Customer leads or other activity
• What are the environmental factors (physical
& technical)?
• Who is the user (demographics, skill level,
frequency of use & physical)?

35. Generate documentation
Site maps – defines
the sites content and
information
architecture
Information
Architecture (IA) is
an entire field of work
Awesome resource:
http://iainstitute.org/en/learn/
Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

36. Sitemap tools – text editor
Sitemaps can be simple outlines and
remind us that the purpose is more
important than the tool.

37. Flowcharts
Sometimes the flow
is more important
than a chart of all the
pages.
Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience

38. Generate documentation
• Activity diagrams – Flowcharts showing how a process will work
Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

39. Generate documentation
Content Inventories:
A catalog of an entire
websites content.
1.Title/logo
2.Input field labels
3.Remember me
4.Login button
5.Lost password link

40. Content inventories
Learn more:
Responsive Design
Workflow
by Stephen Hay

41. Site planning answers
the question:
What am I designing?

42. User research happens
in concert with the
fundamental project
definition

43. Documenting users
• Write personas – A rich description of typical users
• http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
• Write use case scenarios – Written descriptions of
how a product will be used describing common
scenarios
• http://www.gatherspace.com/static/use_case_example.html

44. Methods for researching users
• Interviews (great for exploring ideas) (requirements)
• Questionnaires / surveys (a great preliminary tool) (requirements)
• Focus groups (basically group interviews) (requirements)
• Direct observation (observe users completing a task) (flowchart)
• Card sorts (to discover how users view the content) (sitemaps)

45. As a result we have:
• A clear description of the project
• A plan for what we are building
• A detailed understanding of the user
• Vision for how the product will be used
• Best of all, tangible assets the team can share

46. Learn more
If you would like to learn more about this phase:
Learn to make:
• Personas
• Concept models
• Site maps
• Flowcharts
• Wireframes
• Design Briefs
• Usability plans
• Usability reports

47. UCD boils down to
seeking meaningful
design insights over
random acts of design

48. In the Define phase we
include the user by
inquiring of them

49. Activity time

50. Our product:
A new tool to help
holiday shoppers
stay organized,
find gift ideas &
score the best deals

51. Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals

52. Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals

53. Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals

54. Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals

55. Share some results

56. My results:
1) The list repeats itself every year
2) Zero carry over year to year
3) Thoughtfulness over price tag

57. User research isn’t as
hard as it might sound

58. UCD Step 2:
Create concepts
users
define
concept
designdevelop
deploy

59. Developing concepts includes
• Interpret the documentation to develop possible solutions
• Shift from listening to problem solving
• Build wireframes and prototypes
• User testing

60. Wireframes
A schematic or blueprint that
represents the structure of a website.
Wireframes are nonfunctional, static
image.
Start with low-fidelity. Less detail and
quick to produce. Move towards higher
fidelity as you shape and improve it.
Work from the documentation project
requirements and research from step 1!

61. Prototypes
Creating the illusion of functionality
They don’t need to be complete and typically only
simulate a small set of features in an interface
Allows you to test out how an interface flows from
screen to screen
Can start as paper prototypes and move up to full
functional high-fidelity prototypes

62. Workflow
A note on:

63. Iterations are the key
Wireframe
something
Visual
design
Test with a
prototype
Discover
something

64. Lean on your user insights
and work magic
Beautiful, unicorn magic

65. Video time
Source: http://www.youtube.com/watch?v=9wQkLthhHKA
Usability test with a paper prototype

66. Observations
• You DO NOT need a finished app to test!
• It takes practice
• Focus on the user experience of the app and not technical or
secondary issues – it is about the essence of the app
• Paper prototype allows to accommodate the unexpected
• You could quickly change it and test with a new subject
• He isn’t trying to get her to do what he wants and prove his
design is right – genuine interest in improving

67. More on usability
testing in the
second half.

68. In the Concept phase
we include the user via
Exploratory based
usability tests

69. UCD Step 3:
Design visual solutions
users
define
design
concept
develop
deploy

70. Design the interface
using the blueprints
Finally,

71. So much more than
a suggestion
Wireframes,

72. Sample wireframe
http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB

73. Sample wireframe
http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB

74. Be an interior designer

75. Style Tiles
A stepping stone towards the full design:
Minimize the radical leap from idea to visual design:

76. A design deliverable
consisting of fonts,
colors and interface
elements that
communicate the
essence of a visual
brand for the web.
Style tiles:

78. Establish the visual
voice before
committing to a full
blown design
Style tiles:

79. An iterative tool for
visual design
Style tiles:

80. UI Design tools
http://www.adobe.com/products/photoshop.html
http://html.adobe.com/edge/reflow/

81. UI Design tools
http://macaw.co/
http://www.bohemiancoding.com/sketch/

82. UI Design tools

83. UI Design tools
Question:
What is your primary tool for designing websites (the actual look and feel of the interface)?
Out of 274 respondents
22%
53%
18%

84. In the Design phase we
include the user via
assessment based
usability test

85. UCD Step 4:
Development
users
define
develop design
concept
deploy

86. Documentation
can really pay off
This is when all that

87. Toss it over the fence
and forget about it
You do not get to

88. In the Develop phase
we include the user via
Validation based
usability test

89. UCD Step 5:
Deploy into the wild
users
define
deploy
designdevelop
concept

90. In the Deploy phase we
include the user by
measuring the use
of the product

91. The foundation
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

92. Google Analytics
Who
What
When
From
Events
Goals
Conversions
And much more
http://www.google.com/analytics/

93. Crazy Egg
http://www.crazyegg.com/

94. Inspectlet
http://www.inspectlet.com/

95. The definition of the
next project
Ideas and insights from here become

96. User Centered Design
users
define
designdevelop
deploy concept
UX Designers &
Information
Architects
UI Designers
Front end dev’s &
programmers
SEO and web
optimization folks
Interaction
Designers
(IxD)

97. x
x
Did you notice
something missing?

98. Do you like to read?

99. Sources
Books referenced in this presentation & others I recommend:

100. Take 10 minutes…
Break time
Come back for some free books

101. Thank you for
completing the survey!

102. Deep dives
Part 2:

103. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

104. users
UCD Recap
Because it is a lot to absorb:

105. Part 2 Outline
What we will cover:
1.Interviews & Surveys
2.Wireframes & prototypes
3.Usability testing

106. Interviewing users
A b r i e f g u i d e

107. Interviews will
humanize your
apps problems

108. Interviews almost
always lead to
ideas, solutions and
features that you had
not thought of.

109. Tips for
interviewing users

110. 1) Interviewing is not
selling – don’t defend
your app – ask more
questions

111. “Why is that feature
important to you?”
“Describe what you
wanted to happen”

112. 2) Get actual users –
not just your office
neighbor

113. 3) Don’t ask
hypothetical questions

114. 4) Embrace awkward
silence

115. 5) Shut up – it’s not a
conversation

116. After a round of
interviews, use a
survey to validate
the results

117. Survey tips
Simple tips for a good survey:
• Know what you want to learn
• Write questions that everyone:
• will interpret the same way (ex: avoid “do you frequently do x”)
• can answer accurately
• Avoid leading questions:
• Do you agree with most people that Windows 8 is terrible?
• Do not make people predict their own behavior
• Have follow up questions!!!

118. Wireframes & Prototypes
A b r i e f g u i d e

119. Finding problems early
1x cost to change during requirements / design
5x cost to change during development
25x cost to change during formal testing
100x cost to change in production
You can’t afford not to do it.
Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other
organizations have found that purging an error by the beginning of construction
allows rework to be done 10 to 100 times less expensively than when it’s done in
the last part of the process, during system test or after release.
(Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).

120. Elements of Wireframes
Wireframes address three core elements
1) Information design – the placement
and prioritization of the layout. Very
inline with graphic design.
2) Navigation design – the location and
structure of the navigation systems.
3) Interface design – expose the
features that the app offers. What does
it do? How does the structure expose
this to users?

121. Wireframing tools

122. Wireframing tools
http://inspirationhut.net/printable-paper/

123. Wireframing tools
http://www.interfacesketch.com/

124. Wireframing tools
http://www.uistencils.com/

125. My kit

126. Wireframing tools
Many people also frequently use the following to wireframe:
InDesign, PowerPoint, Keynote, Visio & HTML

127. Wireframing methods

128. Wireframing: move fast
• Sketch 6 to 8 thumbnail sketches in 5 minutes
• Asses the results
• Take a break
• Rinse and repeat
• Identify a solid solution – flush out variants on that idea
• Move up to larger sketches
• Rapidly iterate on variations of your favorite thumbnail
• Slowly move towards a more refined result
(lookup Prototyping by Todd Zaki Warfel)

129. Wireframes should
be iterative

130. From wireframe to
prototype

131. Tools for prototyping
Many people also frequently use the following to prototype:
InDesign, PowerPoint, Keynote, Visio & HTML

132. Demo PDF prototype
Demo Axure prototype

133. Specialized tools
https://fluidui.com/ (Is it a wireframe or a prototype? )

134. Specialized tools
https://fluidui.com/ (Is it a wireframe or a prototype? )

135. Consider your workflow
Again,

136. Not every prototype is
made for the same
purpose

137. The 5 types of
prototypes

138. Type 1:
To unify groups
of people
(often diverse people)

139. Type 2:
To work through ideas

140. Type 3:
Get buy in to the idea
of UX design practices

141. Type 4:
For usability testing

142. Type 5:
Is it technically
possible?

143. Build only what
you need

144. Prototype formats
• Digital prototypes
• Paper Prototypes
• Storyboards
• Video based

145. Activity time

146. Our product:
A mobile weather
application…
with a twist

147. Why do you check the weather?
• What to wear?
• Type of hat to wear
• Type of shoes to wear
• Type of jacket/coat
• Bring an umbrella?
• Drive the convertible?
• Bike or bus?
• Surfing related
• Ski related
• Biking related
• Phases of the moon
• Tide related
• Hunting related
•Tornado watching
• Snow days
• Global warming
related
• Spelunking
• Water the garden?
• Good day for the
beach?
• Leave early for work?
• Monitor weather on a
target date: like a
vacation etc
•Historical weather
patterns for a day in
relation to planning an
event like a wedding
• BBQ weather?
• Planning to view
changing leaves or any
other seasonal event

148. What does this do?
Test on at least 3 users in each round.
5 second test:

149. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app

150. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app

151. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app

152. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app

153. Testing designs
can be easy.
&
Wireframes can be
packed with meaning.

154. Usability testing
A n e x t r e m e l y b r i e f i n t r o d u c t i o n .

155. What is usability?
• In essence, how easy it is to use an interface
• Good usability = easy to use = positive user experience
• Poor usability = hard to use = negative user experience
• Attributes that describe the usability of a design:
• Usefulness
• Efficiency
• Effectiveness
• Learnability
• Satisfaction
• Accessibility

156. What we are looking for:
• Usefulness – Does it do what users need and want?
• Efficiency – Does it perform its tasks efficiently?
• Effectiveness – Does it perform its tasks the way it is intended to?
• Learnability – Is it easy to learn use the interface?
• Satisfaction – Does the user enjoy using it?
• Accessibility – Is the product usable by those with disabilities?

157. Is this usable?

158. We can craft the
usability as a way to
influence the user
experience

159. Accessibility: What’s
good for a few, is often
good for everyone.

160. Usability testing is our
attempt to answer
these questions –
is it usable?

161. Nano Tests
T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y
t e s t i n g .

162. Nano-usability tests as
described in
Observing the User
Experience
What we are going to do:

163. Bite sized guerilla
usability testing
designed to get you
started in 5 minutes.
Nano-usability testing

164. Nano-usability testing
Our simple process:
1. Find one person who cares about your product.
It doesn’t matter who. Seriously, anyone.
2. Arrange to watch them use the product. (in person)
3. Ask them to use the product to do something. Any function of
the application. (I suggest you focus on the core feature)
4. Watch them do it. Keep your mouth shut. Just watch.
5. Ask yourself: what did I learn?

165. Keep your mouth shut.
Did I mention,

166. You want to learn what
is wrong. You are not
trying to defend
your creation.
Remember,

167. Five users will find
80% of the problems
(typically)

168. Many small tests,
not one big test.
Goal:

169. There is much more to
usability testing. But
this is a totally legit
way to start.
Naturally,

170. Beyond digital interfaces
T h i s m o d e l wo r k s i n m a n y s c e n a r i o s

171. Presentation
Planning a

172. New business
Starting a

173. Wrapping up
We a r e a l m o s t d o n e !

174. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design

175. users
UCD Recap

176. Get a PDF of this
presentation: pmcneil.com
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com

177. 1) Mini Brochure Site
The good old content driven brochure style website.
Assuming responsive web design is required.
Involving users on this type of project feels hard at first.
Investigate the user
•Interview users
•Use analytics
Content Inventory Sitemap
Wireframes Style Tile UI Design
5 Second tests Development Measure the results

178. 2) New iPhone app
Interview
users
Survey users Flowchart Wireframes
Prototype
Usability
testing
Style Tile UI Design
Usability
testing
Development
Usability
testing