Working with Developers for Fun & Profit

Slide 1

Slide 1 text

Working with Developers For Fun & Profit Jack Moﬀett | @jackmoﬀett Senior Interaction Designer, Inmedius designaday.tumblr.com

Slide 2

Slide 2 text

Yeah, this happened.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“The way we work at Apple is that the complexity of these products really makes it critical to work collaboratively, with diﬀerent areas of expertise. I think that’s one of the things about my job I enjoy the most. I work with silicon designers, electronic and mechanical engineers, and I think you would struggle to determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making great products.” Sir Jonathan Ive

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

We’re hiring! www.inmedius.com

Slide 7

Slide 7 text

www.inmedius.com

Slide 8

Slide 8 text

by the power of grayskull by Speculum Mundi http://www.ﬂickr.com/photos/speculummundi/4569110353/in/photostream/

Slide 9

Slide 9 text

by the power of grayskull by Speculum Mundi http://www.ﬂickr.com/photos/speculummundi/4569110353/in/photostream/ user study & requirements analysis interaction & information design visual design & graphics production UI prototyping & implementation functional testing usability evaluation authoring of user guides & training materials

Slide 10

Slide 10 text

Tight Integration the board is misleading by snickclunk http://www.ﬂickr.com/photos/snickclunk/4119284398/in/photostream/

Slide 11

Slide 11 text

Memory Lane by physiognomist http://www.ﬂickr.com/photos/davidmican/315728765/

Slide 12

Slide 12 text

it hasn’t always been that way Memory Lane by physiognomist http://www.ﬂickr.com/photos/davidmican/315728765/

Slide 13

Slide 13 text

Fort Pitt Tunnel by ellenm1 http://www.ﬂickr.com/photos/ellenm1/4320606426/

Slide 14

Slide 14 text

Driving through the Squirrel Hill Tunnel by Jason Pratt http://www.flickr.com/photos/jasonpratt/912324482/

Slide 15

Slide 15 text

Wrong Way by KungPaoCajun http://www.ﬂickr.com/photos/begnaud/243996426/

Slide 16

Slide 16 text

Pizza boxes by Marc Wathieu http://www.ﬂickr.com/photos/marcwathieu/5395466993/

Slide 17

Slide 17 text

Survey

Slide 18

Slide 18 text

