1. The importance of
UX

2. What is UX?

5. What we’ll cover
A brief history and future of UX
What is UX and why?
How do we deal with UX: Project approach

6. A brief history and
future of UX

7. A brief history of UX
Since the beginning of the Machine Age
Henry Ford pioneered ways to make
human labor more efficient,
productive and routinized

8. 1940: ergonomics &
human factors
A brief history of UX
Focus on design of things to best
align with human capabilities

9. 1950: cognitive science
& augmented reality
A brief history of UX
potential of computers to serve as
a tool to augment human mental
capacities

10. A brief history of UX
1955: ‘Designing for
People’
by Henry Dreyfuss
“When the point of contact between
the product and the people becomes
a point of friction, then the [designer]
has failed. On the other hand, if
people are made safer, more
comfortable, more eager to purchase,
more efficient—or just plain happier—
by contact with the product, then the
designer has succeeded.”

11. first GUI
first mouse
first computer-generated bitmap graphics
> inspired Apple Macintosh
Xerox PARC
A brief history of UX

12. A brief history of UX
Rise of Human Computer
Interaction

13. A brief history of UX

14. A brief history of UX

15. A brief history of UX
Donald Norman
User centered designer at Apple
first mention of UX

16. A brief history of UX
Increasing functionality,
interactivity
>>>

17. Focus even more
on the user
A brief history of UX

18. A brief future of UX
technology will not disappear
will become more people-centric
technology will not look like
technology anymore
it will dissolve in everyday life

19. A brief future of UX
technology will not just tell you
the answer, it will help you solve
your problems together
the ability to figure out what a person
needs at a given moment emerges as
the killer app.

20. A brief future of UX
More hands, less mice
Natural UI
Less chrome, more content

21. A brief future of UX
Contextual Designing

22. A brief future of UX
Unbundling of apps

23. Future technologies

24. A brief future of UX
UX
will become
more and more the
tool of innovation

25. Movie Corning
https://www.youtube.com/watch?v=v-Hd9kip1wA
A brief future of UX

26. What is UX and
Why is it important?

27. Everyday, everywhere
we experience things

28. We love talking about them

29. So if we like talking
about experiences
and feelings so
much
why do we keep
creating horrible
experiences?

30. We’re building
something that
needs to be used
by someone

31. How does it make people feel?
How can we make their life easy?
How can we add value to their life?
How does it solve a user’s problem?

32. Give your users control
but not too much

33. So what is UX?

34. We want you
to make the
user experience
pretty
What UX is not

35. What UX is not
UX is not UI

36. psychology
anthropology
architecture
sociology
computer science
industrial design
coginitive science
communication
design
content strategy
What UX is

38. Information Architecture
Interaction Design
Visual Design
Foundation
Function
Emotion

39. What a product does
> form follows function
How a product works
> form follows psychology (of users)

40. Easthetic design
> does the button have the right texture and appeal?
Functional design
> does it trigger the right action?
UX design
> is it big enough, does it have the right location to
other buttons?
> Does it feel right?

41. Thoughtful design doesn't just enable our habits; it
pushes us to improve behavior, making us more
economical, reflective, and responsible

42. The best UX design is when
everybody
is involved
IBM:
1 dollar in design is 100 dollar in development

43. What is UX?
“Experience design is the design of anything,
independent of medium or across media, with human
experience as an explicit outcome and human
engagement as an explicit goal.”
Jesse James Garrett
“UX is the tangible design of a strategy
that brings us to a solution”
Erik Flowers

45. Why UX?
“Good design brings a story closer to the people”
Richard Turley

46. Can you design UX?
Experience is a subjective phenomenon
that occurs within the mind of the individual

47. So, if you aren’t designing experiences,
then what exactly is user experience design?

48. You can design for UX
A good UX designer understands how people
see the world
A good UX designer understands how people
all see the world differently
A good UX designer has good soft skills
He knows how not to let people feel stupid

49. A good UX designer
listens, tries
to understand

50. Good UX principles
First impressions last

51. Don’t ask too many questions before user can use
the application
Good UX principles

52. Good UX principles
Give users tiny surprises, regular updates

53. Good UX principles
Create for
playfulness

54. Good UX principles
Hidden treasures

55. Good UX principles
There were smartphones before iPhone
but Apple was the first one to create a good UX

56. Good UX principles
Innovate

57. Good UX principles
See the product in an ecosystem

58. Good UX principles
The most effective webpage online!

59. UX for web applications

60. Before
companies had to have a website
they couldn’t fall behind

63. Adding functions
and features
increases the
difficulty level of
usage

64. Saving users time
saves company money
Good UX

65. Types of applications
Brand presence
Marketing Campaign
Content source
Task-based applications

66. Brand presence
Perception of a company brand
Offer easy access to products or services

67. Marketing Campaign
Set focus within limited timeframe
combined with other media
targeted at groups
Microsite

