1. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102

2. UX 102
• Why does User Experience Design exist?
• Information Architecture: it's a big deal
• What is a wireframe and how do I get my
client to understand it?
• Interaction design and how it's different
from visual design
• Usability is good manners
• How does UX work?
Agenda

3. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
Why does User Experience Design exist?

4. We make sure digital stuff works
for the people in front of the interface
User Experience Design

5. We See It Differently

6. We See It Differently
Programming
Data
Hosting
People who make websites

7. Text
Images
Feeds
Videos
Stuff
Games
We See It Differently
Programming
Data
Hosting
People who make websites

8. Interface
Text
Images
Feeds
Videos
Stuff
Games
We See It Differently
Programming
Data
Hosting
People who make websites

9. Interface
People who visit websites
Interface
Text
Images
Feeds
Videos
Stuff
Games
We See It Differently
Programming
Data
Hosting
People who make websites

10. Interface
People who visit websites
Interface
Text
Images
Feeds
Videos
Stuff
Games
We See It Differently
MAGIC
Programming
Data
Hosting
People who make websites

11. Interface
How it should go
Text
Images
Feeds
Videos
Stuff
Games
Interface
Text
Images
Feeds
Videos
Stuff
Games
Building Websites
Programming
Data
Hosting
How it usually goes
Programming
Data
Hosting

12. Interface
How it should go
Text
Images
Feeds
Videos
Stuff
Games
Interface
Text
Images
Feeds
Videos
Stuff
Games
Building Websites
Programming
Data
Hosting
How it usually goes
Programming
Data
Hosting

13. Interface
How it should go
Text
Images
Feeds
Videos
Stuff
Games
Interface
Text
Images
Feeds
Videos
Stuff
Games
Building Websites
Programming
Data
Hosting
How it usually goes
Programming
Data
Hosting

15. THE USER!
YOUare not
(and neither is UX)

16. What do you call the
sweetened carbonated beverage
in this can?

17. Well, most people don’t.

18. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
Information architecture: it’s a big deal

19. The art and science
of organizing and labeling
information
Information Architecture

20. We identify these:
People Content Context

21. Then we map them together

22. Then we map them together
Linear

23. Then we map them together
Linear
Hub and Spoke

24. Then we map them together
Linear
Hub and Spoke
Narrow and Deep

25. Then we map them together
Linear
Hub and Spoke
Wide and Shallow
Narrow and Deep

26. You can’t have navigation without IA

27. You can’t have navigation without IA
People
Content Context
Navigation Design
Sitemap

28. “Information architecture is the stuff
that is never rendered in pixels
and it’s never rendered in code.”
- Dan Klyn,
The Understanding Group

29. Information architecture disasters

30. Information architecture disasters

31. Information architecture disasters

32. Information architecture disasters

33. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
And how do I get my client to understand it?
What’s a wireframe

34. The skeleton of a website
Wireframe

35. Wireframe

36. content priorities
Wireframe

37. content priorities
interactions
Wireframe

38. content priorities
interactions
initial layout
Wireframe

39. content priorities
interactions
initial layout
limited colors +
images
Wireframe

40. content priorities
interactions
initial layout
visual design
limited colors +
images
Wireframe

41. content priorities
interactions
initial layout
visual design
final layout
limited colors +
images
Wireframe

42. content priorities
interactions
initial layout
visual design
final layout
limited colors +
images
filled with
content
Wireframe

43. functional elements
“skeleton”
Wireframe ≠ Visual Design

44. functional elements
“skeleton”
graphical elements
“surface”
Wireframe ≠ Visual Design

45. Wireframes = Prototypes

46. Can’t we just go straight to
visual design?
that sounds expensive.

48. What happens when you skip UX:

49. • critical functional decisions aren’t made
What happens when you skip UX:

50. • critical functional decisions aren’t made
• scope creep
What happens when you skip UX:

51. • critical functional decisions aren’t made
• scope creep
• endless design revisions
What happens when you skip UX:

52. • critical functional decisions aren’t made
• scope creep
• endless design revisions
• which take longer in photoshop
What happens when you skip UX:

53. • critical functional decisions aren’t made
• scope creep
• endless design revisions
• which take longer in photoshop
• endless development revisions
What happens when you skip UX:

54. • critical functional decisions aren’t made
• scope creep
• endless design revisions
• which take longer in photoshop
• endless development revisions
• obliterated budgets
What happens when you skip UX:

55. • critical functional decisions aren’t made
• scope creep
• endless design revisions
• which take longer in photoshop
• endless development revisions
• obliterated budgets
• ux ends up fixing things anyway
What happens when you skip UX:

56. • critical functional decisions aren’t made
• scope creep
• endless design revisions
• which take longer in photoshop
• endless development revisions
• obliterated budgets
• ux ends up fixing things anyway
• clients get mad
What happens when you skip UX:

57. it’s our job to educate our clients.
Wireframes can be hard to understand

58. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
and how it’s different from visual design
Interaction design

59. planning how a person might move through a system
Interaction Design

