Slide 1

Slide 1 text

WORKING WITH DEVELOPERS Batony #5 – October 2, 2019 Łukasz Przywarty

Slide 2

Slide 2 text

Łukasz Przywarty Head of Design, Infermedica

Slide 3

Slide 3 text

@LukaszPrzywarty Once upon a time, there
 was a designer…

Slide 4

Slide 4 text

Expectations vs reality 1 2 3 Wrong colors Missing elements Incorrect animations vs

Slide 5

Slide 5 text

@LukaszPrzywarty This is not what I’ve designed. Developers don’t care about design. There was too much to do and too little time. It’s not my fault. ! I can’t talk to developers.

Slide 6

Slide 6 text

PREPARE 1

Slide 7

Slide 7 text

Become a design advocate

Slide 8

Slide 8 text

@LukaszPrzywarty First, explain the basics What is the job of a designer? What is the business value of design? What are the examples of great product design?

Slide 9

Slide 9 text

@LukaszPrzywarty Host design workshops Show off your work (e.g. “demo days”) Invite developers to research sessions, etc. Next steps

Slide 10

Slide 10 text

“I saw Łukasz designing this. Paweł, Infermedica

Slide 11

Slide 11 text

Get to know your developers

Slide 12

Slide 12 text

@LukaszPrzywarty Grab a coffee and… talk! Learn how do developers work (process, tools) Find out how do they like to communicate How?

Slide 13

Slide 13 text

DESIGN 2

Slide 14

Slide 14 text

Include developers in your design process

Slide 15

Slide 15 text

@LukaszPrzywarty “The ultimate goal is to feel included. Jake Archibald, Developer at Google

Slide 16

Slide 16 text

Collaborate from the start Brainstorm, research, design together Leverage the knowledge of engineers How? Remote work is not
 an excuse

Slide 17

Slide 17 text

Share your work early and often

Slide 18

Slide 18 text

Share prototypes (InVision, etc.) Share user research findings Ask for feedback How?

Slide 19

Slide 19 text

Justify your decisions

Slide 20

Slide 20 text

Show the path that led you to the current design Discuss the pros and cons of different solutions How? Use data

Slide 21

Slide 21 text

Answer “Why?”

Slide 22

Slide 22 text

Think like an engineer

Slide 23

Slide 23 text

Find out how things work (read the docs, use developer tools, etc.) Learn a few technical terms (API, cache, requests, etc.) How? Consider learning to code

Slide 24

Slide 24 text

@LukaszPrzywarty What happens if the element is empty? What if there’s no picture? What happens when errors occur? What happens when there’s no Internet access? Edge cases

Slide 25

Slide 25 text

Hand off
 your designs

Slide 26

Slide 26 text

@LukaszPrzywarty “The best hand-off is no hand-off Bjørn Rostad, Product Designer at Dropbox

Slide 27

Slide 27 text

@LukaszPrzywarty Find out what the developers need from you Provide as much information as you can Don’t made developers guess How? Unless you want to test their creativity!

Slide 28

Slide 28 text

Use hand-off tools

Slide 29

Slide 29 text

Create a style guide

Slide 30

Slide 30 text

Design all possible flows

Slide 31

Slide 31 text

Prototype in code

Slide 32

Slide 32 text

Use real data (InVision Craft, populate.design, tinyfac.es, etc.) Remember about language differences

Slide 33

Slide 33 text

DEVELOP 3

Slide 34

Slide 34 text

Regularly check progress

Slide 35

Slide 35 text

@LukaszPrzywarty Set up the design review process Make use of developers’ meetings Prioritize design tweaks How?

Slide 36

Slide 36 text

Share your comments

Slide 37

Slide 37 text

FOLLOW UP 4

Slide 38

Slide 38 text

@LukaszPrzywarty Developers are not your enemies

Slide 39

Slide 39 text

@LukaszPrzywarty “How can we honestly build empathy for our users if we can’t empathize with each other, or those outside of our towers? Mustafa Kurtuldu, Design Advocate at Google

Slide 40

Slide 40 text

@LukaszPrzywarty Get to a solution together

Slide 41

Slide 41 text

@LukaszPrzywarty • A mindful design process • Creating a collaborative environment • Everyone is a designer. Get over it • How designers work with developers • How to work effectively with engineers • The beauty of imperfection in
 interface design • The nine states of design • The power of experience mapping • When design feels like an uphill battle • Who is responsible for design? Sources

Slide 42

Slide 42 text

THANK YOU! @LukaszPrzywarty on Twitter [email protected]