Working with developers

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

Łukasz Przywarty Head of Design, Infermedica

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

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

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

1 PREPARE

Become a design advocate

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? @LukaszPrzywarty

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

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

Get to know your developers

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

2 DESIGN

Include developers in your design process

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

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

Share your work early and often

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

Justify your decisions

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

Answer “Why?”

Think like an engineer

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

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

Hand off your designs

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

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

Use hand-off tools

Create a style guide

Design all possible flows

Prototype in code

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

3 DEVELOP

Regularly check progress

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

Share your comments

4 FOLLOW UP

Developers are not your enemies @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 @LukaszPrzywarty

Get to a solution together @LukaszPrzywarty

Sources • • • • • • 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? @LukaszPrzywarty

THANK YOU! @LukaszPrzywarty on Twitter lukasz@przywarty.com