This is an overview of the tools used by User Experience Designers. Software is important, but in UX you need to master a wide variety of techniques. This presentation covers an overview of the UX workflow, Discovery, Synthesis, Interaction, and Refinement, and outlines the tools that are critical to each step. In the end, the emphasis is not on mastering all the tools, but understanding their strengths and weaknesses, so the right tool can be chosen based on the situation.

1. UX Tools
Practice, Process, Skills
David Panarelli
NoVA UX
September, 17 2014

2. Carpentry

3. User Experience Design

4. User Experience Design
How people feel when
using a product.
A rendering of an
intended experience.
Lauralee Alben Jared Spool

5. the experience is the user’s
rendered intent
a field, with many disciplines

6. User Researcher
Identifies user behaviors, goals and
needs through interviews, studies and
surveys
Content Strategist
Audits, reviews, creates, and governs the
production of content in a system
Information Architect (IA)
Defines the structure of a system, how
content is described, organized and
discovered
Interaction Designer (IxD/UX Designer)
Defines interactions, user flows,
wireframes, and affordances of a system
UI Developer
Builds the system by interpreting the
functional specification, sitemaps,
wireframes while working within technical
constraints
Visual Design
Designs and maintains appropriate visual
styles in service of the overall experience
of a product or service
Who does UX?

7. Or, just one person

8. What do people use?

9. Software tools

11. Software

12. Collaboration Tools

13. Sketch / Whiteboard

14. Sketch / Whiteboard

15. That’s how you make
the UX, right?

16. It’s not about the software.

17. The only important questions:
What gets the job done?
What works for you?
What works for your team?

18. How the work gets done

19. Process

20. ProcessDiscovery Synthesis Interaction Refinement

21. Learn about a problem.
Plan a solution.
Validate ideas, internally and externally.
Refine a product for launch.

22. Process

23. ProcessDiscovery Synthesis Interaction Refinement

24. Discovery
Stakeholder Interviews
User testing + reporting
Competitive/Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas

25. Gain clear understanding of
problems you want to solve

26. User Testing

27. User Testing
• Identify testing needs
• find people to be participants
• write testing script
• conduct the test
• analyze results
• present findings
worst stock photo

28. User Testing
• Identify testing needs
• find people to be participants
• write testing script
• conduct the test
• analyze results
• present findings
Handbook of Usability Testing
Jeffrey Rubin, Dana Chisnell

29. ProcessDiscovery Synthesis Interaction Refinement

30. Synthesis
Sketching Sessions
Taxonomy
Content Strategy
Visual designs? maybe…
HTML prototypes? maybe…

31. Generate solutions for
the problem.

32. Sketching

33. Sketching is not “drawing”

35. Solo Sketching

40. … and whiteboards, too!

41. Group sketching

42. 6-1-1

43. Best meeting ever

44. people, across disciplines
a problem
worksheets (if you want)
pens
whiteboard
markers

45. Understand the problem

46. The 6

47. Discuss
no critique, yes stealing

48. The first 1

49. Discuss
themes emerge

50. The Last 1

51. Now, get it validated.

52. ProcessDiscovery Synthesis Interaction Refinement

53. Interactions
Prototypes
Yes, prototypes
Did I mention prototypes?
Flow Diagrams
Sitemaps
Content Guidelines

54. Prototyping
• print out your screens
• practice “links”
• Show it to someone else

55. Prototyping
• Make a few screens
• Make links
• Show it to someone else
flinto.com

56. Prototyping
• non-production HTML
• non-production CSS
• non-production JS

57. Prototypes made of paper
vs
Prototypes made from images
vs
Prototypes made from code

58. Stop arguing and make a
prototype already.

59. ProcessDiscovery Synthesis Interaction Refinement

60. Refinement
Refined visual design
Wireframes/Specifications
+ Front End Code
User testing—wait what?

61. Wireframes

62. paper-based means…
version control
revision, revision, revision
printing

63. Use of wireframes is becoming
inconsistent, but is sometimes
important

66. wiki-based means…
links
always current
on your computer
plays nice

67. Depends on
organizational need.

68. ProcessDiscovery Synthesis Interaction Refinement

69. Discovery Synthesis Interactions Refinement
Stakeholder Interviews
User testing +
reporting
Competitive/
Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas
Sketching Sessions
Taxonomy
Content Strategy
Visual designs?
maybe…
HTML prototypes?
maybe…
Prototypes
Flow Diagrams
Sitemaps
Content Guidelines
Refined visual design
Wireframes/
Specifications
User testing
+ Front End Code

70. Discovery Synthesis Interactions Refinement
Stakeholder Interviews
User testing +
reporting
Competitive/
Comparative Analysis
Heuristic Evaluations
Card Sort
Content Audit
Personas
Sketching Sessions
Taxonomy
Content Strategy
Visual designs?
maybe…
HTML prototypes?
maybe…
Prototypes
Flow Diagrams
Sitemaps
Content Guidelines
Refined visual design
Wireframes/
Specifications
User testing
+ Front End Code

72. What’s under the surface?

73. User Researcher
Identifies user behaviors, goals and
needs through interviews, studies and
surveys
Content Strategist
Audits, reviews, creates, and governs the
production of content in a system
Information Architect (IA)
Defines the structure of a system, how
content is described, organized and
discovered
Interaction Designer (IxD/UX Designer)
Defines interactions, user flows,
wireframes, and affordances of a system
UI Developer
Builds the system by interpreting the
functional specification, sitemaps,
wireframes while working within technical
constraints
Visual Design
Designs and maintains appropriate visual
styles in service of the overall experience
of a product or service
Who does UX?

74. User Researcher
research, analysis, written
communication, spoken communication
Content Strategist
analysis, written communication, excel.
see the big picture
Information Architect (IA)
systemic thinking, visualization, written
communication, puzzle-oriented, see the
big picture
Interaction Designer (IxD/UX Designer)
familiar with technology, puzzle-oriented,
visualization skills, see the big picture
UI Developer
knows the codes, love the code, stay
current, see the big picture
Visual Design
loves design systems, attention to detail,
visualization, typography, color theory
Who does UX?

75. Build on your strengths.

76. Process

77. Active Listening
Organization and Project Management
Presentation
Critical Thinking
Visualization
Technical Capability
Writing with Clarity
The Right Meetings

78. Finally…

79. Finally…

80. don’t hate. iterate.
Thanks!
David Panarelli
david.panarelli@gmail.com
@dpan
dpan.co