60. the aesthetic and emotional expression of a brand
Visual Design (@ BR)

61. Interaction Design...
is goal-driven

62. Interaction Design...
1
is goal-driven
2
3
4
5 6

63. Interaction Design...
is goal-driven

64. Interaction Design...
is goal-driven

65. Interaction Design...
is goal-driven
1

66. Interaction Design...
is goal-driven
1
2

67. Interaction Design...
is goal-driven
1
2
3

68. Interaction Design...
is goal-driven
1
2
3
4

69. Interaction Design...
is goal-driven
1
2
3
4
?

70. Interaction Design...
is goal-driven
1
2
3
4
?

71. Interaction Design...
provides affordances

72. Interaction Design...
provides affordances

73. Interaction Design...
provides affordances

74. Interaction Design...
makes things learnable

75. Interaction Design...
makes things learnable
old: tag clouds

76. Interaction Design...
makes things learnable
old: tag clouds new: recommended posts

77. Interaction Design...
makes things learnable

78. Interaction Design...
makes things learnable
NO

79. Interaction Design...
makes things learnable
YESNO

80. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
it’s good manners
Usability

81. A quality attribute used to evaluate
how easy interfaces are to use.
Usability

82. Usability Evaluation
Principles of
Usability
Usability
Recommendations

83. Usability Evaluation
Principles of
Usability
Usability
Recommendations

84. Usability Testing

85. Usability Testing
• always done post-design

86. Usability Testing
• always done post-design
• measures task completion

87. Usability Testing
• always done post-design
• measures task completion
• should be observed, repeatable

88. Usability Testing
• always done post-design
• measures task completion
• should be observed, repeatable
• other kinds of user research
may be done pre-design

89. Usability Testing ≠ Focus Groups

90. Usability Testing ≠ Focus Groups
what people do

91. Usability Testing ≠ Focus Groups
what people do what people say

92. Users are not designers

93. Good Usability

94. makes things discoverable
Good Usability

95. makes things discoverable
gives users feedback and context
Good Usability

96. makes things discoverable
gives users feedback and context
lets users recover from errors
Good Usability

97. Bad Usability

98. makes people feel dumb
Bad Usability

99. makes people feel dumb
Bad Usability
is disrespectful

100. makes people feel dumb
Bad Usability
is disrespectful
damages our clients’ credibility

102. usability usability

103. usability usability
visual design, content + development

104. usability usability
user
experience
visual design, content + development

105. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
How does User Experience Design work?

106. The Digital Flower

107. The Digital Flower
Developer

108. The Digital Flower
Developer
AS/PR

109. The Digital Flower
Developer
Creative,
content, BAMAS/PR

110. The Digital Flower
Developer User Experience
Creative,
content, BAMAS/PR

111. The Digital Flower
Developer User Experience
Creative,
content, BAMAS/PR
Producer

112. The Digital Process

113. The Digital Process
strategy
session

114. The Digital Process
strategy
session
work work work

115. The Digital Process
strategy
session
checkpoint
work work work

116. The Digital Process
strategy
session
checkpoint
work work work
client
review

117. The Digital Process
strategy
session
checkpoint
work work work work work work
client
review

118. The Digital Process
strategy
session
checkpoint
work work work work work work
checkpoint
client
review

119. The Digital Process
strategy
session
checkpoint
work work work work work work
checkpoint
client
review
client
review

120. The User Experience Design Process
sitemap navigation design
1
2
3
4
5
6
user flows
wireframes visual designusability
assessment
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
coding

121. The User Experience Design Process
sitemap navigation design
1
2
3
4
5
6
user flows
wireframes visual designusability
assessment
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
101101101101010101101101101010
coding

122. Throughout the process, UX Design:

123. Throughout the process, UX Design:
• gets involved as early as possible

124. Throughout the process, UX Design:
• gets involved as early as possible
• represents the user

125. Throughout the process, UX Design:
• gets involved as early as possible
• represents the user
• incorporates user needs with business needs

126. Throughout the process, UX Design:
• gets involved as early as possible
• represents the user
• incorporates user needs with business needs
• asks questions you may never think of

127. Throughout the process, UX Design:
• gets involved as early as possible
• represents the user
• incorporates user needs with business needs
• asks questions you may never think of
• thinks holistically

128. Throughout the process, UX Design:
• gets involved as early as possible
• represents the user
• incorporates user needs with business needs
• asks questions you may never think of
• thinks holistically
• zooms in and out (strategic and tactical)

129. Make nice memories with your UX Designer

130. Make nice memories with your UX Designer
• allow early access to the client to clarify
needs

131. Make nice memories with your UX Designer
• allow early access to the client to clarify
needs
• avoid playing “telephone”

132. Make nice memories with your UX Designer
• allow early access to the client to clarify
needs
• avoid playing “telephone”
• we always present our own work

133. Make nice memories with your UX Designer
• allow early access to the client to clarify
needs
• avoid playing “telephone”
• we always present our own work
• use us to identify opportunities for new work

134. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
Thanks.