This document provides a summary of a presentation about UX design for developers. The presentation introduces the user-centered design process and a user task-centric mindset. It outlines a 5-step UX design checklist for developers to follow when designing new features: 1) Discover the problem by learning about users and business needs, 2) Model the optimal user flow, 3) Find relevant design patterns, 4) Draft UI concepts, and 5) Gain confidence in the design through validation. The presentation emphasizes understanding users, aligning designs with user goals, and leveraging design best practices to create usable interfaces without reinventing solutions. It does not replace working with expert designers for more polished, user-centered results.

1. UX Design 101 for Devs
Jenica Welch, Interaction Design Manager
National Instruments
No Designer ?
NO PROBLEM

2. Data Dashboard

3. Lego EV3 for Tablets

4. This presentation is going to help you make more usable UIs
• A walkthrough of the user-centered design process
• An introduction to a user task-centric mindset
• Not going to help you execute on visual design (color, typography,
iconography)

5. This presentation does not replace working with real designers
• If you have the budget, work with expert designers!
• More polished results
• Better alignment with user needs

6. UX Design

8. Design
verb | de·sign | di-ˈzīn
Simple definition of design
: to plan and make decisions about (something that is being built or created) : to create the plans, drawings, etc., that
show how (something) will be made
: to plan and make (something) for a specific use or purpose
: to think of (something, such as a plan) : to plan (something) in your mind
http://www.merriam-webster.com/dictionary/design

10. Good design
Aligns with a person’s needs and expectations for
a given situation.
Does not make people angry.
Efficient, delightful, and prevents error.
Often goes unnoticed.
Push

11. Bad design
Frustrating.
Makes people feel stupid.
Noticable.
Can even be deadly.
Push

12. A UX Checklist

13. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Walk through this
checklist when tackling a
new feature of any size
to “take a step back” from
feature implementation.
Checklist

14. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Goal
To uncover the user
requirements, business
requirements and
identify risk for a feature
and use these as a input
to set the Scope.
Discover

15. You are (probably) not the user.

16. The user might have a different mental model.

17. Mental Model
noun
: an explanation of someone’s thought process about how something works (or means) in the real world. It is a
representation of the surrounding world, the relationship between its various parts and a person’s intuitive perception
about his or her own acts and their consequences.
https://en.wikipedia.org/wiki/Mental_model

18. Mental Model Example:
What does unlinked mean?
Disconnect. Disable.

19. Know the user
• Who is the user?
• What is their goal?
• What is his or her mental model?
• What does he or she perceive is their task?
Why?
• The user’s goal should influence your goal
• You are going to have to map out the steps for a user to
complete their goal
Discove
r
The user

20. What’s the best way to learn about the user?
Contextual Inquiry
• Start with traditional interview
• Switch to “master- apprentice” relation “I
want to learn by watching you”
• Observe
• Summarize at the end what you have seen
Traditional Interview
• Ask about goals
• How something works
• Don’t ask them questions that rely on
memory, “design,” or to imagine how
something might be used

21. Answer these questions
• What is my company/ client trying to accomplish with this
feature?
• Is it part of a larger effort or goal?
• How does it fit within the overall feature and product?
Why?
• Helps to form business requirements
• Aligns your feature with your company or client’s vision
• Illuminates any gaps between business goals and the user’s
goal to reconcile
Discove
r
The business
The business

22. Discove
r
The “plan”
Goal
This step is about getting
specific about the plan.
You should document
timeline, milestones,
goals and risks even if its
just on a post-it.
http://
www.webdesignerdepot.
com/2011/03/7-basics-to-
create-a-good-design-
brief/
DLL Design Brief
Everett Hiller

23. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Goal
List all of the user’s
steps to identify any
possible pain points or
extraneous effort.
Model & Map

24. Example Flow Chart
Everett Hiller
Model
& Map
• Remember the user’s
goals.
• Articulate which steps
that the user needs to
take to achieve his or her
goal.
• Draw each step out even
if it’s not entirely in the
scope of your feature.
• Keep an eye out for
opportunities to
consolidate features into
fewer steps and address
existing breakdowns.
Model & Map

25. Model
& Map

26. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Goal
Don’t reinvent the wheel.
Find the right pattern
and incorporate it into
your design.
Find Patterns

27. Find Patterns
What is a design pattern?
A general reusable solution to a
commonly occurring UI problem
that can be applied to different
contexts.
What isn’t a design
pattern?
A finished design that can be
copied and pasted directly into
code.
Online
http://ui-patterns.com/
patterns
http://www.pttrns.com/
Find
Pattern
s

