Working with Developers
0 likes612 views
This document discusses the benefits of designers and developers working collaboratively throughout the product development process. It emphasizes establishing a shared understanding of requirements through early involvement of both parties. Design documentation should be tailored to the needs of developers to help implementation match the intended design. Issues should be tracked jointly and documentation used as a communication tool between designers and developers.
Working with Developers
- 1. Working with Developers For Fun & Profit Jack Moffett | @jackmoffett Senior Interaction Designer, Inmedius designaday.tumblr.com
- 4. “The way we work at Apple is that the complexity of these products really makes it critical to work collaboratively, with different 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
- 8. by the power of grayskull by Speculum Mundi http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
- 9. user study & requirements analysis interaction & information design visual design & graphics production UI prototyping & implementation functional testing usability evaluation authoring of user guides & training materials by the power of grayskull by Speculum Mundi http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
- 10. Tight Integration the board is misleading by snickclunk http://www.flickr.com/photos/snickclunk/4119284398/in/photostream/
- 11. Memory Lane by physiognomist http://www.flickr.com/photos/davidmican/315728765/
- 12. Memory Lane by physiognomist http://www.flickr.com/photos/davidmican/315728765/ it hasn’t always been that way
- 13. Fort Pitt Tunnel by ellenm1 http://www.flickr.com/photos/ellenm1/4320606426/
- 14. Driving through the Squirrel Hill Tunnel by Jason Pratt http://www.flickr.com/photos/jasonpratt/912324482/
- 15. Wrong Way by KungPaoCajun http://www.flickr.com/photos/begnaud/243996426/
- 16. Pizza boxes by Marc Wathieu http://www.flickr.com/photos/marcwathieu/5395466993/
- 17. Survey
- 18. Survey IxDA.org IxDA on LinkedIn IxDA Pittsburgh AIGA Experience List Roundroom Mailing List DesignAday Twitter (#ixda #iai)
- 19. Survey Viewed 308 Responded 90 Completed 82
- 21. Work Situation Type of Company Type of Work Size of team
- 23. Skill Competency
- 24. Participation
- 26. Collaboration Requirements Analysis Design lifecycle Implementation Functional Testing Usability Testing
- 27. Requirements
- 28. Develop a shared understanding of the requirements Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
- 29. Develop a shared understanding of the requirements Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
- 30. Identify technical challenges “We need to connect this to this, using only those.”
- 31. Identify technologies The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
- 32. Identify technologies The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
- 33. Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/
- 34. Estimate Time “Ideally, the developers and I are to work & Effort 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/
- 35. Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/
- 36. Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/
- 37. Estimate Time & Effort By eflon http://www.flickr.com/photos/eflon/5079163335/
- 38. Estimate Time & Effort software bill of materials By eflon http://www.flickr.com/photos/eflon/5079163335/
- 39. Estimate Time & Effort How can we best prioritize our work to support the developers’ schedule? By eflon http://www.flickr.com/photos/eflon/5079163335/
- 40. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 41. Issue Tracking A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 42. Issue Tracking A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 43. 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. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 46. Wiki A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 47. Wiki Subscribe to see what the developers are thinking. Document your own thinking so it is available to them. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 49. Subscribe
- 50. Design
- 51. Design Documentation One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 52. Design Documentation One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 53. Design Documentation One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 54. Design Documentation One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 55. Design Documentation Design the documentation for those that will wear it. One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 58. “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.” Bill Scott
- 59. Documentation is part of the design process. One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 60. Documentation is part of the design process. You learn a lot by describing your design. One size fits all…. By The Candid Street http://www.flickr.com/photos/haddadi/5971508861/
- 61. building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation
- 62. “I get most frustrated when, after providing a pixel-perfect mockup, I see the finished implementation during the testing phase, and it’s drastically different than what I spec’d (fonts, colors, sizes, spacing, alignment, positioning, etc).”
- 67. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock http://www.flickr.com/photos/jdhancock/4393509633/
- 68. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock http://www.flickr.com/photos/jdhancock/4393509633/ fight!
- 69. “If you’re in a room filled 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.” Jared Spool An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/
- 70. Do Designers need to code?
- 71. Will Learning to Code Make me a better interaction designer?
- 72. Perceived Drawbacks Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
- 73. 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 Effective Interaction Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
- 74. Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
- 75. Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
- 76. 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.flickr.com/photos/planetlight/4767815082/in/photostream/
- 77. Designer Soup Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 78. Designer Interaction Design Skills Soup Visual Design Skills Implementation Skills Business Skills Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 79. Designer Soup Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 80. Designer T Soup M Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 81. Perceived Benefits Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 82. Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 83. Calling BS on coders Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 84. Calling BS on coders Respect & credibility Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 85. Calling BS on coders Respect & credibility Speaking their language Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 86. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 87. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technology Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 88. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technology Better able to create prototypes Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 89. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technology Better able to create prototypes Participation in implementation Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
- 90. “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.flickr.com/photos/40054618@N03/5139909661/
- 91. “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.flickr.com/photos/40054618@N03/5139909661/
- 92. Participation in building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation
- 93. Participation in building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation Less documentation is required when you implement your own design.
- 94. Participation in building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation Less documentation is required when you implement your own design. Get everything perfect the first time.
- 95. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 97. Working in the Production Code A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 98. Working in the I don’t have to ask permission to make changes or ask someone Production Code else to make them for me. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 99. Working in the I don’t have to ask permission to make changes or ask someone Production Code else to make them for me. I know that the final product will be the one that I designed. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 100. Working in the I don’t have to ask permission to make changes or ask someone Production Code else to make them for me. I know that the final product will be the one that I designed. With great power comes great responsibility. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 101. rainbow sprinkle donut By tommy.chheng http://www.flickr.com/photos/tommychheng/3226662528/
- 102. With great power comes great responsibility. rainbow sprinkle donut By tommy.chheng http://www.flickr.com/photos/tommychheng/3226662528/
- 103. Version Control
- 106. Functional Testing Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
- 107. Designers make great testers Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
- 108. Designers make Detail oriented great testers Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
- 109. Designers make Detail oriented great testers Use the system more like a user Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
- 110. Designers make Detail oriented great testers 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.flickr.com/photos/ogwrnsk/5020082786/
- 111. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 112. Use their tools Participation is power. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 113. Use their tools Participation is power. Gives you the opportunity to record usability issues to be fixed prior to usability testing. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 114. Use their tools Participation is power. Gives you the opportunity to record usability issues to be fixed prior to usability testing. Don’t abuse it—follow the rules. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
- 115. Usability Testing
- 116. it works both ways
- 117. it works both Have developers participate in field trials. ways
- 118. it works both Have developers participate in field trials. ways They will gain a better appreciation of the users’ concerns.
- 119. it works both Have developers participate in field trials. ways 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.
- 120. Relationships v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 121. DO Not v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 122. DO Not Critique engineering prototypes on aesthetics or interaction design. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 123. DO Not Critique engineering prototypes on aesthetics or interaction design. Force your process on the developers. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 124. 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. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 125. 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. Expect developers to have the same visual sensibilities you have. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 126. Yes Please v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 127. Yes Please Position your involvement as something that makes your developers’ job easier. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 128. 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 offer options. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 129. 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 offer options. Find opportunities to educate. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 130. 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 offer options. Find opportunities to educate. Dare to compromise. v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 131. 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 offer options. Find opportunities to educate. Dare to compromise. Be social - Jenna Bilotta says, “Drink a beer with your engineer.” v2.19: March 19th (Pirate Socks) by Phoney Nickle http://www.flickr.com/photos/mslivenletlive/427537759/
- 132. Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 133. Four Storms And A Twister by JD Hancock Conclusion http://www.flickr.com/photos/jdhancock/3842546304/
- 134. Tight Dev Team Integration Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 135. Tight Dev Team Integration Participate in the entire development process Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 136. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 137. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ tools Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 138. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ tools Learn implementation skills Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 139. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ tools Learn implementation skills Be respectful / Be social Four Storms And A Twister by JD Hancock http://www.flickr.com/photos/jdhancock/3842546304/
- 140. for success jump for joy by Tinou Bao http://www.flickr.com/photos/tinou/506361030/
- 141. Questions? Jack Moffett | @jackmoffett Senior Interaction Designer, Inmedius jmoff[email protected] designaday.tumblr.com
- 142. 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
- 143. Credits Typefaces: Blanch, by Atipus Myriad Pro, by Adobe Survey visualizations created with Parallel Sets by Robert Kosara.
- 144. Thank you Jack Moffett | @jackmoffett Senior Interaction Designer, Inmedius jmoff[email protected] designaday.tumblr.com