68. Content Source
Newssites, intranet,
support centers
Focus on presentation
and structure
of information

69. Task-based applications

70. Crossover projects
E-commerce
E-learning
Social networking
mobile

71. Practical
A project approach

72. The lifecycle of a project
Define
Technology
Strategy
Formulation
Discover
Requirement
Analysis
Specification
Design
Architecture
Design
Documentation
Develop
Standards
Best Practices
Driven SDLC
Deploy
Production
Operations
Support

73. What we’ll do
- Capturing the project ecosystem
Get to know the business &
Business Requirements
SWOT Analysis
> Project objectives
- Plan the project
Project Approach: Methodology
- Research & Test
Task Models & User Journeys
Customer Experience Map
- Information Architecture
Usability Testing
Wireframing
- Visual Design

74. Project Folder
Keynote / Powerpoint
Description of company
Personas
photo’s of workshops
Wireframes
Mockups

75. Team 1
LETS Leuven
Trading website
Team 2
Rockstar Energy
Sales app

76. Project team
- business representative
(CEO, IT manager,…)
- product owner
- project manager
- business analyst
- ux designer
- developer
CLIENT
SUPPORT

77. Part 1
Capturing the
Project ecosystem:
Business requirements

78. Project kickoff

79. Kickoff meeting
- Understand the company culture
- What project will we be working on?
- Why is the project important to the company?
- Know the people you’ll be working with
- Type of work you’ll be engaged in
WHAT IS THE STRATEGY IN A LINE?
WHAT ARE THE PROJECT OBJECTIVES?

80. Project objectives help you:
- help you ask the right questions
- plan research with users
- details the ideas from stakeholders
- create effective interaction designs
- manage request for changes

81. Workshop
1. Business requirements
> Know the problem before you
create the solution
2. Must have functionalities/pages
> Define must have functionalities or pages
(home, login, catalog, forum,…)
3. SWOT analysis
> Know the Strengths, Weaknesses,
Opportunities and Threats of the product
4. What is the strategy?
> Formulate in one sentence
Understand
the business
Understand
the product

82. eg search form does not bring back all possible results

83. Part 2
Plan the project

84. Which way are
we gonna go?

85. Specify the must-haves and nice to haves
within budget
Define the deadlines and key points
Create high level estimation
Envision the scope
Understand the scope

86. Project approach
Waterfall / Agile?

87. Waterfall
- treats the steps of a project as separate,
distinct phases
- approval of one is needed to continue on to
the next
- assumes that each phase can be completed
with minimal changes to the phase before it
> can throw off the plan!
- more straightforward planning
- better measure of process

88. Waterfall
approach

89. WHEN WATERFALL?
- the project is simple
- the project is complicated, but you have the expertise to
deliver it
- it is all you know and you have no support for change
- the upfront investment is not risky to make
- you focus your performance measures on delivery date
and budget

90. Agile
- Change is constant
- Much more flexibility
- More people-centric
- Fast feedback from client
- Focus on rapid collaboration
- Less focus on detailed documentation
- Working in sprints
- Quickly produces working versions

91. Agile Method

92. - More complex, novel or urgent projects
- You don't completely understand the value and
definition of what you are building
- There’s a budget for it
- Whole team is very dedicated to project
- Everybody is preferably in the same physical space
WHEN AGILE?

93. Agile Method

94. Developers transition into Agile
via Lean UX
Less deliverables
Less time and waste
Quicker to market
Build - Measure - Learn
(Obligation to) Fail at start

96. Part 3
Research & Test:
User Requirements

97. Let’s start designing

98. FOCUS ON USER

99. Design in context
Information design principles

100. Design with user in mind
Information design principles

101. Keep it simple
Information design principles

102. Don’t forget to design for
edge cases
Information design principles
https://www.youtube.com/watch?v=4m2YT-PIkEc

103. Use analytics
Research

104. Recreates DOM and its mutations
> so shows how browser and website
were behaving at that time
https://www.fullstory.com/

105. Competitors all use a certain approach:
> should you deviate from this?
> recognize design patterns
> evaluate other sectors as well
Competitor benchmarking

106. Different forms of user testing:
- Guerrilla testing
- Stakeholder interview
- Contextual research
- Call center listening, email reading,…
- customer surveys
- …
User Testing

107. - Must meet your user group
- Information based on
research
- Can never replace real
user testing
Personas

108. User Journeys
- Set the context
Where is the user? What is around him?
- Progression: how does each step enable him to get to the next?
- Device: what device is he using? Is he/she a novice,
expert
- Functionality: what type of functionality does he/she expect?
is it achievable?
- Emotion: what is their emotional state in each step?
is he/she engaged, bored, annoyed

109. User Journey

110. Task Models
- Description of activities a user needs to perform
in order to reach their goal
- Helps you understand how your users interact
with information provided by the product
- Can help you choose features for a widget
(eg comparison table, sharing widget,…)
- Can help you decide: eg is the widget handy here
in the task flow or elsewhere?
- Helps you understand how users think about the task at hand