SurveyIxDA.org IxDA on LinkedIn IxDA Pittsburgh AIGA Experience List Roundroom Mailing List DesignAday Twitter (#ixda #iai)

Slide 19

Slide 19 text

SurveyViewed Responded Completed 308 90 82

Slide 20

Slide 20 text

Years of Experience

Slide 21

Slide 21 text

Work Situation Type of Work Type of Company Size of team

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Skill Competency

Slide 24

Slide 24 text

Participation

Slide 25

Slide 25 text

Collaboration lifecycle

Slide 26

Slide 26 text

Collaboration lifecycle Requirements Analysis Design Implementation Functional Testing Usability Testing

Slide 27

Slide 27 text

Requirements

Slide 28

Slide 28 text

Develop a shared understanding of the requirements Pre-game huddle by -just-jen- http://www.ﬂickr.com/photos/whetzel/55214389/

Slide 29

Slide 29 text

Develop a shared understanding of the requirements Pre-game huddle by -just-jen- http://www.ﬂickr.com/photos/whetzel/55214389/

Slide 30

Slide 30 text

“We need to connect this to this, using only those.” Identify technical challenges

Slide 31

Slide 31 text

Identify technologies The cup that can only be half-full. by vrogy http://www.ﬂickr.com/photos/vrogy/511644410/

Slide 32

Slide 32 text

Identify technologies The cup that can only be half-full. by vrogy http://www.ﬂickr.com/photos/vrogy/511644410/

Slide 33

Slide 33 text

Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 34

Slide 34 text

Estimate Time & Effort “Ideally, the developers and I are to work closely together during the design phase... but it typically works out that they gloss over the document or attend a few meetings and get a basic understanding of what we are planning on doing, but never pay attention to the full details. Then they tend to come to me with questions or ‘are you crazy? I can’t do that!’ when it’s time for them to put together a timeline for their development assessment. After a few times of close calls, they are beginning to pay more attention to the pencil sketches and overall workflows we put together for them.” By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 35

Slide 35 text

Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 36

Slide 36 text

Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 37

Slide 37 text

Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 38

Slide 38 text

Estimate Time & Effort software bill of materials By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 39

Slide 39 text

Estimate Time & Effort How can we best prioritize our work to support the developers’ schedule? By eflon http://www.flickr.com/photos/eflon/5079163335/

Slide 40

Slide 40 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Use their tools

Slide 41

Slide 41 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Issue Tracking

Slide 42

Slide 42 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Issue Tracking

Slide 43

Slide 43 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Issue Tracking Create items for each of your design tasks. Developers can subscribe to the ones that relate to their own tasks. Your estimates can be calculated in the chartboard, or not.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Wiki

Slide 47

Slide 47 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Wiki Subscribe to see what the developers are thinking. Document your own thinking so it is available to them.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Design

Slide 51

Slide 51 text

Design Documentation One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/

Slide 52

Slide 52 text

Design Documentation One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/

Slide 53

Slide 53 text

Design Documentation One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/

Slide 54

Slide 54 text

Design Documentation One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/

Slide 55

Slide 55 text

Design Documentation One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/ Design the documentation for those that will wear it.

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Bill Scott “The developers really appreciated it, because they could just look at it, and they didn’t have to wonder if the designer had forgotten something.”

Slide 59

Slide 59 text

Documentation is part of the design process. One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/

Slide 60

Slide 60 text

Documentation is part of the design process. One size ﬁts all…. By The Candid Street http://www.ﬂickr.com/photos/haddadi/5971508861/ You learn a lot by describing your design.

Slide 61

Slide 61 text

Implementation building blocks By ella novak http://www.ﬂickr.com/photos/cookylida/3334177358/

Slide 62

Slide 62 text

“I get most frustrated when, after providing a pixel-perfect mockup, I see the ﬁnished implementation during the testing phase, and it’s drastically diﬀerent than what I spec’d (fonts, colors, sizes, spacing, alignment, positioning, etc).”

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock http://www.ﬂickr.com/photos/jdhancock/4393509633/

Slide 68

Slide 68 text

Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock http://www.ﬂickr.com/photos/jdhancock/4393509633/ fight!

Slide 69

Slide 69 text

“If you’re in a room ﬁlled with designers, bring up the topic of whether it’s valuable for a designer to also code. Immediately, the room will divide faster than Moses split the Red Sea. One side will tell you coding is an essential skill, while the other will vehemently argue how it dilutes the designer’s value.” An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.ﬂickr.com/photos/40054618@N03/5139909661/ Jared Spool

Slide 70

Slide 70 text

Do Designers need to code?

Slide 71

Slide 71 text

Will Learning to Code Make me a better interaction designer?

Slide 72

Slide 72 text

Perceived Drawbacks Tent By planetlight http://www.ﬂickr.com/photos/planetlight/4767815082/in/photostream/

Slide 73

Slide 73 text

Tasked with coding instead of design “I found that when I tried to be both a designer and engineer/coder, I ended up doing a lot more engineering and a lot less design than I wanted to do. I think part of the problem is that engineering skills are, in the end, valued more than design skills.” Jennifer Tidwell, author of Designing Interfaces: Patterns for Eﬀective Interaction Tent By planetlight http://www.ﬂickr.com/photos/planetlight/4767815082/in/photostream/

Slide 74

Slide 74 text

Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Tent By planetlight http://www.ﬂickr.com/photos/planetlight/4767815082/in/photostream/

Slide 75

Slide 75 text

Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Tent By planetlight http://www.ﬂickr.com/photos/planetlight/4767815082/in/photostream/

Slide 76

Slide 76 text

Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Marginalize design skills to add coding skills Tent By planetlight http://www.ﬂickr.com/photos/planetlight/4767815082/in/photostream/

Slide 77

Slide 77 text

Designer Soup Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 78

Slide 78 text

Designer Soup Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/ Interaction Design Skills Visual Design Skills Implementation Skills Business Skills

Slide 79

Slide 79 text

Designer Soup Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 80

Slide 80 text

Designer Soup Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/ T M

Slide 81

Slide 81 text

Perceived Benefits Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 82

Slide 82 text

Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 83

Slide 83 text

Calling BS on coders Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 84

Slide 84 text

Calling BS on coders Respect & credibility Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 85

Slide 85 text

Calling BS on coders Respect & credibility Speaking their language Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 86

Slide 86 text

Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & diﬃculty Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 87

Slide 87 text

Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & diﬃculty Participation in evaluation & selection of technology Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 88

Slide 88 text

Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & diﬃculty Participation in evaluation & selection of technology Better able to create prototypes Mighty Elixir By Robert S. Donovan http://www.ﬂickr.com/photos/booleansplit/2220774911/

Slide 89

Slide 89 text

Slide 90

Slide 90 text

“Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results.” An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.ﬂickr.com/photos/40054618@N03/5139909661/

Slide 91

Slide 91 text

Slide 92

Slide 92 text

building blocks By ella novak http://www.ﬂickr.com/photos/cookylida/3334177358/ Participation in Implementation

Slide 93

Slide 93 text

building blocks By ella novak http://www.ﬂickr.com/photos/cookylida/3334177358/ Participation in Implementation Less documentation is required when you implement your own design.

Slide 94

Slide 94 text

building blocks By ella novak http://www.ﬂickr.com/photos/cookylida/3334177358/ Participation in Implementation Less documentation is required when you implement your own design. Get everything perfect the ﬁrst time.

Slide 95

Slide 95 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Use their tools

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Working in the Production Code

Slide 98

Slide 98 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Working in the Production Code I don’t have to ask permission to make changes or ask someone else to make them for me.

Slide 99

Slide 99 text

Slide 100

Slide 100 text

Slide 101

Slide 101 text

rainbow sprinkle donut By tommy.chheng http://www.ﬂickr.com/photos/tommychheng/3226662528/

Slide 102

Slide 102 text

rainbow sprinkle donut By tommy.chheng http://www.ﬂickr.com/photos/tommychheng/3226662528/ With great power comes great responsibility.

Slide 103

Slide 103 text

Version Control

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

Functional Testing Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.ﬂickr.com/photos/ogwrnsk/5020082786/

Slide 107

Slide 107 text

Designers make great testers Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.ﬂickr.com/photos/ogwrnsk/5020082786/

Slide 108

Slide 108 text

Designers make great testers Detail oriented Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.ﬂickr.com/photos/ogwrnsk/5020082786/

Slide 109

Slide 109 text

Designers make great testers Detail oriented Use the system more like a user Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.ﬂickr.com/photos/ogwrnsk/5020082786/

Slide 110

Slide 110 text

Designers make great testers Detail oriented Use the system more like a user Know better than anyone how the thing is supposed to work Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.ﬂickr.com/photos/ogwrnsk/5020082786/

Slide 111

Slide 111 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Use their tools

Slide 112

Slide 112 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Use their tools Participation is power.

Slide 113

Slide 113 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.ﬂickr.com/photos/katerha/5746905652/ Use their tools Participation is power. Gives you the opportunity to record usability issues to be ﬁxed prior to usability testing.

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Usability Testing

Slide 116

Slide 116 text

it works both ways

Slide 117

Slide 117 text

it works both ways Have developers participate in ﬁeld trials.

Slide 118

Slide 118 text

it works both ways Have developers participate in ﬁeld trials. They will gain a better appreciation of the users’ concerns.

Slide 119

Slide 119 text

it works both ways Have developers participate in ﬁeld trials. They will gain a better appreciation of the users’ concerns. Other developers will listen when one of their own is as adamant about usability concerns as you are.

Slide 120

Slide 120 text

Relationships v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/

Slide 121

Slide 121 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ DO Not

Slide 122

Slide 122 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ DO Not Critique engineering prototypes on aesthetics or interaction design.

Slide 123

Slide 123 text

Slide 124

Slide 124 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ DO Not Critique engineering prototypes on aesthetics or interaction design. Force your process on the developers. Expect developers to make changes at the last minute because you haven’t been involved until the end.

Slide 125

Slide 125 text

Slide 126

Slide 126 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ Yes Please

Slide 127

Slide 127 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ Yes Please Position your involvement as something that makes your developers’ job easier.

Slide 128

Slide 128 text

v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.ﬂickr.com/photos/mslivenletlive/427537759/ Yes Please Position your involvement as something that makes your developers’ job easier. Be inclusive. It’s not our responsibility to make decisions so much as to oﬀer options.

Slide 129

Slide 129 text

Slide 130

Slide 130 text

Slide 131

Slide 131 text

Slide 132

Slide 132 text

Four Storms And A Twister by JD Hancock http://www.ﬂickr.com/photos/jdhancock/3842546304/

Slide 133

Slide 133 text

Four Storms And A Twister by JD Hancock http://www.ﬂickr.com/photos/jdhancock/3842546304/ Conclusion

Slide 134

Slide 134 text

Four Storms And A Twister by JD Hancock http://www.ﬂickr.com/photos/jdhancock/3842546304/ Tight Dev Team Integration

Slide 135

Slide 135 text

Four Storms And A Twister by JD Hancock http://www.ﬂickr.com/photos/jdhancock/3842546304/ Tight Dev Team Integration Participate in the entire development process

Slide 136

Slide 136 text

Four Storms And A Twister by JD Hancock http://www.ﬂickr.com/photos/jdhancock/3842546304/ Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly

Slide 137

Slide 137 text

Slide 138

Slide 138 text

Slide 139

Slide 139 text

Slide 140

Slide 140 text

for success jump for joy by Tinou Bao http://www.ﬂickr.com/photos/tinou/506361030/

Slide 141

Slide 141 text

Questions? Jack Moffett | @jackmoffett Senior Interaction Designer, Inmedius jmoffett@inmedius.com designaday.tumblr.com

Slide 142

Slide 142 text

Suggested Reading • How designers and engineers can play nice (and still run with scissors) by Jenna Bilotta • Concept to Code - Code Literacy in UX by Ryan Betts • Owen Otto’s response to “How do UI designers work with engineers to ensure their vision is achieved?” on Quora • 3 Reasons Why Learning To Code Makes You A Better Designer by Jared Spool

Slide 143

Slide 143 text

Credits Typefaces: Blanch, by Atipus Myriad Pro, by Adobe Survey visualizations created with Parallel Sets by Robert Kosara.

Slide 144

Slide 144 text

Thank you Jack Moffett | @jackmoffett Senior Interaction Designer, Inmedius jmoffett@inmedius.com designaday.tumblr.com