WHAT Before HOW - Speaker Deck

Slide 1

Slide 1 text

WHAT Before HOW Practical, Lo-ﬁ Tools for Alignment, Planning, and Understanding @travislaﬂeur

Slide 2

Slide 2 text

WHAT HOW

Slide 3

Slide 3 text

DEFINITION EXECUTION http://www.peterme.com/2013/09/26/the-double-diamond-model-of-product-deﬁnition-and-design/ http://www.designcouncil.org.uk/news-opinion/design-process-what-double-diamond

Slide 4

Slide 4 text

ARCHITECTURE DESIGN

Slide 5

Slide 5 text

ARCHITECTURE DESIGN

Slide 6

Slide 6 text

UX UX

Slide 7

Slide 7 text

WHAT HOW

Slide 8

Slide 8 text

WHAT HOW TUM PROJECT MOMEN

Slide 9

Slide 9 text

TUM PROJECT MOMEN WHAT HOW COST TO CHANGE

Slide 10

Slide 10 text

AVOID CREATING SOLUTIONS TO THE WRONG PROBLEMS

Slide 11

Slide 11 text

WHAT HOW

Slide 12

Slide 12 text

WHAT HOW

Slide 13

Slide 13 text

WHAT HOW

Slide 14

Slide 14 text

WHAT HOW

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 17

Slide 17 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 18

Slide 18 text

WIREFRAMES

Slide 19

Slide 19 text

WIREFRAMES COMP

Slide 20

Slide 20 text

WIREFRAMES COMP ?

Slide 21

Slide 21 text

WIREFRAMES COMP PAGE DESCRIPTION DIAGRAM

Slide 22

Slide 22 text

WIREFRAME http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ Show

Slide 23

Slide 23 text

PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ Tell http://hbswk.hbs.edu/item/6496.html

Slide 24

Slide 24 text

PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW

Slide 25

Slide 25 text

PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW

Slide 26

Slide 26 text

PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW Open to Interpretation (in a good way)

Slide 27

Slide 27 text

PAGE DESCRIPTION DIAGRAM http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/ HIGH LOW Mini-briefs for key pages

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 30

Slide 30 text

UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows

Slide 31

Slide 31 text

SEE DO UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows

Slide 32

Slide 32 text

SEE DO SEE NEXT DO NEXT UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows

Slide 33

Slide 33 text

SEE DO SEE NEXT DO NEXT CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows

Slide 34

Slide 34 text

CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows Messy but fast

Slide 35

Slide 35 text

CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows Layout Agnostic

Slide 36

Slide 36 text

CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows Not Page-level but Interaction-level

Slide 37

Slide 37 text

CONTENT ACTION ACTION ACTION UI FLOW SHORTHAND https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-ﬂows Tell Stories

Slide 38

Slide 38 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 39

Slide 39 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/

Slide 40

Slide 40 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL

Slide 41

Slide 41 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL COGNITIVE

Slide 42

Slide 42 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ PHYSICAL COGNITIVE EMOTIONAL

Slide 43

Slide 43 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Not Exhaustive but Essential

Slide 44

Slide 44 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Rubber Stamp

Slide 45

Slide 45 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Compare / Contrast STUDENTS FACULTY

Slide 46

Slide 46 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Play with size

Slide 47

Slide 47 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ Progression TIME

Slide 48

Slide 48 text

USER CONTEXT MODELS http://understandinggroup.com/2013/03/some-simple-models-for-user-context/ See also: Situation–Need–Task Model

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 51

Slide 51 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/

Slide 52

Slide 52 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ THIS THAT

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ WELCOMING EFFICIENT

Slide 55

Slide 55 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ NOVICE EXPERT

Slide 56

Slide 56 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ SERVE EXISTING ACQUIRE NEW

Slide 57

Slide 57 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ FOCUS EXPOSURE

Slide 58

Slide 58 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ FAMILIAR CUTTING- EDGE

Slide 59

Slide 59 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ ENGAGEMENT CONVERSION

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Not Mutually Exclusive

Slide 66

Slide 66 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Capture Multiple Facets

Slide 67

Slide 67 text

PERFORMANCE CONTINUUMS http://abbytheia.com/2015/01/29/this-is-the-work/ http://understandinggroup.com/2015/01/simple-continuum-model/ Explore Boundaries

Slide 68

Slide 68 text

SERVE EXISTING ACQUIRE NEW

Slide 69

Slide 69 text

“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

Slide 70

Slide 70 text

SPECIFICATION IDEATION CUSTOMER EMPATHY ALIGNMENT

Slide 71

Slide 71 text

WORDS PICTURES

Slide 72

Slide 72 text

LINGUISTIC PERCEPTUAL http://www.slideshare.net/mjane_h/what-we-mean-by-meaning-new-structural-properties-of-information-architecture-ias15-47485499

Slide 73

Slide 73 text

CONCEPTUAL LITERAL

Slide 74

Slide 74 text

WHAT Before HOW SEE DO SEE NEXT DO NEXT

Slide 75

Slide 75 text

WHAT Before HOW SEE DO SEE NEXT DO NEXT Easy to Grasp

Slide 76

Slide 76 text

WHAT Before HOW SEE DO SEE NEXT DO NEXT Fast

Slide 77

Slide 77 text

WHAT Before HOW SEE DO SEE NEXT DO NEXT Versatile

Slide 78

Slide 78 text

http://logger.believermag.com/post/87204218014/all-women-look-beautiful-to-me-now – Gordon Willis, cinematographer (Annie Hall, The Godfather)

Slide 79

Slide 79 text

“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)

Slide 80

Slide 80 text

THANK YOU! @travislaﬂeur There Will Be Slides: understandinggroup.com