Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UX Tools Practice, Process, Skills David Panarelli NoVA UX September, 17 2014
Carpentry
User Experience Design
User Experience Design How people feel when using a product. A rendering of an intended experience. Lauralee Alben Jared S...
the experience is the user’s rendered intent a field, with many disciplines
User Researcher
 Identifies user behaviors, goals and needs through interviews, studies and surveys Content Strategist
 Aud...
Or, just one person
What do people use?
Software tools
Software
Collaboration Tools
Sketch / Whiteboard
Sketch / Whiteboard
That’s how you make the UX, right?
It’s not about the software.
The only important questions: What gets the job done? What works for you? What works for your team?
How the work gets done
Process
ProcessDiscovery Synthesis Interaction Refinement
Learn about a problem. Plan a solution. Validate ideas, internally and externally. Refine a product for launch.
Process
ProcessDiscovery Synthesis Interaction Refinement
Discovery Stakeholder Interviews User testing + reporting Competitive/Comparative Analysis Heuristic Evaluations Card Sort...
Gain clear understanding of problems you want to solve
User Testing
User Testing • Identify testing needs • find people to be participants • write testing script • conduct the test • analyze...
User Testing • Identify testing needs • find people to be participants • write testing script • conduct the test • analyze...
ProcessDiscovery Synthesis Interaction Refinement
Synthesis Sketching Sessions Taxonomy Content Strategy Visual designs? maybe… HTML prototypes? maybe…
Generate solutions for the problem.
Sketching
Sketching is not “drawing”
Solo Sketching
… and whiteboards, too!
Group sketching
6-1-1
Best meeting ever
people, across disciplines a problem worksheets (if you want) pens whiteboard markers
Understand the problem
The 6
Discuss no critique, yes stealing
The first 1
Discuss themes emerge
The Last 1
Now, get it validated.
ProcessDiscovery Synthesis Interaction Refinement
Interactions Prototypes Yes, prototypes Did I mention prototypes? Flow Diagrams Sitemaps Content Guidelines
Prototyping • print out your screens • practice “links” • Show it to someone else
Prototyping • Make a few screens • Make links • Show it to someone else flinto.com
Prototyping • non-production HTML • non-production CSS • non-production JS
Prototypes made of paper vs Prototypes made from images vs Prototypes made from code
Stop arguing and make a prototype already.
ProcessDiscovery Synthesis Interaction Refinement
Refinement Refined visual design Wireframes/Specifications + Front End Code User testing—wait what?
Wireframes
paper-based means… version control revision, revision, revision printing
Use of wireframes is becoming inconsistent, but is sometimes important
wiki-based means… links always current on your computer plays nice
Depends on organizational need.
ProcessDiscovery Synthesis Interaction Refinement
Discovery Synthesis Interactions Refinement Stakeholder Interviews User testing + reporting Competitive/ Comparative Analy...
Discovery Synthesis Interactions Refinement Stakeholder Interviews User testing + reporting Competitive/ Comparative Analy...
What’s under the surface?
User Researcher
 Identifies user behaviors, goals and needs through interviews, studies and surveys Content Strategist
 Aud...
User Researcher
 research, analysis, written communication, spoken communication
 Content Strategist
 analysis, written co...
Build on your strengths.
Process
Active Listening Organization and Project Management Presentation Critical Thinking Visualization Technical Capability Wri...
Finally…
Finally…
don’t hate. iterate. Thanks! David Panarelli david.panarelli@gmail.com @dpan dpan.co
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Tools of the UX Trade
Upcoming SlideShare
Loading in …5
×

Tools of the UX Trade

2,633 views

Published on

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.

Published in: Design
no profile picture user

  • Be the first to comment

Show More

Tools of the UX Trade

  1. 1. UX Tools Practice, Process, Skills David Panarelli NoVA UX September, 17 2014
  2. 2. Carpentry
  3. 3. User Experience Design
  4. 4. User Experience Design How people feel when using a product. A rendering of an intended experience. Lauralee Alben Jared Spool
  5. 5. the experience is the user’s rendered intent a field, with many disciplines
  6. 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. 7. Or, just one person
  8. 8. What do people use?
  9. 9. Software tools
  10. 10. Software
  11. 11. Collaboration Tools
  12. 12. Sketch / Whiteboard
  13. 13. Sketch / Whiteboard
  14. 14. That’s how you make the UX, right?
  15. 15. It’s not about the software.
  16. 16. The only important questions: What gets the job done? What works for you? What works for your team?
  17. 17. How the work gets done
  18. 18. Process
  19. 19. ProcessDiscovery Synthesis Interaction Refinement
  20. 20. Learn about a problem. Plan a solution. Validate ideas, internally and externally. Refine a product for launch.
  21. 21. Process
  22. 22. ProcessDiscovery Synthesis Interaction Refinement
  23. 23. Discovery Stakeholder Interviews User testing + reporting Competitive/Comparative Analysis Heuristic Evaluations Card Sort Content Audit Personas
  24. 24. Gain clear understanding of problems you want to solve
  25. 25. User Testing
  26. 26. User Testing • Identify testing needs • find people to be participants • write testing script • conduct the test • analyze results • present findings worst stock photo
  27. 27. 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
  28. 28. ProcessDiscovery Synthesis Interaction Refinement
  29. 29. Synthesis Sketching Sessions Taxonomy Content Strategy Visual designs? maybe… HTML prototypes? maybe…
  30. 30. Generate solutions for the problem.
  31. 31. Sketching
  32. 32. Sketching is not “drawing”
  33. 33. Solo Sketching
  34. 34. … and whiteboards, too!
  35. 35. Group sketching
  36. 36. 6-1-1
  37. 37. Best meeting ever
  38. 38. people, across disciplines a problem worksheets (if you want) pens whiteboard markers
  39. 39. Understand the problem
  40. 40. The 6
  41. 41. Discuss no critique, yes stealing
  42. 42. The first 1
  43. 43. Discuss themes emerge
  44. 44. The Last 1
  45. 45. Now, get it validated.
  46. 46. ProcessDiscovery Synthesis Interaction Refinement
  47. 47. Interactions Prototypes Yes, prototypes Did I mention prototypes? Flow Diagrams Sitemaps Content Guidelines
  48. 48. Prototyping • print out your screens • practice “links” • Show it to someone else
  49. 49. Prototyping • Make a few screens • Make links • Show it to someone else flinto.com
  50. 50. Prototyping • non-production HTML • non-production CSS • non-production JS
  51. 51. Prototypes made of paper vs Prototypes made from images vs Prototypes made from code
  52. 52. Stop arguing and make a prototype already.
  53. 53. ProcessDiscovery Synthesis Interaction Refinement
  54. 54. Refinement Refined visual design Wireframes/Specifications + Front End Code User testing—wait what?
  55. 55. Wireframes
  56. 56. paper-based means… version control revision, revision, revision printing
  57. 57. Use of wireframes is becoming inconsistent, but is sometimes important
  58. 58. wiki-based means… links always current on your computer plays nice
  59. 59. Depends on organizational need.
  60. 60. ProcessDiscovery Synthesis Interaction Refinement
  61. 61. 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
  62. 62. 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
  63. 63. What’s under the surface?
  64. 64. 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?
  65. 65. 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?
  66. 66. Build on your strengths.
  67. 67. Process
  68. 68. Active Listening Organization and Project Management Presentation Critical Thinking Visualization Technical Capability Writing with Clarity The Right Meetings
  69. 69. Finally…
  70. 70. Finally…
  71. 71. don’t hate. iterate. Thanks! David Panarelli david.panarelli@gmail.com @dpan dpan.co

×