WHAT Before HOW

Practical, Lo-fi Tools for Alignment, Planning, and Understanding

http://understandinggroup.com

Transcript

1. WHAT Before HOW Practical, Lo-fi Tools for Alignment, Planning, and Understanding @travislafleur
2. WHAT HOW
3. DEFINITION EXECUTION http://www.peterme.com/2013/09/26/the-double-diamond-model-of-product-definition-and-design/ http://www.designcouncil.org.uk/news-opinion/design-process-what-double-diamond
4. ARCHITECTURE DESIGN
5. ARCHITECTURE DESIGN
6. UX UX
7. WHAT HOW
8. WHAT HOW TUM PROJECT MOMEN
9. TUM PROJECT MOMEN WHAT HOW COST TO CHANGE
10. AVOID CREATING SOLUTIONS TO THE WRONG PROBLEMS
11. WHAT HOW
12. WHAT HOW
13. WHAT HOW
14. WHAT HOW
16. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
17. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
18. WIREFRAMES
19. WIREFRAMES COMP
20. WIREFRAMES COMP ?
21. WIREFRAMES COMP PAGE DESCRIPTION DIAGRAM
22. WIREFRAME http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ Show
23. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ Tell http://hbswk.hbs.edu/item/6496.html
24. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW
25. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW
26. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW Open to Interpretation (in a good way)
27. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW Mini-briefs for key pages
28. PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW See also: CORE Content Model http://alistapart.com/article/the-core-model-designing-inside-out-for-better-results
29. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
30. UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
31. SEE DO UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
32. SEE DO SEE NEXT DO NEXT UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
33. SEE DO SEE NEXT DO NEXT CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
34. CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows Messy but fast
35. CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows Layout Agnostic
36. CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows Not Page-level but Interaction-level
37. CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows Tell Stories
38. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
39. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/
40. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL
41. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL COGNITIVE
42. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL COGNITIVE EMOTIONAL
43. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Not Exhaustive but Essential
44. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Rubber Stamp
45. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Compare / Contrast STUDENTS FACULTY
46. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Play with size
47. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Progression TIME
48. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ See also: Situation–Need–Task Model
49. USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ See also: Understanding Context by Andrew Hinton http://www.contextbook.com
50. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
51. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/
52. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ THIS THAT
53. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ TIME WORK http://www.nytimes.com/2014/09/24/dining/when-cooking-invest-time-or-work-not-both.html
54. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ WELCOMING EFFICIENT
55. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ NOVICE EXPERT
56. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ SERVE EXISTING ACQUIRE NEW
57. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ FOCUS EXPOSURE
58. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ FAMILIAR CUTTING- EDGE
59. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ ENGAGEMENT CONVERSION
60. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ ENGAGEMENT CONVERSION 5 4 3 2 1 0 1 2 3 4 5
61. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ ENGAGEMENT CONVERSION 5 4 3 2 1 0 1 2 3 4 5
62. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ 5 4 3 2 1 0 1 2 3 4 5 NOW THEN ENGAGEMENT CONVERSION
63. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ 5 4 3 2 1 0 1 2 3 4 5 ENGAGEMENT CONVERSION
64. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ 5 4 3 2 1 0 1 2 3 4 5 ENGAGEMENT CONVERSION
65. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Not Mutually Exclusive
66. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Capture Multiple Facets
67. PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Explore Boundaries
68. SERVE EXISTING ACQUIRE NEW
69. “There is a tension between making college accessible and making graduation likely. Most colleges have seen no downside to erring on the side of accessibility and letting millions drop out without a degree.” http://www.theatlantic.com/magazine/archive/2015/05/the-upwardly-mobile-barista/389513/ – Amanda Ripley SERVE EXISTING ACQUIRE NEW
70. SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT
71. WORDS PICTURES
72. LINGUISTIC PERCEPTUAL http://www.slideshare.net/mjane_h/what-we-mean-by-meaning-new-structural-properties-of-information-architecture-ias15-47485499
73. CONCEPTUAL LITERAL
74. WHAT Before HOW SEE DO SEE NEXT DO NEXT
75. WHAT Before HOW SEE DO SEE NEXT DO NEXT Easy to Grasp
76. WHAT Before HOW SEE DO SEE NEXT DO NEXT Fast
77. WHAT Before HOW SEE DO SEE NEXT DO NEXT Versatile
78. http://logger.believermag.com/post/87204218014/all-women-look-beautiful-to-me-now – Gordon Willis, cinematographer (Annie Hall, The Godfather)
79. “I always said that you could photograph a good story badly and it wouldn’t matter, but you can shoot a bad story well and it’s not going to help the story at all. It’s not. But you get the two together, and it’s great.” http://logger.believermag.com/post/87204218014/all-women-look-beautiful-to-me-now – Gordon Willis, cinematographer (Annie Hall, The Godfather)
80. THANK YOU! @travislafleur There Will Be Slides: understandinggroup.com