Slide 1

Slide 1 text

App Design & Development Conference 2018 Designer/developer collaboration: what works and what doesn’t Sara Cambridge @maybanks

Slide 2

Slide 2 text

● Material Design ● Patterns in designer/developer collaboration ● What works, what doesn’t ● Best practices for effective teams

Slide 3

Slide 3 text

Material Design

Slide 4

Slide 4 text

Material Design System is a set of patterns and guidance

Slide 5

Slide 5 text

Material Design System is a library of components

Slide 6

Slide 6 text

Material Theming: customize for your brand

Slide 7

Slide 7 text

Material has a suite of tools and products

Slide 8

Slide 8 text

Material Design System offers guidelines material.io

Slide 9

Slide 9 text

Material Design Research

Slide 10

Slide 10 text

Workflow Research Areas Product Components

Slide 11

Slide 11 text

Over 100 interviews with designers and developers

Slide 12

Slide 12 text

General patterns in designer/developer collaboration

Slide 13

Slide 13 text

What does designer/developer collaboration look like? Design Develop

Slide 14

Slide 14 text

What does designer/developer collaboration look like? Design Develop

Slide 15

Slide 15 text

http://www.missionmission.org/2016/04/04/ping-pong-at-pops/

Slide 16

Slide 16 text

Phases of designer/developer collaboration

Slide 17

Slide 17 text

18

Slide 18

Slide 18 text

Designer/developer collaboration This reflects the process for more mature orgs. All stages are fluid and often overlap. Initial Concepting • Design driven • Developers uncover constraints, address feasibility Handoff Begins • Both roles involved • Implementation starts; design continues • Usually includes design specs or mocks Implementation • Developer driven • Design ‘officially’ finished, but... • Ongoing communication often needed

Slide 19

Slide 19 text

Designer/developer collaboration This reflects the process for more mature orgs. All stages are fluid and often overlap. Initial Concepting • Design driven • Developers uncover constraints, address feasibility Handoff Begins • Both roles involved • Implementation starts; design continues • Usually includes design specs or mocks. Implementation • Developer driven • Design ‘officially’ finished. • Communication often needed to clarify intent.

Slide 20

Slide 20 text

“Everything I did before this was worse, and I don’t know what would be better.” iOS developer

Slide 21

Slide 21 text

https://wifflegif.com/gifs/43998-lost-in-translation-scarlett-johansson-gif

Slide 22

Slide 22 text

Designer/developer collaboration: what works and what doesn’t

Slide 23

Slide 23 text

4 aspects that influence how designers/developers collaborate

Slide 24

Slide 24 text

Culture: company/team/nationality Proximity: remote/co-located Personal: skills, history, passions Communication: personality, tools

Slide 25

Slide 25 text

What doesn’t work

Slide 26

Slide 26 text

“I’m trying to work with [our dev team in India]. I spend a lot of time trying to maintain clear communication and direction.” Senior in-house designer for a large e-commerce company

Slide 27

Slide 27 text

“Ideally I make redlines, but things can still change; recently I ended up having to make 7 versions of redlines [due to getting stakeholder changes late].” UX designer

Slide 28

Slide 28 text

“A lot of times I don't ask questions because I don't want to interrupt the designer so much. Sometimes I wait a day if I've already asked too many questions.” In-house Android developer

Slide 29

Slide 29 text

Problems occur between designers and developers when...

Slide 30

Slide 30 text

The company values one role more Time, language, culture differences Infrequent/indirect communication Little respect, understanding Design is under or over specified Process isn’t improved

Slide 31

Slide 31 text

What does work

Slide 32

Slide 32 text

“I’m interested in development in general and I try to make their lives easier. It’s mutual, we help each other out.” Design lead at a design/development agency

Slide 33

Slide 33 text

“After handoff...engineers will grab designers on the fly [if they have questions]. When an engineer gets a milestone, they call the designer over for feedback.” In-house designer manager at a mid-size startup

Slide 34

Slide 34 text

“The process [of collaborating] varies depending on the experience of the designer. More junior designers won’t think about edge cases, while more senior ones will.” Google developer/team lead

Slide 35

Slide 35 text

What improves collaboration between designers and developers...

Slide 36

Slide 36 text

Company culture values both roles Both are given time for their work Ongoing, direct communication Mutual curiosity about the other Process is evaluated/improved

Slide 37

Slide 37 text

Best practices for effective teams

Slide 38

Slide 38 text

When you’re talking with someone, how often are you crafting your response while they are still talking?

Slide 39

Slide 39 text

Cognitive empathy: “Purposefully discovering the underlying thoughts that guide someone else’s behavior and acknowledging them as valid, even if they differ from your own.” Indy Young, Practical Empathy, 2015

Slide 40

Slide 40 text

To improve empathy: “Practice listening to people; shut down your inner voice so you can hear more clearly. Recognize your own emotional reactions before they distract your ability to listen.” Indy Young, Practical Empathy, 2015

Slide 41

Slide 41 text

What separates teams that do great work from those that don’t?

Slide 42

Slide 42 text

Chapter Title

Slide 43

Slide 43 text

Psychological Safety: “The belief that it’s absolutely OK, in fact expected, to speak up with concerns, questions, ideas, even mistakes.” Amy Edmonson, 2014 TED talk

Slide 44

Slide 44 text

Increasing psychological safety: 1. Frame the work as a learning opportunity. 2. Acknowledge your own fallibility. 3. Model curiosity by speaking up. Amy Edmonson, 2014 TED talk

Slide 45

Slide 45 text

Practical tips from Material Design team members

Slide 46

Slide 46 text

Foster ongoing conversations Discuss communication preferences Be explicit about definitions Share artifacts Improve processes Consider checklists

Slide 47

Slide 47 text

A story about a design/development agency….

Slide 48

Slide 48 text

“It’s just people talking to people”.

Slide 49

Slide 49 text

Participate in Material research! https://goo.gl/36fhE4 Thanks! Questions? @maybanks