111. Task Models

112. Workshop
1. User needs & requirements
> Brainstorm over possible
user requirements?
2. User stories
> Define user stories
(as a user i want to…, so i…)
Understand
the user

113. Customer experience map

114. Part 4
Information Architecture &
Conceptualization

115. Start building

116. Design Tools

117. - IA should solve information overload
- IA is commercially important
> how well a user finds the product or service
- Makes SEO easier
- Will result in site map
or navigation
What is Information Architecture?

118. Sitemap or Navigation
Techniques:
Card Sorting
Mindmap
Tools:
optimalsort.com
websort.com

119. Specify the templates:
what pages will you be needing?
Order them in rank of prioritisation
Prioritize Pages

120. Sketch!

122. Workshop
1. Create sketched wireframes
2. Create Sitemap
Envision
the product

123. Wireframes

124. Principles of wireframes
Don’t spend too much
time with makeup

125. Principles of wireframes
Use consistent terminology

126. Principles of wireframes
You can provide annotations
Why men need postits!

127. Principles of wireframes
Test them!
> usability testing

128. Prototypes
- Interactive wireframes
- Ideal for testing
- Fail first and fail early!

129. Workshop
1. Create wireframes
Design
the product

130. Usability Testing
- Let users perform tasks on an existing
website
- Write down quotes or remarks from users
on sticky notes

131. Usability Testing
- Develop a test plan
- Choose participants
- Analyze data
remote tools:
usertesting.com

132. Workshop
1. Define user tasks
2. Usability testing
3. Analyze data
Test
the product

133. Part 5
Visual Design

134. Start playing
with makeup!

135. Design Tools

136. Visual design principles
Innovate in content and proposition
Imitate in patterns and conventions

137. Visual design
principles
Avoid using Lorem ipsum
use real content if possible

138. Visual design principles
Strip out as much
as you can

139. Visual design principles
Design with fingers
in mind

140. Visual design principles
Maintain a pixel-perfect mentality

141. Design elements
Navigation
- Use proper labels
see Google Adwords Keyword tool
www.adwords.google.com
- Click here > mistake:
you should always now where
navigation is taking you
- Try to make navigation scalable
if info is added later

142. - Keep it lightweight, no overkill with content
most users don’t see it, they arrive at other pages
- Should convey easily what we do or offer
- What is the key task? put this on the homepage
- Logged in and logged out states (cfr Flickr)
- Homepage should inspire
- Should show that it’s regularly updated
(eg new products, dates, facebook likes)
Design elements
Homepage

143. Show photos of how
something is used,
how it would look in
your world
Design elements
Images

144. Pictures say
more than words
Design elements
Images

145. Use authentic images
not stock photos
Design elements
Images

146. Mobile first
Luke Wroblewski
- Mobile Usage is explosive
- Screen real estate forces you to think
about the essence
native capabilities of the devices
- New strategy
New way of writing code
Before we design a word on…

147. Website that looks great on all devices
Responsive
flexible grids
flexible images
mediaqueries
conditional loading
modernizr
Adaptive
better because same url but
different structure

148. Graceful degradation vs progressive enhancement

149. Visual Design
Photoshop or Illustrator?

150. Design in Photoshop
- Design with finger in mind
- Create sharp images
http://dcurt.is/pixel-fitting
- Align to edges
- Organize and name layers
- Use vector shapes
- Don’t just rescale
- Don’t color manage document

151. Workshop
1. Create mockups
Design
the product

152. Part 6
Exporting for development

153. Exporting for development
- Create pixel perfect assets
- Align to grid
- Export in different pixel dimensions
(for mobile use)

154. Slices
pngexpress
http://www.cutandslice.me
Exporting Tools

155. Wireframing & Prototyping
Axure
Invision
Sketch
Proto.io
Tools
Visual Design
Photoshop
Illustrator
Sketch

156. Tips & Inspiration
Dribbble
Pttrns
Pinterest
Behance
Fontastic
Flat icons
Freebeegoodies
Teehan Lax

157. Templates
iPhone 5 templates
pixeden.com
http://www.teehanlax.com/tools/iphone/
http://www.teehanlax.com/tools/ipad/

158. Grids
960 grid system
http://960.gs/
iPhone 5 grid
edwardsanchez.me/blog

159. Tumblr
Pinterest
airBnB
Yahoo weather app
Best practices

160. Interesting Reading
Smashing UX Design: Foundations for Designing Online User
Experiences
100 Things Every Designer Needs to Know About People (Voices that
Matter)
Simple and Usable: Web, Mobile, and Interaction Design
A Project Guide to UX Design: For user experience designers in the field
or in the making
User Experience Innovation: User Centered Design that Works
Smashing Magazine
A List Apart
Flipboard UX Magazine

161. Thanks!