Working with Developers

Working with DevelopersFor Fun & ProfitJack Moffett | @jackmoffettSenior Interaction Designer, Inmediusdesignaday.tumblr.com

Yeah, this happened.

“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

We’re hiring!

www.inmedius.com

http://www.inmedius.com


www.inmedius.com



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

http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/


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

user study & requirements analysisinteraction & information designvisual design & graphics productionUI prototyping & implementationfunctional testingusability evaluationauthoring of user guides & training materials



Tight Integration

the board is misleading by snickclunkhttp://www.flickr.com/photos/snickclunk/4119284398/in/photostream/

http://www.flickr.com/photos/snickclunk/4119284398/in/photostream/

http://www.flickr.com/photos/snickclunk/4119284398/in/photostream/

Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/

http://www.flickr.com/photos/davidmican/315728765/


it hasn’t always been that way

Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/



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

http://www.flickr.com/photos/ellenm1/4320606426/

http://www.flickr.com/photos/ellenm1/4320606426/

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

http://www.flickr.com/photos/jasonpratt/912324482/

http://www.flickr.com/photos/jasonpratt/912324482/

Wrong Way by KungPaoCajunhttp://www.flickr.com/photos/begnaud/243996426/

http://www.flickr.com/photos/begnaud/243996426/

http://www.flickr.com/photos/begnaud/243996426/

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

http://www.flickr.com/photos/marcwathieu/5395466993/

http://www.flickr.com/photos/marcwathieu/5395466993/

Survey

Survey IxDA.orgIxDA on LinkedInIxDA PittsburghAIGA Experience ListRoundroom Mailing ListDesignAdayTwitter (#ixda #iai)

Survey ViewedRespondedCompleted

3089082

Years of Experience

Work Situation

Type of Work

Type of Company

Size of team

Skill Competency

Participation

Collaboration lifecycle

Collaboration lifecycle

Requirements AnalysisDesignImplementationFunctional TestingUsability Testing

Requirements

Develop a shared understanding of the requirements

Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/

Develop a shared understanding of the requirements

Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/

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

Identify technical

challenges

Identify technologies

The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/

http://www.flickr.com/photos/vrogy/511644410/


Identify technologies

The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/



Estimate Time & Effort

By eflon http://www.flickr.com/photos/eflon/5079163335/


“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.”








Estimate Time & Effort software bill of materials



How can we best prioritize our work to support the

developers’ schedule?


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

Use their tools

http://www.flickr.com/photos/katerha/5746905652/



Issue Tracking




Issue Tracking




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.




Wiki




Wiki Subscribe to see what the developers are thinking.

Document your own thinking so it is available to them.



Subscribe

Design

Design Documentation

One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/

http://www.flickr.com/photos/haddadi/5971508861/
















Design the documentationfor those that will wear it.



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.”

Documentation is part of the design process.




Documentation is part of the design process.


You learn a lot by describing your design.



Implementation

building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/

http://www.flickr.com/photos/cookylida/3334177358/


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

Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/

http://www.flickr.com/photos/jdhancock/4393509633/


Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/

fight!



“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.”

An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/

Jared Spool

http://www.flickr.com/photos/40054618@N03/5139909661/


Do Designers need to code?

Will Learning to Code Make me a better

interaction designer?

Perceived Drawbacks

Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/

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


Tasked with coding instead of design

Limit Creativity due to knowledge of difficulty







Marginalize design skills to add coding skills


Designer Soup

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

http://www.flickr.com/photos/booleansplit/2220774911/


Designer Soup


Interaction Design Skills

Visual Design Skills

Implementation Skills

Business Skills



Designer Soup




Designer Soup


TM



Perceived Benefits







Calling BS on coders




Calling BS on codersRespect & credibility




Calling BS on codersRespect & credibilitySpeaking their language




Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficulty




Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technology




Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technologyBetter able to create prototypes




Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technologyBetter able to create prototypes


Participation in implementation



“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.”




“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.”





Participation in Implementation





Less documentation is required when you implement your own design.





Less documentation is required when you implement your own design.

Get everything perfect the first time.




Use their tools




Working in the Production Code





I don’t have to ask permission to make changes or ask someone else to make them for me.






I know that the final product will be the one that I designed.






I know that the final product will be the one that I designed.

With great power comes great responsibility.



rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/

http://www.flickr.com/photos/tommychheng/3226662528/


rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/

With great power comes great responsibility.



Version Control

Functional TestingAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/

http://www.flickr.com/photos/ogwrnsk/5020082786/


Designers make great testers

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




Detail oriented





Detail oriented

Use the system more like a user





Detail oriented

Use the system more like a user

Know better than anyone how the thing is supposed to work





Use their tools




Use their tools Participation is power.





Gives you the opportunity to record usability issues to be fixed prior to usability testing.





Gives you the opportunity to record usability issues to be fixed prior to usability testing.

Don’t abuse it—follow the rules.



Usability Testing

it works both ways

it works both ways

Have developers participate in field trials.

it works both ways


They will gain a better appreciation of the users’ concerns.

it works both 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.

Relationshipsv2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/

http://www.flickr.com/photos/mslivenletlive/427537759/


v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/

DO Not




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 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.




Yes Please




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.







Dare to compromise.

Be social - Jenna Bilotta says, “Drink a beer with your engineer.”



Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/




Conclusion




Tight Dev Team Integration




Tight Dev Team Integration Participate in the entire

development process





development process

Tailor documentation to be developer-friendly





development process


Use the developers’ tools





development process



Learn implementation skills





development process



Learn implementation skills

Be respectful / Be social



for success

jump for joy by Tinou Bao http://www.flickr.com/photos/tinou/506361030/

Questions?Jack Moffett | @jackmoffettSenior Interaction Designer, [email protected]

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

CreditsTypefaces: Blanch, by Atipus

Myriad Pro, by Adobe

Survey visualizations created with Parallel Sets by Robert Kosara.

Thank youJack Moffett | @jackmoffettSenior Interaction Designer, [email protected]

mailto:[email protected]

mailto:[email protected]

http://www.designaday.tumblr.com

http://www.designaday.tumblr.com