28. Axure VisioXCode
Find
Pattern
s
Above &
beyond
Comparative
Audit
Look at other products that
have similar features or
need to leverage the same
pattern.
Product Evaluation
Does this feature exist in
another product? If so…

29. Keynote
Look for
• Overall paradigm
• Information architecture and
info grouping
• Progressive disclosure
• UI Widgets
• Actual pixels
• Relationship to other UI
elements

30. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Goal
Create and share a
vision of what the
user will see on-
screen when using
the feature.
Draft UIs

31. a conceptual sketch a detailed wireframe with real content an interactive prototype that
does not use real code
Draft
UIsUI creation process

32. Draft
UIsSketch
Audience
Peer code authors
Feature Complexity
All levels of complexity
• Leaves room for ambiguity
• Not real content
• Not pixel perfect
• Sketchy
• Quantity over quality
• Low time investment
• Likely not completely “right”

33. Draft
UIsExplore Design Options
6 - 8 solutions
5 minutes
Step 1
Review the goals from the ‘Discover’
phase.
Step 2
Sketch 6 to 8 solutions in 5 minutes.
Step 3
Informal sharing with peers.

34. Draft
UIsConsolidate
After reviewing your
sketches, pick out the
strengths of each and
consolidate to three
ideas.

35. Draft
UIsWireframes
Audience
Managers & people outside of
your group
Feature Complexity
Medium to great complexity
Tools
• LabVIEW
• MS Powerpoint
• MS Visio
• Keynote
• Moqups.com
• Balsamiq.com
• Sketchappsources.com

36. Low-fidelity or high-fidelity?
Information architecture, user flow, macro-level
behaviors (is my paradigm even correct?)
Colors, images, fonts, micro-interaction (might overlook if the
paradigm is correct)

37. Draft
UIs
Interactive
prototype
Audience
Executives & Decision Makers
Feature Complexity
Medium to great complexity
Tools
• LabVIEW
• Flash
• Axure
• Principle
• Atomic
• Sketch
• Flinto
• Sketchflow
• Visual Studio/ C#

38. Share
Stakeholders
Your stakeholders are not just
other devs but marketing,
PMs, architects, etc…
Users
Consider doing actual user
testing hinged around a task.
Next step
Prioritize and incorporate
feedback into your design(s).
You might consider
consolidating further at this
point.

39. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Goal
Ensure that the feature
is on course by
validating with users and
stakeholders.
Gain
Confidence

40. Created by Ainsley Wagoner (Noun Project)
Draft
UIs
Cheap
Usability
Step 1
Stop by someone's desk.
Step 2
Give them a task to
complete using your
prototype. Ask what they
think things on-screen mean
and observe their
interactions.
•
Remember!
Pick people that aren’t “too
close” to the feature (aka not
stakeholders).
http://www.usability.gov/how-to-and-tools/
methods/usability-testing.html

41. Draft
UIs
Cognitive
Walkthrough
Questions
· Will the user try to achieve the right effect?
· Will the user notice that the correct action is available?
· Will the user associate the correct action with the effect to
be achieved?
· If the correct action is performed, will the user see that
progress is being made toward a solution of the task?
What is it?
It’s a task-specific
method that focuses on
how easy it is for new
users to accomplish
tasks by asking a series
of questions.
http://
www.usabilityfirst.com/
usability-methods/
cognitive-walkthroughs/

45. Nielsen’s Heuristics
· Visibility of system status
· Match between system and the real world
· User control and freedom
· Consistency and standards
· Error prevention
· Recognition rather than recall
· Flexibility and efficiency of use
· Aesthetic and minimalist design
· Help users recognize, diagnose, and recover from errors
· Help and documentation
Draft
UIs
Heuristic
evaluation
What is it?
A heuristic evaluation is a
method that helps to
identify problems in the
UI.
https://www.nngroup.com/articles/
how-to-conduct-a-heuristic-
evaluation/

46. Is it playing ?
What’s
playing ?
Visibility of
system status

47. Match between
system & real
world
Is it radio–
like?

48. Consistency &
standards
Are words
always used to
mean the
same thing?
Are colors and
typography
applied
consistently?

49. Error recovery
What can be
done if this
isn’t the
“right”
station?

50. Confidence!

51. WRAP UP

52. Discover
Model &
Map
Find
Patterns
Draft UIs
Gain
Confidenc
e
1 Discover
Scoping the project & defining the problem.
2 Model & Map
Defining the optimal flow through a feature.
3 Find Patterns
Identify design patterns that can be leveraged.
4 Draft UIs
Brainstorm UI possibilities & narrow down to best UI.
5 Gain Confidence
Validate that the feature design is appropriate.
Walk through this
checklist when
tackling a new feature
of any size to “take a
step back” from
feature
implementation.
Checklist

53. 53